Layout Tables
Tables are for data. Do 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.For For more information, see [link to Accessible Email document]
Updating legacy webpages.
If a table needs to be used for layout, ensure the table semantics are removed:
Add role=”presentation” to the table element.
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.
Keep the <tbody>, <tr>, and <td> elements.
Use the simplest table configuration possible.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<table role="presentation"> |
...
<!-- 1. ADD role="presentation" --> <!-- 2. DELETE headers and summary information ... <caption>...</caption> |
...
<thead>
<tr>
...
<thead> <tr> <th scope="col">...</th> |
...
<th scope="col">...</th> |
...
... |
...
</tr> |
...
</thead> |
...
<tbody>
<tr>
...
... --> <tbody> <!-- 3. KEEP <tbody>, <tr>, and <td> --> <tr> <td>...</td> |
...
<td>...</td> |
...
</tr> |
...
</tbody> |
...
</table> |