Tables
Tables are only for tabular data. Given how they can often force users to scroll horizontally on webpages across video screen sizes, more complex tables should be in spreadsheet documents where they can be more easily navigated or reorganized into simple tables.
Where word processor functionality is possible (e.g., rich text or WYSIWYG editor), you should use lists (ordered/numeric or unordered/bulleted) for simple lists of ideas and tables for tabular data.
Proper Semantic Usage
- Use a table header, not a heading (Heading 1 - 6), to identify the contents in the column or row.
- Do not use bold (the
strong
HTML tag) to create table headers. The table cell should be defined in its properties as aheader
instead of asdata
. - Define the scope of a table header to its column or row to assist screen readers in identifying table cell locations.
- Where word processor functionality is possible, never use spacing to format any alignment issues or special characters (e.g., *, !, -, +, #, ^) to lay out content.
- Where word processor functionality is possible, never use special characters (e.g., *, !, -, +, #, ^) to emphasize the importance of something.