Tables

Tables are for tabular data ~ things with rows and columns, like a schedule or a price list. That’s it. People used to build entire page layouts out of tables, and we don’t do that any more. Use CSS Grid for layout and tables for data.

The parts

• <table> wraps the whole thing.
• <caption> names it, and must come first.
• <thead>, <tbody> and <tfoot> group the header rows, the data rows and the summary rows.
• <tr> is a row.
• <th> is a header cell, <td> is a data cell.

Header cells matter

<th> isn’t just “bold and centred”. It tells a screen reader that this cell labels the rest of its row or column, so someone listening to the table can keep track of what they’re hearing. Use it for the top row, and for the first cell of each row when that cell is the row’s name.

Styling

Tables come with strange defaults, and the one that catches everyone is doubled borders. border-collapse: collapse fixes it. Uncomment the CSS at the bottom to see a reasonable starting point.