Tables Notes

Project: An Admin Dashboard Layout

Data tables, a persistent sidebar, status indicators and a dialog. The interface where dense information has to stay navigable.

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.

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

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

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

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...