Keep it simple: Complex tables are more work for content creators as well as being harder to interpret for users. It’s usually better to break up complex tables into simple individual tables, each containing the data for one sub-topic. Multiple simple tables can provide the same information as the mutli-level table but it makes the information easier to understand for everyone and easier to code. Also, simple tables are much better supported by tools to create web content, including WYSIWYG (“What you see is what you get”) editors.
Table separation: If several tables follow one another, don’t use a single table and put in an additional row of <th> cells. Screen readers may read aloud all <th> cells in a column, resulting in confusion. Start a new <table> when the topic changes.
Data separation:
Make sure that each separate piece of data has its cell. Don’t use headers in one column and all data in a second column, as this will make it almost impossible for screen readers to work out the relationships between data across columns.
Don’t use line breaks (<br> elements) to create table rows as the data in the pseudo-rows may no longer align correctly when text is resized.
Alignment: Align text to the left and numeric data to the right (in left-to-right languages), so that people using larger text sizes or smaller screens will be able to find it. This is especially useful if a cell spans more than one column. It’s helpful to give column headers the same alignment as the data in the cells below.
Styling header cells:<th> elements are used for header cells, using <td> elements with different styling will make tables less accessible if not inaccessible. It is also helpful to differentiate <th> and <td> cells visually.
Zebra tables: Styling even and odd rows in a different way can be helpful to people who have reading difficulties or who enlarge text. It acts as a visual guide. Highlighting the cell (and row/column) on mouseover and keyboard focus to support people to see where they are. Make sure that the contrast ratio between the text and background is good for both headers and data cells. The contrast between all text and its background is at least 4.5:1 for normal-size text.
Flexibility: Due to the layout model of tables, they sometimes don’t fit on small screens small or are too wide if the user is zooming in. In such circumstances, it’s important that the table isn’t cut off (for example by using overflow: hidden in CSS).
Tables for Layout: Tables should not be used for layout purposes. Use Cascading Style Sheets (CSS) for layout. If there are already layout tables present, don’t use structural elements (like <th> or <caption>), and do add role="presentation" to the <table> element.
