To main heading

Smallsite Design

Online editing help

8. Table element

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:

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.

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 Heading options are:
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--

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.

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 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, 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 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 are short
eNumberBiased to align numbers according to the locale, but not to the decimal mark. If wanting decimal alignment, ensure each value in the column has the same number of decimal places
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 by maximising the column width. 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. 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 alignment to maintain a manageable column width 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, especially if there will always be at least one cell that has wrapping text that forces the table to be full width anyway.

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. 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 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 non-side-heading 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.

The optional footer contains summary information.

There is only ever one footer. 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.

Linking to figures

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 for all but the very simplest tables because it provides easy visual referencing of rows as well as easier navigation for keyboard users.

  • Inline element
  • Diagram element
  • Sequence element
  • Contact   Glossary   Policies
  • Categories   Feed   Site map

  • External sites open in a new tab or window. Visit them at your own risk.
    This site doesn't store cookies or other files on your device, but external sites might.
    Help   Powered by: Smallsite Design©Patanjali Sokaris