9  Table element

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

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

Table                Content ┣━ Introduction ┃   └─ Text         A sample table with top and side headings, two rows and … ┣━ Header ┃   ├─ Heading      Year ┃   ├─ Heading      Rate % ┃   └─ Heading      Comments ┣━ Row ┃   ├─ Label        2020 ┃   ├─ Cell         15.6 ┃   └─ Cell         Covid-19 in full swing without vaccines available ┣━ Row ┃   ├─ Label        2021 ┃   ├─ Cell         9.8 ┃   └─ Cell         More virulent strains but vaccines kept it under control ┗━ Footer     ├─ 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.

Changing the header location will alter what happens to the header cells. For example, changing from Both or Top to Side will delete the content of the top headings and they will not be visible when rendered, but will still show while editing. Changing from Both or Side to Top will delete the side heading column cells altogether.

For numbering options other than None, clicking on any row's numbering column will jump to the first letter of its introduction. 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 will link to the introduction's first letter 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 visible 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. Columns can be added within the header or headings, and when appended or inserted, an empty cell is inserted in the same position in each row below it. Changing the order of the headings does the same for the cells below them. Deleting a heading deletes the rest of the column. The exception is the side heading column which is controlled by the table's Heading attribute, and will only appear at the starting side after any numbering column.

The Fit attribute specifies whether the contents are shown on one line, though @^ in labels or break elements in cells can break the lines where required. Not recommended for columns that are too wide, or where an Alignment of Wide is used.

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. The automatic hyphenation may help here, but not all browsers support that or for all languages, so embedding a soft hyphen may be needed.

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 breaks in conjunction with the Fix attribute will help keep widths manageable. In such situations, it may be better to not use Wide but turn on Full width for the table, which will tend to spread out the columns, depending upon how much content they have.

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 do not use Wide and let the browser work out the right balance of wrapping between those columns, especially if there will always be at least one cell that has wrapping text that forces the table to be full width anyway, or use the table's Full width attribute.

Table introductions will wrap around at the table width, so if using long introductions with a narrower table, to avoid excessive wrap-around, turn on the table's Full width attribute or 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. This wrapping is because if not limited to the table width, unlike a figure introduction, a long table introduction will force the table to appear below an aside rather than beside it, if it would fit otherwise. It is an inadvertent HTML design limitation.

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

There can be up to 19 rows, and their cells are rich text elements, except a side heading column has only plain text labels. The side heading label is like a heading and must have text. Cells have the page background and at least one must have text.

Cells can have an image that will be shown as a thumbnail, but which expands when clicked on or tabbed to. However, there must still be another cell that has text. Cells can be left blank, and will show an en-dash (–) if empty. To put text into a cell, an inline element must be appended first. Sometimes it may be quicker to Clone a row and edit it as required than create it from scratch.

The optional footer contains summary information.

There is only ever one footer, and it contains only Labels. If it has a side heading label, it is formatted like headings. The other labels have the page background like a row, but its labels are bolded so that they are distinguishable from the rows above them, and at least one of them has to have text in it.

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

See Linking to figures in Media element for details.

Some limits are placed upon how large tables can be to keep them presentable.

Theoretically, tables in pages can be embedded within a table cell to any depth. However, one of the limitations of tables is that a cell's minimum width is defined by the longest word in its content. If there are too many columns, too many cells with long words, or an embedded table, the table will likely overflow past the ending boundary of the page, especially if viewed on a phone in portrait mode.

This can be mitigated for embedded tables by very careful design for particular types of information, and educating users, such as the recommendation to use a larger device like a tablet when managing and editing a Smallsite Design site. However, for general visitors, such information density is likely to overwhelm all but the most dedicated spreadsheet users. This is why in Smallsite Design, tables cannot be embedded nor allow more than six columns, excluding any numbering column.

If table content starts to look too complex, it should be broken out into multiple tables or other elements like lists to show different parts of the information. This process may also help with eliminating repeated information in the same way normalisation does for databases by breaking a large monolithic record structure into less complex records.

For example, if one column contains unique values, the table could be broken into two tables, each starting with that column, but the remaining columns are split between them. Alternately, if some cells contain complex information, that content can be in another table, or a list or paragraph, especially if the same information is appearing in multiple rows. Up to two footnotes can be used in a cell to extract explanatory information that may not be useful to most visitors.

There must be at lease one row, and up to 19 maximum. The latter is to limit the width of the numbering column, which is recommended to have for all but the very shortest tables because it provides easy visual referencing of rows as well as easier navigation for keyboard users.