A specification sheet: exactly two columns, a label and a value, ruled between every row, with the section title held beside it in the margin.
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.
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 thesmallpreset, 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
- 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. - 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.
- 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.
The two columns, and what core lets a table do179 words
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 phone160 words
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 the WordPress versions this catalogue supports. Stating it means the same markup renders identically on both, and cannot be marked invalid the day a site is upgraded.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Stacked sheet
Fetching the markup…