Tables
The [tbl] tag organizes content into tables,
consisting of rows and columns.
To make a table, start with a [tbl] tag,
and a matching [end] tag…
[tbl]
[//] rows will go here
[end]
Between these tags, define one or more rows, using the
[row] or [hdr] tags…
[tbl]
[hdr] The header
[row] First row
[row] Second row
[end]
The above example produces…
Above, each row can consist of any number of cells,
each separated by a [,] tag…
[tbl]
[hdr] N [,] N[^]2[end] [,] 2[^]N[end]
[row] 0 [,] 0 [,] 1
[row] 1 [,] 1 [,] 2
[row] 2 [,] 4 [,] 4
[row] 3 [,] 9 [,] 8
[row] 4 [,] 16 [,] 16
[row] 5 [,] 25 [,] 32
[end]
The above example produces…
The header |
---|
First row |
Second row |
N | N2 | 2N |
---|---|---|
0 | 0 | 1 |
1 | 1 | 2 |
2 | 4 | 4 |
3 | 9 | 8 |
4 | 16 | 16 |
5 | 25 | 32 |
As the above examples show, tables are rather
simple by default.
However, you can specify a table style in the
[tbl] tag.
For example, let's use the grid style…
[tbl grid]
[hdr] N [,] N[^]2[end] [,] 2[^]N[end]
[row] 0 [,] 0 [,] 1
[row] 1 [,] 1 [,] 2
[row] 2 [,] 4 [,] 4
[row] 3 [,] 9 [,] 8
[row] 4 [,] 16 [,] 16
[row] 5 [,] 25 [,] 32
[end]
The above example produces…
Another style option is list…
[tbl list]
[hdr] N [,] N[^]2[end] [,] 2[^]N[end]
[row] 0 [,] 0 [,] 1
[row] 1 [,] 1 [,] 2
[row] 2 [,] 4 [,] 4
[row] 3 [,] 9 [,] 8
[row] 4 [,] 16 [,] 16
[row] 5 [,] 25 [,] 32
[end]
The above example produces…
Lastly, there is alt…
[tbl alt]
[hdr] N [,] N[^]2[end] [,] 2[^]N[end]
[row] 0 [,] 0 [,] 1
[row] 1 [,] 1 [,] 2
[row] 2 [,] 4 [,] 4
[row] 3 [,] 9 [,] 8
[row] 4 [,] 16 [,] 16
[row] 5 [,] 25 [,] 32
[end]
The above example produces…
N | N2 | 2N |
---|---|---|
0 | 0 | 1 |
1 | 1 | 2 |
2 | 4 | 4 |
3 | 9 | 8 |
4 | 16 | 16 |
5 | 25 | 32 |
N | N2 | 2N |
---|---|---|
0 | 0 | 1 |
1 | 1 | 2 |
2 | 4 | 4 |
3 | 9 | 8 |
4 | 16 | 16 |
5 | 25 | 32 |
N | N2 | 2N |
---|---|---|
0 | 0 | 1 |
1 | 1 | 2 |
2 | 4 | 4 |
3 | 9 | 8 |
4 | 16 | 16 |
5 | 25 | 32 |
The sortable attribute on the [tbl] tag
indicates the columns will be sortable…
[tbl grid sortable]
[hdr] Item # [,] Name [,] Price [,] Date [,] Vendor
[row] 334 [,] Apple [,] 300 [,] 2000-2-7 [,] USA Produce
[row] 333 [,] Cherry [,] 200 [,] 2001-1-5 [,] Quick Foods
[row] 335 [,] Banana [,] 200 [,] 2000-11-2 [,] USA Produce
[row] 337 [,] Fig [,] 300 [,] 2000-4-9 [,] USA Produce
[row] 336 [,] Date [,] 100 [,] 2000-1-1 [,] Quick Foods
[row] 338 [,] Eggplant [,] 100 [,] 2000-3-4 [,] Quick Foods
[row] 339 [,] Grape [,] 400 [,] 2000-9-9 [,] Snacks'R'Us
[end]
The above example produces…
Click once on the up/down arrow icons
to sort ascending;
click again to sort descending;
click a third time to remove the sorting.
Sage will display an upwards pointing
triangle for columns that are sorted ascending,
a downward pointing triangle for descending,
and a pair of triangles for unsorted.
If you've already sorted on a column,
⇧ Shift+Left-Click on another column
to perform a secondary sort.
⇧ Shift+Left-Click again
to cycle a column between ascending,
descending, and unsorted.
When sorting on multiple columns,
Sage will display a number next to
the triangle icon, to indicate the
column ordering.
You can try it out now, on the grid above.
Item # | Name | Price | Date | Vendor |
---|---|---|---|---|
334 | Apple | 300 | 2000-2-7 | USA Produce |
333 | Cherry | 200 | 2001-1-5 | Quick Foods |
335 | Banana | 200 | 2000-11-2 | USA Produce |
337 | Fig | 300 | 2000-4-9 | USA Produce |
336 | Date | 100 | 2000-1-1 | Quick Foods |
338 | Eggplant | 100 | 2000-3-4 | Quick Foods |
339 | Grape | 400 | 2000-9-9 | Snacks'R'Us |
Various aspects of the table styling can be controlled
separately using the following attributes:
Each of these values may be abbreviated using their first letter.
Here's an example using the header attribute:
[tbl header=left header=top]
[hdr] N [,] N[^]2[end] [,] 2[^]N[end]
[row] 0 [,] 0 [,] 1
[row] 1 [,] 1 [,] 2
[row] 2 [,] 4 [,] 4
[row] 3 [,] 9 [,] 8
[row] 4 [,] 16 [,] 16
[row] 5 [,] 25 [,] 32
[end]
The above example produces…
The [tbl] tag above could be abbreviated to
any of the following (among others)…
[tbl hdr=left hdr=top]
[//] or
[tbl header=l header=t]
[//] or
[tbl hdr=l hdr=t]
Here's an example using the lines attribute:
[tbl lines=top lines=vertical]
[hdr] N [,] N[^]2[end] [,] 2[^]N[end]
[row] 0 [,] 0 [,] 1
[row] 1 [,] 1 [,] 2
[row] 2 [,] 4 [,] 4
[row] 3 [,] 9 [,] 8
[row] 4 [,] 16 [,] 16
[row] 5 [,] 25 [,] 32
[end]
The above example produces…
Here's an example combining all three attributes:
[tbl highlight=vertical header=top lines=outer]
[hdr] N [,] N[^]2[end] [,] 2[^]N[end]
[row] 0 [,] 0 [,] 1
[row] 1 [,] 1 [,] 2
[row] 2 [,] 4 [,] 4
[row] 3 [,] 9 [,] 8
[row] 4 [,] 16 [,] 16
[row] 5 [,] 25 [,] 32
[end]
The above example produces…
The [tbl] tag above could be abbreviated to
any of the following (among others)…
[tbl highlight=v header=t lines=o]
[//] or
[tbl hl=vertical hdr=top lns=outer]
[//] or
[tbl hl=v hdr=t lns=o]
- header, which may be abbreviated hdr
- lines, which may be abbreviated lns
- highlight, which may be abbreviated hl
header | none, top, left, horizontal, vertical |
lines | none, top, left, outer, horizontal, vertical, grid |
highlight | none, top, left, horizontal, vertical, grid |
N | N2 | 2N |
---|---|---|
0 | 0 | 1 |
1 | 1 | 2 |
2 | 4 | 4 |
3 | 9 | 8 |
4 | 16 | 16 |
5 | 25 | 32 |
N | N2 | 2N |
---|---|---|
0 | 0 | 1 |
1 | 1 | 2 |
2 | 4 | 4 |
3 | 9 | 8 |
4 | 16 | 16 |
5 | 25 | 32 |
N | N2 | 2N |
---|---|---|
0 | 0 | 1 |
1 | 1 | 2 |
2 | 4 | 4 |
3 | 9 | 8 |
4 | 16 | 16 |
5 | 25 | 32 |
You can also specify a CSS style class for a table…
[html]
<style>
table.tbl_fancy { width: 100%; }
table.tbl_fancy tr:hover { background-color: coral; }
</style>
[end]
[tbl class=tbl_fancy]
[hdr] N [,] N[^]2[end] [,] 2[^]N[end]
[row] 0 [,] 0 [,] 1
[row] 1 [,] 1 [,] 2
[row] 2 [,] 4 [,] 4
[row] 3 [,] 9 [,] 8
[row] 4 [,] 16 [,] 16
[row] 5 [,] 25 [,] 32
[end]
The above example produces
(hover over the rows to see the effect)…
N | N2 | 2N |
---|---|---|
0 | 0 | 1 |
1 | 1 | 2 |
2 | 4 | 4 |
3 | 9 | 8 |
4 | 16 | 16 |
5 | 25 | 32 |
⏱ Last Modified: 1/6 11:08:10 am