When and how to use use tables

Date adopted: 
August 7, 2019
Last update: 
August 26, 2020

Avoid tables if you can because it's hard to make them accessible. Screen readers have trouble reading them. If you decide you need to use a table, only use it to present data.

Do not use tables for cosmetic changes to a layout, for example, to present a list because you think it looks better that way.

Consider the alternatives

A table may not always be the best way to present your content. A simple table can often be replaced with:

  • a single bulleted list, using semi-colons or periods to separate the information; or
  • a series of bulleted lists with headings and subheadings.

Make your table easy to read and accessible

Use headers

Include a header row explaining the content of the columns. Headers appear in bold and help people who use assistive technology to understand the table’s structure. Headers should not be in all capital letters.

Help the user

Complete calculations, for example, include totals or differences at the end of columns or rows.

Make your table easier to read

  • Use more rows than columns.
  • Set cell spacing and cell padding at 2 pixels.
  • Set the border size at 1 pixel to create a frame.
  • Align the table left.
  • Include a caption.
  • Never include images.

Put popular information first

Put the information that most people are looking for at the top or in the first few columns.

Style

Keep text in cells concise and clear, and follow the Style Guide. You can depart from government style only to:

  • truncate the names of months to save room, for example, Jan, Feb;
  • use an en dash to show a span between numbers, for example, 500–900; and
  • use numerals throughout (do not use ordinals, for example, first, second, 10th).

If you do not need to use exact numbers, consider rounding large numbers with decimal places, for example., $14,646,000 = $14.6 million.

Size

The minimum size for a table is 2 columns and 3 rows (including a column header) but if your table is this small it may be better as normal text.

The maximum size is 4 columns.

Tables with 4 columns can be comfortably displayed on a smartphone screen, depending on how much text you have in the table cells.

If you’re dealing with a huge amount of data that cannot be split, it might be better presented as a CSV (spreadsheet). Email eservices@gov.yk.ca to learn more.