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. 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.
<table role="presentation"> <caption>...</caption> <thead> <tr> <th scope="col">...</th> <th scope="col">...</th> ... </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table> |