# Spec table

> A two-column specification sheet in a core table, ruled between every row, hanging off one heavy rule with the section title beside it in the margin. Airy on the left, dense on the right, and every fact where a reader can run down and stop. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/spec-table.html
Section: Tables
Access: Free, and free to keep.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: column, columns, group, heading, paragraph, table
Keywords: spec, specification, table, details, facts, datasheet

## Variations (2)

### Margin title (the default)

Identical markup in every theme.

The title, the lede and the sheet all hang from one two-pixel rule, with the title held in a narrow left margin so the sheet keeps a short measure and reads as a document rather than a band.

### Stacked sheet

Identical markup in every theme.

The same sheet with the title above it instead of beside it, both left-aligned under the rule and both held to a short measure. Take this one where the section sits under something already using a two-column split, or where the title is long.


---

## The signature moment: one rule, two densities hanging off it

A single two-pixel `currentColor` rule runs the full 1240px measure, and
everything in the section hangs from it. On the left, under the rule, sits an
airy third of the width: an eyebrow, a heading and one short paragraph, with
nothing else in it. On the right, under the same rule, sits the sheet, which is
the densest object in the catalogue: nine ruled rows, no pictures, no buttons,
nothing but facts.

That collision is the pattern. The reader's eye is given somewhere to rest and
then somewhere to work, and the rule is the only thing the two halves share.

## The two columns, and what core lets a table do

The label column is marked up as `<th scope="row">` and the value column as
`<td>`, which is a real distinction and not a decorative one: it is what lets a
screen reader announce "Weight, 0.0 kilograms" instead of reading two
disconnected cells, and it is what makes the label column render in your theme's
heading weight without the pattern stating a weight at all.

It is also the only per-column difference a core table can carry. `core/table`
gives a cell six attributes (content, tag, scope, alignment and the two span
counts) and nothing else, so no column inside the table can be given a size, a
tracking, a border or a ground of its own without a stylesheet, and this
catalogue ships no CSS with a pattern. The differentiation between label and
value here is therefore semantic, and the theme paints it. If you want the
labels smaller and tracked, that is a rule in your theme's stylesheet against
`.wp-block-table th`, and it will then apply to every table on your site, which
is usually what you actually wanted.

## What happens on a phone

The columns block stacks below 782px, so the title lands above the sheet and the
sheet takes the full width. The table itself is `hasFixedLayout`, so its two
columns stay exact halves at every width: about 175px each at 390, which holds a
label of one or two words and a value that wraps to two or three lines. Core
sets `word-break: break-word` on the cells of a fixed-layout table, so a long
value breaks instead of pushing the table wide, and core's `overflow-x: auto` on
the `figure` means that even a table that could not fit would scroll inside its
own box rather than giving the whole page a scrollbar.

`hasFixedLayout` is stated explicitly in the block rather than left to the
default, because the default flipped from `false` to `true` between
WordPress versions. Stating it means the same markup
renders identically on either side of that change, and cannot be marked invalid the day a site is
upgraded.

## What it inherits from your theme

- **Every colour.** The band's ground and text are preset chains ending on a
  WordPress core default; the heavy rule and every hairline in the table are
  `currentColor`, so they follow your text exactly.
- **The typeface**, entirely. The pattern states no font family.
- **The table's furniture**: cell padding, hairline weight and the weight of a
  `<th>` are your theme's table styles.
- **The spacing scale**, through core spacing presets.

## What it decides for itself

- **The asymmetry**: 34 / 66, so the sheet gets the working width and the title
  gets the margin.
- **The rule**: two pixels, `currentColor`, full measure, with everything under
  it. It is the only heavy mark in the section.
- **The sheet's type size**: a `clamp()` from 15px to 17px rather than the
  `small` preset, which is 13px in a theme with no size scale. A specification
  is read, not glanced at, and so is the note under it, which states its own
  clamp from 15px to 16px.
- **Nine rows.** Enough to look like a document, few enough to read.
- **The note under the sheet is held to 27rem**, in a nested constrained group
  inside the wide column, so it reads at about 70 characters instead of running
  the table's own width.

## What you change first

1. **The nine rows.** They ship as a physical product's specification, with
   every figure a placeholder (`PV-000`, `00 W at 240 V`). Add and remove rows
   freely; nothing in the layout depends on nine.
2. **The heading and the one paragraph beside it.** Keep the paragraph short:
   the margin column is a third of the width, and its job is to be quiet.
3. **The rule's weight**, if two pixels is loud in your theme. It is a border on
   the group that wraps both columns, so changing it once changes both halves.