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…

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…

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.

Various aspects of the table styling can be controlled separately using the following attributes:

• header, which may be abbreviated hdr
• lines, which may be abbreviated lns
• highlight, which may be abbreviated hl

The supported values for each are:

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]

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)…

In the future, Sage will offer more options for customizing tables.