Layout Tables

Prior to the addition of the flex box model being added to CSS, using tables to create layout was the best way to achieve multi-column layouts of pages. While this technique is no longer recommended, you may encounter tables used for layout on older projects that are being remediated.

However, the <table> element and many of the other table related elements carry semantic meaning that should not be conveyed when using tables for layout. Without treating the table properly, assistive technology users may become confused as to the purpose of the content.

• Add role="presentation" to the table element.
• Remove all elements besides table, tr, and td.

A sample layout table then could end up looking like this:

<table role="presentation">
  <tr>
    <td>First Column of Content</td>
    <td>Second Column of Content</td>
  </tr>
</table>