Tables for Layout

Tables should not be used for layout purposes. Use Cascading Style Sheets (CSS) for layout, in most programs and in our webpage content managment system there are many layout options that do not use tables.

If there are already layout tables present you should change the layout to an alternative using headers or lists. If you absolutely must keep tables you will need to know some HTML code: don’t use structural elements (like table header <th> or caption <caption> elements) and attributes discussed in this tutorial, and do add role=”presentation” to the table <table> element.

Tables Tips and Tricks from w3.org

  • 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.

  • Table separation: If several tables follow one another, don’t use a single table and put in an additional row of table header <th> cells. Screen readers may read aloud all table header <th> cells in a column, resulting in confusion. Start a new table tag <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.

      On the left, a table with two columns is shown. The header for the first column reads “Shirt” and the header for the second column reads “Sizes and amount in stock”. The second row reads “Blue” in the first column and “S: 6; M: 13, XL: 10”. In the second row, Sizes for a “Red” shirt are “M: 2; L: 9; XL: 10; XXL: 1”. On the right, the table is split up in “Shirt”, “Size” and “Stock” 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.

      On the top there is a table where the content and header cells are not marked up correctly. Line breaks are used to make items look like they align correctly. When resizing the text (bottom) the items don’t line up anymore

  • 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: Table header <th> elements are used for header cells, using tabular data <td> elements with different styling will make tables less accessible if not inaccessible. It is also helpful to differentiate table header <th> and tabular data <td> cells visually. For example, on these tutorial pages, header cells have a dark gray background.

  • 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. Here is how to check the contrast ratio.

  • 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 Cascading Style Sheets CSS). In these tutorials overflow: scroll is applied to an element wrapping the table so users can scroll through the table horizontally but there are much more options to display table in such circumstances.

Status: Updated 23 April 2017 (first published September 2014). Editors: Eric EggertShadi Abou-Zahra. Contributors: Anna Belle Leiserson. the Web Content Accessibility Guidelines Working Group (WCAG WG), the Education and Outreach Working Group (EOWG). Developed with support from the WAI-ACT project, co-funded by the European Commission IST Programme. [Attributions] [Changelog]. Copyright © 2014 W3C ® (MITERCIMKeioBeihangUsage policies apply.