Tables

Tables are a pattern for organizing and displaying content. If your web content requires a table, you should use a structured and semantic table.

Structured and semantic data tables use proper HTML or equal mark up to show relationships between the content in the cells.

Types of Tables

Data tables take large amounts of information and compile it into cells. These cells form rows and columns so users can compare data points. Layout tables use structural markup for presentation purposes.

Data Table

Data tables on your website should be presented in a structured and semantic manner.

We build tables with two cell types: header cells and data cells. The relationship between these two cell types should be intentional. The content in the data cell needs the row or column header cell(s) to fully understand the information.

Assistive technologies, like screen readers, must recognize the relationships between header and data cells.

See also: Table Pattern,  Table Accessibility

Layout Table

Tables used for layout are bad practice because they use structural (or semantic) table markup for presentational purposes. These types of tables were once used for designing webpages. HTML and CSS have evolved to a point where layout tables are not necessary and will break a page.

Email templates may still use a layout table format.

If a layout table is used, the cell type should not be conveyed to screen readers because it can be confusing and distracting.