Tables are a way of arranging data in rows and columns to make it easier for people to reference. You can also use them to organize content so people can compare attributes to make a decision.
This page has guidance for teams designing and using tables on:
- Yukon.ca and
- other Government of Yukon websites and services.
Before you design a table
- Tables are best used to present data and not always the best way to present information online. There is usually a better option. For example, you could present:
- a table with 2 columns and 3 rows as a single, bulleted list;
- a table with more columns and rows as a series of bulleted lists with headings and sub-headings;
- a complex table or dataset using a more accessible option.
Create usable, accessible tables
Tables must follow this guidance to ensure they are usable, accessible and consistent.
Focus on the people who will use the table
Think about the people who will use the table.
- What keywords will they use?
- What attributes will help them complete their task?
- Are they likely to be using a mobile device or desktop?
- Are they comparing information to make a decision?
Understanding their needs, will help you design a table that will help them with their task. In cases where you might use a table on a form, this will also help you collect the information you need.
Table structure and layout
Use a standard table layout.
- Set cell spacing and cell padding at 2 pixels.
- Set the border size to 1 pixel to create a frame.
- Left align the table.
- For columns:
- Label column headers in bold and use sentence case. This helps people using assistive technology understand the table structure.
- Use sticky column headers and stick the left column in place. This helps people because they don’t have to hold information in their memory or scroll back and forth.
- Make columns large enough that people can make out the words without zooming in;
- Make sure you can see the entire table on mobile devices. Don’t assume people will rotate the screen to see more columns. If they know to flip the screen they might see more columns, but they will see fewer rows.
- Include horizontal scrolling for tables that do not fit on a mobile screen in portrait view.
- include a visual cue so people understand they can scroll past the horizontal field. This can be a scroll bar, an arrow or you can cut off words to indicate there is more to see.
- Make it easier for people to distinguish one row or column from another:
- use a brand colour to shade columns or rows; or
- use borders or extra spacing. Remember to test to make sure the contrast meets accessibility standards.
Add automation
For tables where people need to input data, complete calculations. For example, include totals or differences at the end of columns or rows. This is especially helpful when people have to enter budget information.
Include attributes to help people complete their task
When you are planning out what to include in your table, focus on the attributes that will help the end user. For example, a person who is looking for funding would care about:
- intake and submission deadlines;
- eligibility;
- what they can use the funding for, etc.
Give people ways to choose what they see
Where possible, give people options to:
- manipulate the table;
- display or hide attributes; or
- refine the information.
Allow people to:
- expand or collapse parts of the table. This is especially helpful for people on mobile devices. They can see an overview of the information and then go straight to the parts that interest them.
- compare eligibility requirements for 2 funds.
- display only the funds that apply to their criteria. For example, funding for musicians.
For mobile, it's important to give people some level of comparison functionality.
Make your table easy to view
When you write your content for your table, you must follow the writing for the web rules and style guide. There are some exceptions when it tables.
- Keep text short. If you need to add definitions for terms people do not know, you can link to another page.
- Avoid full sentences.
- Use abbreviations for names of the month. For example: Jan, Feb.
- Use an en dash to show a span between numbers. For example 500–900.
- Use numerals and not ordinals like first, second, 10th.
- Round large numbers with decimals if you do not need to present exact numbers. For example: $14,646,000 = $14.6 million.