Table guidelines
Use these guidelines to create tables on your web pages.
Tables are only used to display data that belongs naturally in a grid.
The easiest way to know if you should use a table is if it makes sense to track the data in a spreadsheet.
Example
Example of table with header row:
| Table A | Table B |
|---|---|
| Example text | Example text |
| Example text | Example text |
| Example text | Example text |
Example of table with header row and column:
| Title | Classroom 1 | Classroom 2 |
|---|---|---|
| Likes blue | 25% | 75% |
| Like yellow | 50% | 35% |
| Like red | 40% | 80% |
Example of table border (style):
| Table A | Table B |
|---|---|
| Example text | Example text |
| Example text | Example text |
| Example text | Example text |
Example of banded columns (style):
| Table A | Table B |
|---|---|
| Example text | Example text |
| Example text | Example text |
| Example text | Example text |
Where you can use them
How to use them
Do
- Have headings for each column or row or both.
- Keep the table content concise.
Don't
- Use tables for layout or design.
- Put images in tables.
- Use multiple header levels.
- Merge cells.
Guidelines
- Tables are used for data, never design.
- Consider more accessible ways to format content before using a table, such as lists.
Accessibility
- You must select a row heading, column heading or both.
- Do not leave any cells blank.
- Do not split or merge cells.
- Your must give your table a heading, formatted in the appropriate headings style (e.g. h2, h3, or h4).
- You must write a summary.
How-to guides
Learn how to add a table on your page using our guides:
