Sage
Welcome to Sage
Volume (47%) Hide Volume
Topics
Tables
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…

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

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

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

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

[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

Sortable Tables

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…

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:

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

The supported values for each are:

header none, top, left, horizontal, vertical
lines none, top, left, outer, horizontal, vertical, grid
highlight none, top, left, horizontal, vertical, grid

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…

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

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

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:

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

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

[tbl highlight=v header=t lines=o] [//] or [tbl hl=vertical hdr=top lns=outer] [//] or [tbl hl=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] [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

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.


Last Modified: 10/24 9:45:52 am
In this article (top)  View article's Sage markup
10/24 9:45:52 am