Table Anti-Patterns

Layout Tables

Tables are for data. Do not use tables for layout or styling. This is the purpose of CSS. However, there are some areas with exceptions:

• Email encoded in HTML need to use tables for layout because of different email client behaviour.

• Updating legacy webpages.

If a table needs to be used for layout, ensure the table semantics are removed:

1. Add role=”presentation” to the table element.

2. Remove table elements that provide headers and summary information such as <caption>, <thead>, <tfoot>, <th> and attributes such as aria-describedby, aria-labelledby, aria-label, title.

3. Keep the <tbody>, <tr>, and <td> elements.

4. Use the simplest table configuration possible.

<table role="presentation">  <!-- 1. ADD role="presentation" -->
	<!-- 2. DELETE headers and summary information ...
    <caption>...</caption>
    <thead>
        <tr>
            <th scope="col">...</th>
            <th scope="col">...</th>
            ...
        </tr>
    </thead>
	... -->
	
    <tbody>  <!-- 3. KEEP <tbody>, <tr>, and <td> --> 
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>