HTML // Data

TABLES &
DATASETS

Tables are for tabular data—financial reports, schedules, and analytics. They are powerful tools for density and comparison, but must be structured carefully to remain accessible.

The Golden Rule

Never use tables for layout. In the 1990s, this was common. Today, we use CSS Grid and Flexbox. Tables should only be used when data has a distinct two-dimensional relationship (Rows & Columns).

<th>

Table Header

Defines the label for a column or row. Must use scope to clarify direction.

<td>

Table Data

The actual data cell. Contains content, images, or links.

Accessibility Superpower

The scope attribute is magic. It tells a screen reader: "This header applies to all cells below it." Without it, navigating a complex table by voice is a nightmare.

<th scope="col">Price</th>

Quarterly Revenue Report

PeriodGrossNet

Q1$10,240$4,300

Q2$10,240$4,300

Q3$10,240$4,300

Total$30k$12k

Semantic Inspector

Hover over the table sections to inspect their semantic value.

CSS Grid

Best for page layout, galleries, and flexible positioning.

HTML Table

Best for financial data, schedules, and comparison matrices.