Additional tips and tricks

  • Break up complex tables into simple separate tables, each containing data for one sub-topic.
  • Start a new <table> when the topic changes.
  • Separate each piece of data into its own cell.
  • Don’t use line breaks (<br> elements) to create table rows.
  • Align text to the left and numeric data to the right.
  • Differentiate header <th> and data <td> cells visually.
  • Style even and odd rows in a different way to improve readability.
  • Ensure table isn’t cut off (e.g., do not use overflow: hidden in CSS).
  • Avoid using tables for layout. Use CSS for layout instead.
  • Avoid having blank cells. Assistive technology will notify the user if the cell is blank, but won't explain why. Explain blank cells in the table's caption, summary or surrounding content. You may also write one of the following in the cell, so long as it's clear and does not create distracting visual noise:
    • "no data"
    • "0" (zero)
    • "n/a" (not applicable)
Back to top