Using Tables
A Simple Table
Specifying Column Names
Adding a Caption
Using Links
Styling Tables with Cascading Style Sheets
(CSS)
Detecting clicks by numeric position using RowIndex
Table Methods
XML Structure of Tables
Run BASIC has a useful facility for displaying information from the contents of an array in a web application by using tables. Tables are a feature provided by the web browser which Run BASIC makes easy to produce. Here is a very simple example of a table:
dim ticTacToe$(2,2)
ticTacToe$(0, 0) = "X"
ticTacToe$(1, 1) = "X"
ticTacToe$(2, 2) = "X"
ticTacToe$(1, 0) = "O"
ticTacToe$(2, 1) = "O"
ticTacToe$(1, 2) = "O"
table #ttt, ticTacToe$()
render #ttt
This simple little program creates an array 3 by 3 and fills it with X's and O's as if you are playing Tic Tac Toe. Then it creates a table from the array and finally it renders that table into the web page. Here's what it looks like:
| X | ||
| O | X | O |
| O | X |
As you can see, X wins this round!
You can add column names to a table by using the COLUMNNAMES() method. Here is an example using a coffee theme:
'present some options
dim options$(1, 2)
options$(0, 0) = "Regular"
options$(0, 1) = "Latte"
options$(0, 2) = "Espresso"
options$(1, 0) = "Classic drip"
options$(1, 1) = "Coffee and frothy milk"
options$(1, 2) = "Concentrated coffee goodness"
table #menu, options$()
#menu columnnames("Drink type,Description")
render #menu
wait
The resulting table looks like this:
To add a caption which will describe the information in your table, use the CAPTION() method:
'present some options
dim options$(1, 2)
options$(0, 0) = "Regular"
options$(0, 1) = "Latte"
options$(0, 2) = "Espresso"
options$(1, 0) = "Classic drip"
options$(1, 1) = "Coffee and frothy milk"
options$(1, 2) = "Concentrated coffee goodness"
table #menu, options$()
#menu columnnames("Drink type,Description")
#menu caption("Coffee menu")
render #menu
wait
The resulting table looks like this:
You can make items in one or more columns of a table into links, which can invoke subroutines by using the LINK() method:
'present some options
dim options$(1, 2)
options$(0, 0) = "Regular"
options$(0, 1) = "Latte"
options$(0, 2) = "Espresso"
options$(1, 0) = "Classic drip"
options$(1, 1) = "Coffee and frothy milk"
options$(1, 2) = "Concentrated coffee goodness"
table #menu, options$()
#menu columnnames("Drink type,Description")
#menu caption("Coffee menu")
#menu link("Drink type", "[order]")
render #menu
wait
[order]
print "You ordered "; EventKey$
wait
The resulting table looks like this:
Styling Tables with Cascading Style Sheets (CSS)
To add some color or other visual attributes to a table you can specify CSS rules for different parts of the table. Note: The same techniques shown here also apply to styling tables rendered for database connections like SQLite.
Here we show how to add a background color to the caption:
'present some options
dim options$(1, 2)
options$(0, 0) = "Regular"
options$(0, 1) = "Latte"
options$(0, 2) = "Espresso"
options$(1, 0) = "Classic drip"
options$(1, 1) = "Coffee and frothy milk"
options$(1, 2) = "Concentrated coffee goodness"
table #menu, options$()
#menu columnnames("Drink type,Description")
#menu caption("Coffee menu")
#menu link("Drink type", "[order]")
'set a background color (light blue) to the caption
cssclass "caption", "{ background: #CCF }"
render #menu
wait
[order]
print "You ordered "; EventKey$
wait
The resulting table looks like this:
Let's add a couple more CSS rules to our table. The "table" rule adds a border, and the "tr" rule adds color to the tr element (tr means table row).
'present some options
dim options$(1, 2)
options$(0, 0) = "Regular"
options$(0, 1) = "Latte"
options$(0, 2) = "Espresso"
options$(1, 0) = "Classic drip"
options$(1, 1) = "Coffee and frothy milk"
options$(1, 2) = "Concentrated coffee goodness"
table #menu, options$()
#menu columnnames("Drink type,Description")
#menu caption("Coffee menu")
#menu link("Drink type", "[order]")
'set a background color (light blue) to the caption
cssclass "caption", "{ background: #CCF }"
cssclass "table", "{ border: 3px ridge #DDF ; border-spacing: 4px }"
cssclass "tr", "{ background: #CCF }"
render #menu
wait
[order]
print "You ordered "; EventKey$
wait
The resulting table looks like this:
Detecting clicks by numeric position using RowIndex
Sometimes it may be useful to know which link in a table is clicked by the row that it is contained in. If the link is in the first row is position 1, the second row is position 2, etc. Run BASIC provides a global variable RowIndex which contains the row index of the last link clicked in table. So with a minor alteration to our Coffee menu program above you can see how this works:
'present some options
dim options$(1, 2)
options$(0, 0) = "Regular"
options$(0, 1) = "Latte"
options$(0, 2) = "Espresso"
options$(1, 0) = "Classic drip"
options$(1, 1) = "Coffee and frothy milk"
options$(1, 2) = "Concentrated coffee goodness"
table #menu, options$()
#menu columnnames("Drink type,Description")
#menu caption("Coffee menu")
#menu link("Drink type", "[order]")
'set a background color (light blue) to the caption
cssclass "caption", "{ background: #CCF }"
cssclass "table", "{ border: 3px ridge #DDF ; border-spacing: 4px }"
cssclass "tr", "{ background: #CCF }"
render #menu
wait
[order]
print "You ordered "; options$(0, RowIndex-1)
wait
Here are the methods which can be used with tables:
#handle COLUMNNAMES(expr$) - Set the column names using a
comma delimited string expression
#handle CAPTION(expr$) - Set the caption using expr$
#handle LINK(columnNameExpr$, "handler") - Make the items in a column into links
using handler (either a sub or a branch label) when the user clicks
#handle ISNULL() - Returns zero (or false)
#handle DEBUG$() - Returns the string "Table"
Here are the styling related methods:
#handle CSSCLASS(expr$) - Set the CSS class tag to expr$
#handle TRCLASS(expr$) - Set the CSS class tag for table rows to expr$
#handle TDCLASS(expr$) - Set the CSS class tag for row data items to expr$
#handle THCLASS(expr$) - Set the CSS class tag for header row items to expr$
#handle CAPTIONCLASS(expr$) - Set the CSS class tag for the table caption to expr$
#handle ALLCLASS(expr$) - Set the CSS class tag for all of the properties of the
table to expr$
XML Structure of Rendered Tables
Here is an example of XML generated for the table in the coffee example above. Some values have been simplified and link related javascript is removed for clarity. This information is useful for CSS work, and also for XML parsing purposes.
<table>
<caption >Coffee menu</caption>
<tr>
<th>Drink type</th><th>Description</th>
</tr>
<span class="row-odd">
<tr>
<td><a href="?_s=sval1_k=kval2">Regular</a></td>
<td>Classic drip</td>
</tr>
</span>
<tr>
<td><a href="?_s=sval3_k=kval4">Latte</a></td>
<td>Coffee and frothy milk</td>
</tr>
<span class="row-odd">
<tr>
<td><a href="?_s=sval5_k=kval6">Espresso</a></td>
<td>Concentrated coffee goodness</td>
</tr>
</span>
</table>
