The [tbl] tag organizes content into tables,
consisting of rows and columns.
Basic Tables
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…
The header
First row
Second row
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…
N
N2
2N
0
0
1
1
1
2
2
4
4
3
9
8
4
16
16
5
25
32
Built In Table Styles
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…
[tblgrid][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
Another style option is list…
[tbllist][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
Lastly, there is alt…
[tblalt][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
Sortable Tables
The sortable attribute on the [tbl] tag
indicates the columns will be sortable…
[tblgrid 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…
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
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.
Table Style Attributes
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:
[tblheader=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…
N
N2
2N
0
0
1
1
1
2
2
4
4
3
9
8
4
16
16
5
25
32
The [tbl] tag above could be abbreviated to
any of the following (among others)…
[tblhdr=left hdr=top][//] or[tblheader=l header=t][//] or[tblhdr=l hdr=t]
Here's an example using the lines attribute:
[tbllines=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…
N
N2
2N
0
0
1
1
1
2
2
4
4
3
9
8
4
16
16
5
25
32
Here's an example combining all three attributes:
[tblhighlight=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…
N
N2
2N
0
0
1
1
1
2
2
4
4
3
9
8
4
16
16
5
25
32
The [tbl] tag above could be abbreviated to
any of the following (among others)…
[tblhighlight=v header=t lines=o][//] or[tblhl=vertical hdr=top lns=outer][//] or[tblhl=v hdr=t lns=o]
Custom Table Style Classes
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][tblclass=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
Future Enhancements to Come
In the future, Sage will offer more options for
customizing tables.
Advanced
Until Sage offers more options for customizing tables,
you might consider using the [html] tag,
as a temporary measure.