Tables Notes

Table Structure: table, tr, th and td

A table is for two dimensional data, never for layout. Learn the four core elements, the difference between th and td, and the test that tells you whe...

HTML

Table Sections: caption, thead, tbody, tfoot and colgroup

Row groups give a table a header, a body and a summary. They are what make long tables printable, scrollable and understandable.

HTML

Spanning Cells with colspan and rowspan

One cell covering several columns or rows. Simple to write, easy to get wrong, and the arithmetic has to balance or the whole grid tears.

HTML

Accessible Tables: scope, headers and id

A table a screen reader can read is a table with named headers. scope handles simple tables, headers and id handle the hard ones.

HTML

Responsive Tables on Small Screens

A table with eight columns cannot fit on a phone. Four patterns that keep the data usable, and the trade off each one makes.