Contentstable

Table

Data tables with a quiet uppercase header, tabular numerals, end-aligned numbers, compact/striped/interactive variants and a scrolling frame.

Examples

Table in a scrolling frame

Cohorts, 2026
Cohort	Format	Learners	Status
AI Literacy I	Online	1,240	Live
Prompting for Teachers	Hybrid	318	Enrolling
Developers' Lab	In person	42	Draft

HTML for “Table in a scrolling frame”

<div class="mp-table-wrap" tabindex="0" role="region" aria-labelledby="table-cohorts-caption">
  <table class="mp-table" data-variant="interactive">
    <caption id="table-cohorts-caption">Cohorts, 2026</caption>
    <thead>
      <tr><th scope="col">Cohort</th><th scope="col">Format</th><th scope="col" data-align="end">Learners</th><th scope="col">Status</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">AI Literacy I</th><td>Online</td><td data-align="end">1,240</td><td><span class="mp-badge" data-tone="success">Live</span></td></tr>
      <tr><th scope="row">Prompting for Teachers</th><td>Hybrid</td><td data-align="end">318</td><td><span class="mp-badge" data-tone="info">Enrolling</span></td></tr>
      <tr><th scope="row">Developers' Lab</th><td>In person</td><td data-align="end">42</td><td><span class="mp-badge">Draft</span></td></tr>
    </tbody>
  </table>
</div>

Compact and striped

Contrast checks by surface
Token	Surface	Ratio
`--color-human-text`	Card	5.02
`--color-error-text`	Card	4.94
`--color-warning-text`	Card	5.15
`--color-info-text`	Page	7.03

HTML for “Compact and striped”

<div class="mp-table-wrap">
  <table class="mp-table" data-density="compact" data-variant="striped">
    <caption class="mp-visually-hidden">Contrast checks by surface</caption>
    <thead>
      <tr><th scope="col">Token</th><th scope="col">Surface</th><th scope="col" data-align="end">Ratio</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row"><code class="mp-code">--color-human-text</code></th><td>Card</td><td data-align="end">5.02</td></tr>
      <tr><th scope="row"><code class="mp-code">--color-error-text</code></th><td>Card</td><td data-align="end">4.94</td></tr>
      <tr><th scope="row"><code class="mp-code">--color-warning-text</code></th><td>Card</td><td data-align="end">5.15</td></tr>
      <tr><th scope="row"><code class="mp-code">--color-info-text</code></th><td>Page</td><td data-align="end">7.03</td></tr>
    </tbody>
  </table>
</div>

Guidance

For genuinely tabular data. Numbers use tabular figures so columns line up; numeric cells take data-align="end".

Accessibility

Always include a <caption> (it can be visually hidden with .mp-visually-hidden) and scope on header cells.
A scrolling .mp-table-wrap gets tabindex="0", role="region" and a label so keyboard users can scroll it.
Never use tables for layout — use Layout primitives.

API

Table classes
Class	Kind
`.mp-table-wrap`	root
`.mp-table`	root

Table attributes
Attribute	Values
`data-align`	`end`
`data-density`	`compact`
`data-variant`	`striped` · `interactive`

States styled: :focus-visible :hover. Set the native attribute or ARIA state; there are no state classes.

Table component tokens
Token	Default	Light · dark
`--mp-table-max-height`	`none`	—
`--mp-table-cell-padding`	`var(--space-3) var(--space-4)`	—

Design tokens consumed: --border-default --color-bg-hover --color-bg-secondary --color-text-primary --color-text-secondary --color-text-tertiary --focus-ring --focus-ring-offset --font-sans --leading-small --radius-md --space-2 --space-3 --space-4 --text-small --text-xs --tracking-label --weight-semibold

Source

README on GitHub CSS on GitHub Manifest (JSON)