Skip to main content

Smallsite Design

Online editing help

Element: Table

Tables are excellent for presenting structured information, but that capability makes them more involved to set up.

Table structure

Tables are a two-dimensional array of cells, but are constructed as rows of cells.

A sample table with top and side headings, two rows and a footer is:
#YearRate %Comments
1202015.6Covid-19 in full swing without vaccines available
220219.8More virulent strains but vaccines kept it under control
Mean12.7Will be long-term effects

The column alignments are Centre for Year, Number for Rate % and Wide for Comments.

The structure of this table, with the contents of each cell, is:

┣━ Header
┃ └─ Row
┃ ├─ Label Year
┃ ├─ Label Rate %
┃ └─ Label Comments
┣━ Body
┃ ├─ Row 1
┃ │ ├─ Label 2020
┃ │ ├─ Cell 15.6
┃ │ └─ Cell Covid-19 in full swing without vaccines available
┃ └─ Row 2
┃ ├─ Label 2021
┃ ├─ Cell 9.8
┃ └─ Cell More virulent strains but vaccines kept it under control
┗━ Footer
└─ Row
├─ Label Mean
├─ Label 12.7
└─ Label Will be long-term effects

Labels are plain text, while cells are rich text, meaning they can contain formatting. Technically, labels are cells, but in Smallsite Design are called Labels to highlight their functional and visual differences. Labels in headers and the first column of body rows are shown bolded and with a highlighted background, whereas cells are displayed as per the page colour and background. Footer labels use the page background but are bolded to visually distinguish them from body rows.

The two attributes that can be applied to Tables are:

  1. a.Heading – where headings appear in the table.
  2. b.Numbering – whether there is a number column and what form they take.
The Heading options are:
#OptionDescriptionResult of changing to
aTopLabels are shown for column headingsAny previous side labels and their contents are deleted
bSideLabels are shown for row headingsAny previous top labels and their contents are hidden
cBothLabels are shown as column and row headings--
The Numbering options are:
1NoneNo number column is shown
2AlphabeticNumber column is shown with letter of the alphabet. For when order is not important, but each row has an identifier for reference
3AscendingNumber column is shown with numerals starting with 1 at the top. For where order is important
4DescendingNumber column is shown with numerals starting with 1 at the bottom. Typically for when the number indicates the order of creation or release, but the latest needs to be at the top

For numbering options other than None, clicking on any row's numbering column will jump to the # cell of the heading row if there is one, or the section or top of the page, whichever is nearest. However, if the table's Prefix field is the same as that for a figure, the numbering links to the labels of the figure. If there are less labels than there are table rows, those not matching a label link to the top cell, section or page as normal.

Tables are automatically laid out according to the layout direction of the current locale, hence the use of Start and End to specify alignment in a locale-independent way. However, Left and Right are also provided to force those alignments, regardless of locale.

The header row holds the column headings, though not all tables require headings on top.


Headings label the columns, but also define the alignment of the cells below it and how they wrap text, even if headings at the top are not used.

When a column is inserted, an empty cell is inserted in the same position in each row below it. Similarly, deletion or movement of a header label creates the same action in the other cells of the column.

The Alignment options available for a heading are:
aStartBiased towards the start of the cell
bCentreCentred in the cell. Use only if all values are short and of similar size
cEndBiased towards the end of the cell
dFitBiased towards the start of the cell, but forces the content to be on one line. Use only if values short
eNumberBiased to align numbers according to the locale, but not decimally
fLeftBiased towards the left of the cell
gRightBiased towards the right of the cell
hWideForce the table to occupy 100% of the width of the page. Only available for one column

Tables are tricky because each column will only shrink to its longest content word, and if there are too many columns, the table may be forced to overflow beyond the page border. Therefore, if wanting several columns, make sure the longest word in any of them is short, or use Soft hyphens to make long words wrap when necessary.

Wide forces the table to expand to the page width, which can be aesthetically more pleasing for a fairly empty table than having a wide space beside the table. However, it also forces every other column to maximally wrap, so using Fix alignment for those other cells will help. Using Wide for highly variable-length content like descriptions in the last column is best, but only if it is the only such column, otherwise don't use Wide and let the browser work out the right balance of wrapping between those columns.

Table introductions will wrap around at the table width, so if using long introductions with a narrower table, to avoid excessive wrap-around, set Wide for one of the columns to make the table and introduction fill the space with the minimum height. Otherwise, make the introduction more concise.

For Cells, as distinct from Labels, use the Soft hyphen to force breaks within words at suitable syllables, and Breaks in conjunction with the Fix alignment to maintain a manageable column width when using Wide on another column.


Each row contains the actual information that the table is meant to provide.


Cells in Smallsite Design can contain formatting or links.

The optional footer contains summary information.

A label is plain text that appears bold in a footer so that it is distinguishable from the content in the rows. Labels will also be used for the side headings if the table has them.

Linking to figures

A table can be linked to a figure to provide descriptions and other information for its labels.

A Table and a Figure that share the same Prefix field are linked, as long as there are Labels defined for the Figure and the table has Both for its Heading and Alphabetically for its Numbering. The numbers of Labels and body rows don't have to be the same, though it would be odd to have labels without corresponding table rows. Once linked, clicking on the label letter will jump to the corresponding number column cell, and vice-versa.

Some recommendations are:

  1. a.Make the side heading column heading be a key word in the introduction to the figure. For example, if the heading is Area, a suitable introduction is The principal areas of the screen are:
  2. b.The same introduction can be used for the table, but if it is immediately after the figure, a simple where: will suffice. Note the lack of capitalisation so that it is taken as a flow-on.

This linking allows a figure to be in an Aside while the table can be in the body of the articles. That does imply that the figure is not important for article continuity which is the normal implication of aside contents, so a properly worded table introduction should still be able to be understood if the figure is ignored.

Manage         Help   Powered by: Smallsite Design©Patanjali Sokaris         art-a  3  0  2021-12-27-10-27-07