Spec table: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/spec-table.html Core Patterns (https://patternpaste.com/patterns/) Tables (https://patternpaste.com/patterns/tables/) Free Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## 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). - 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. 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. Theme handoff ## What comes from where ### From your theme - Every colour. - The typeface - The table's furniture - The spacing scale ### Set by this pattern - The asymmetry - The rule - The sheet's type size - Nine rows. - The note under the sheet is held to 27rem Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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. Make it yoursVariations and the edits to make first ### 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. Theme behaviourInheritance, fixed decisions and contrast ### 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 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. Technical notesBlock mechanics, responsive behaviour and constraints ### The two columns, and what core lets a table do The label column is marked up as and the value column as , 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. Questions ## Spec table: common questions Does Spec table need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, paragraph and table), so it pastes into the block editor with nothing to install. Will Spec table match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Spec table have? 2: Margin title and Stacked sheet. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Spec table free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Which WordPress version does it need? 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### Pair with Pricing Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html)Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Tables Access Free Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, paragraph, table Presets color 5, spacing 3, font-size 2 WordPress 7.0+ Continue exploring ## Next in Tables Explore all 9 Tables patterns (https://patternpaste.com/patterns/tables/) Shot in Twenty Twenty-Five Tables No plugin needed ### Plan comparison table A three-tier pricing and feature comparison layout: top header cards with plan names, prices, and conversion buttons, followed immediately by an aligned capability table. Tables Preview pattern (https://patternpaste.com/pattern/compare-plan-table.html) Shot in Twenty Twenty-Five Tables No plugin needed ### Data ledger table A structured operational data ledger table featuring date stamps, record categories, status tags, and monetary figures, paired with header action controls. Tables Preview pattern (https://patternpaste.com/pattern/table-data-ledger.html) Shot in Twenty Twenty-Five Tables No plugin needed ### Feature checklist matrix A comprehensive multi-category capability matrix in a fixed core table: features grouped under clear category subheaders across four plan tiers with checkmarks, numerical caps, and plan details. Tables Preview pattern (https://patternpaste.com/pattern/table-feature-checklist.html)