Tables | Essential Practices for Content Creators
Tables are primarily used to house data. Other than displaying data, tables should be avoided because they are not mobile friendly and they are difficult to make accessible.
Tables should only display data.
- Should only be used to display information, not just as a way to layout text and images.
- Headers can be in a row or column
- Each cell in the header row (or column) must use a <th> tag.
- The <caption> tag identifies the overall topic of the table.
- Visible on page
- Two-step process
- Go to table properties and select “Caption”
- Go to table properties and select “Caption”
-
-
- In Editor window, enter caption above header row
-
- The summary attribute in <table> tag provides navigation hints (usually only for complex tables with multiple rows of headings or headings that span mulitple columns etc)
- It’s not visible on a page
- You must edit HTML source manually, or add after submitting through Content Checker
<table summary=”headers in first row”>
<table summary=”headers in first column”>
Some excellent explanations and examples of simple and complex tables can be found at articles on: how to use tables.
Tables should not be used to format images and text.
Bad:
What’s wrong with this?
In the mobile version of the website(shown below), you can see that the table isn’t mobile friendly and the information in the right column of the table gets cut off.
Mobile View:
Good:
Aligning your image to the left will wrap the text to the right of the image. No need for a table!
Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus.
Mobile View
Additional Resources
- Tables Concepts (W3C) – excellent explanations and examples of simple and complex tables