Layout table uses data-table structural markup

Link to Layout table uses data-table structural markup copied to clipboard


Rule ID:
User Impact:


Layout tables must not contain data-table markup.


The <table> element is intended to be used to present tabular data, but because it automatically arranges its contents into a grid, developers are sometimes tempted to use it to create a "quick-and-dirty" layout grid for content that is not actually tabular data.

If you do choose to use a table for layout purposes, you must take care to override the inherent semantics of the table or else assistive technologies will treat the layout grid as a data table, which creates an extremely confusing user experience.


Using a <table> element to create a layout grid is an antiquated practice that can easily lead to reading-order issues. It should be avoided unless you have a good reason to do it. Instead, use CSS to create layout grids with more flexibility with fewer potential downsides.

How to Fix

Do all of the following:

  • Convert all <th> elements to <td>s
  • Remove "scope" and "headers" attributes from all table children
  • Remove the <caption> element
  • Remove the "summary" attribute from the <table> element (deprecated anyway)
<table role="presentation">
      <td>Section 1 Title</td>
      <td>Section 1 content ...</td>
      <td>Section 2 Title</td>
      <td>Section 2 content ...</td>

Additional Resources