Skip to content

Table

Tables display structured data in rows and columns, providing a clear and organized way to present information.

Ready to use

DesignDevelopAccessibility

The Table lays out structured data in rows and columns so values can be compared at a glance. Reach for it when several records share the same attributes — vehicle specifications, pricing breakdowns, financing terms — and the reader needs to scan and compare precise values rather than read prose.

Anatomy

Section titled “Anatomy”
Model Fuel CO2 (g/km)
Corolla Hybrid 100–112
Yaris Hybrid 92–104
  1. Table
  2. Column header
  3. Data cell

When to use it

Section titled “When to use it”

Use the Table when:

  • You’re presenting structured, multi-column data where each row is a record and each column an attribute.
  • The reader needs to compare precise values across rows — specifications, pricing, financial figures.
  • A header row helps identify what each column means.

Avoid the Table when:

  • The content is a single-column set of choices or categories — use a List instead.
  • The content is long-form and meant to be read rather than compared.

Properties

Section titled “Properties”

Header row

The <thead> row of <th> cells that labels each column. Headers render in the emphasis body weight and align to the start of the cell so they stand apart from the data below. Set scope on each header so the label-to-data relationship is explicit for assistive technology.

Data cells

The <td> cells that carry the values, one record per <tbody> row. They use the default body weight, keeping the emphasis on the header and letting the figures read as a clean, scannable column.

Cell borders

Every cell is outlined with a muted one-pixel border and collapses against its neighbours, giving the table a continuous grid that keeps columns aligned as the eye moves across a row. Borders adapt to the surrounding scheme, so the grid stays legible on both default and contrast backgrounds.

Overflow

When a table is wider than its container, wrap it in the overflow utility (.tng-overflow-scroll) to enable horizontal scrolling. This keeps every column at a comfortable width instead of squeezing or wrapping the content.

Platform considerations

Section titled “Platform considerations”

Desktop

The table stretches to at least the full width of its container. Give each column enough room that values don’t wrap — the grid handles the alignment for you.

Tablet

Same structure as desktop. Watch the total column count: beyond a handful of columns the table starts to crowd, so drop non-essential columns before the layout is forced into a scroll.

Mobile

Horizontal space is tight. Wrap the table in the overflow utility so it scrolls sideways inside its container rather than breaking the page layout, and keep the most important column first so it reads before the scroll.

Best practices

Section titled “Best practices”

Tables read best when every column earns its place and the values line up cleanly.

Do

Give every column a short, descriptive header, present precise values with their units, keep related figures in the same column so they compare at a glance, and wrap wide tables in the overflow utility so the page layout stays intact.

Don't

Don’t use the Table for long-form content or a single column of choices, don’t pack in columns that don’t aid comparison, don’t leave the header row off, and don’t let a wide table break its container — scroll it instead.

Content guidelines

Section titled “Content guidelines”

Header labels should be short, descriptive, and consistent — one to three words in sentence case. Keep the tone neutral and informative; a table presents metadata, not marketing copy. Aim for compact labels (around eighteen characters) so columns stay stable, and fold units into the header (CO2 (g/km)) rather than repeating them in every cell. Use parallel wording across headers so the columns read as one set.