Publish readable and accessible data tables

Define units, scope and missing values

Use a title that identifies the subject, period and scope where relevant. Put units in headers or beside values. For prices, explain inclusions and comparison terms. Give missing values an explicit meaning instead of using zero, which could be mistaken for a measurement.

Compare like with like. Monthly and yearly values need explained conversion or separate columns. Mark quote-only offers accordingly. Sorting should not imply a precise ranking of values that represent different things.

Connect cells and their headers

The W3C table tutorials describe a data structure with header cells. The simple-header example uses row or column relationships to make values meaningful. Reduce complex groupings when a simpler structure is enough.

A reading table can contain links and buttons without becoming a full application grid. Cell selection or editing adds behavioural requirements. Do not adopt a grid model solely to colour a row or provide a sort button.

Plan sorting, mobile display and export

Identify the active sort column and direction. Test numbers, dates and missing values: text sorting may place 100 before 20. Retain row context after actions and explain whether export includes only the current page.

On mobile, compare a clearly indicated local scroll area with cards retaining field labels. Avoid shrinking all text until it becomes hard to read. Data requiring two-dimensional layout has a specific exception under the reflow criterion; surrounding content still needs to remain readable.

Example: compare hosting offers

Educational example: a table shows storage, backup, price and restoration terms. An unpublished price says “On quotation”. Price is sorted only when period and scope are comparable. Export retains units and qualifications; testing confirms that an absent value does not become zero.