Usage

Tables provide presentation-focused layout for tabular data in documents. For typed data with column validation and structured datasets, see datatables.

Start with these tokens when customizing tables:

--table-spacing-top and --table-spacing-bottom for vertical rhythm

--table-max-width (plus mobile/print variants) for breakout width

--table-header-background and --table-header-font-weight for header emphasis

--table-row-striped and --table-row-hover for row scanning

--table-cell-padding and --table-cell-font-size for density

--table-border-width and --table-border-color for frame style

--table-caption-* and --table-notes-* for supporting text

Spacing derives from --content-spacing, and caption/notes typography aligns with the shared caption system. For typed data tables with column validation, use the datatable tokens instead.

Tokens

Layout Tokens

Control breakout width behavior for tables.

Token	Description	Default Value
`--table-max-width`	Maximum width for tables	`var(--content-breakout-width)`
`--table-max-width-mobile`	Maximum width on mobile (640px)	`var(--content-breakout-width-mobile)`
`--table-max-width-print`	Maximum width in print	`100%`

Spacing Tokens

Control vertical separation and layout spacing for tables.

Token	Description	Default Value
`--table-spacing-top`	Top margin (automatic responsive scaling)	`var(--content-spacing)`
`--table-spacing-bottom`	Bottom margin (automatic responsive scaling)	`var(--content-spacing)`
`--table-caption-spacing-bottom`	Gap between caption and table	`var(--caption-spacing)`
`--table-notes-spacing-top`	Gap between table and notes	`calc(var(--content-spacing) * 0.5)`

Caption Layout and Typography Tokens

Layout and typography styling for table captions (inherits from caption and label tokens).

Token	Description	Default Value
`--table-caption-font-family`	Font family for captions	`var(--caption-font-family)`
`--table-caption-font-size`	Font size for captions	`var(--caption-font-size)`
`--table-caption-color`	Text color (automatic dark mode)	`var(--caption-color)`
`--table-caption-line-height`	Line height for caption text	`var(--caption-line-height)`
`--table-caption-align`	Text alignment (left, center, right, justify)	`var(--caption-align)`
`--table-caption-max-width`	Maximum width for caption text	`var(--caption-max-width)`
`--table-label-font-weight`	Font weight for table labels	`var(--label-font-weight)`
`--table-label-font-style`	Font style for table labels	`var(--label-font-style)`
`--table-label-color`	Text color for table labels	`var(--label-color)`

Notes Tokens

Styling for table notes and annotations.

Token	Description	Default Value
`--table-notes-font-family`	Font family for notes text	`var(--text-font-family)`
`--table-notes-font-size`	Font size for notes text	`calc(var(--text-font-size) * 0.80)`
`--table-notes-color`	Text color for notes	`var(--text-color-secondary)`
`--table-notes-line-height`	Line height for notes text	`var(--line-height-normal)`
`--table-notes-align`	Text alignment for notes	`left`

Table Container Tokens

Border and corner styling for the table container.

Token	Description	Default Value
`--table-border-radius`	Corner rounding	`var(--border-radius-default)`

Border Tokens

Granular control over table borders enables classic typographic patterns like Tufte-style horizontal rules or Booktabs formatting.

Base Border Tokens

Foundation tokens that other border tokens inherit from:

Token	Description	Default Value
`--table-border-width`	Base width for outer borders	`var(--border-width-default)`
`--table-border-width-print`	Base width for print media	`0`
`--table-border-color`	Base color for outer borders	`var(--border-color-default)`
`--table-border-style`	Base style for outer borders	`solid`

Outer Border Edge Tokens

Individual control for each edge of the table's outer border:

Token	Description	Default Value
`--table-border-top-width`	Top edge border width	`var(--table-border-width)`
`--table-border-top-width-print`	Top edge width for print	`var(--table-border-width-print)`
`--table-border-top-color`	Top edge border color	`var(--table-border-color)`
`--table-border-top-style`	Top edge border style	`var(--table-border-style)`
`--table-border-bottom-width`	Bottom edge border width	`var(--table-border-width)`
`--table-border-bottom-width-print`	Bottom edge width for print	`var(--table-border-width-print)`
`--table-border-bottom-color`	Bottom edge border color	`var(--table-border-color)`
`--table-border-bottom-style`	Bottom edge border style	`var(--table-border-style)`
`--table-border-left-width`	Left edge border width	`var(--table-border-width)`
`--table-border-left-width-print`	Left edge width for print	`var(--table-border-width-print)`
`--table-border-left-color`	Left edge border color	`var(--table-border-color)`
`--table-border-left-style`	Left edge border style	`var(--table-border-style)`
`--table-border-right-width`	Right edge border width	`var(--table-border-width)`
`--table-border-right-width-print`	Right edge width for print	`var(--table-border-width-print)`
`--table-border-right-color`	Right edge border color	`var(--table-border-color)`
`--table-border-right-style`	Right edge border style	`var(--table-border-style)`

Row Border Tokens

Control borders between rows and after headers:

Token	Description	Default Value
`--table-row-border-width`	Base width for row borders	`var(--border-width-default)`
`--table-row-border-width-print`	Base width for print media	`var(--border-width-default)`
`--table-row-border-color`	Base color for row borders	`var(--border-color-default)`
`--table-row-border-style`	Base style for row borders	`solid`
`--table-header-border-bottom-width`	Border below header row	`var(--table-row-border-width)`
`--table-header-border-bottom-width-print`	Header border width for print	`var(--table-row-border-width-print)`
`--table-header-border-bottom-color`	Border color below header	`var(--table-row-border-color)`
`--table-header-border-bottom-style`	Border style below header	`var(--table-row-border-style)`
`--table-body-row-border-width`	Border between body rows	`var(--table-row-border-width)`
`--table-body-row-border-width-print`	Body row border width for print	`var(--table-row-border-width-print)`
`--table-body-row-border-color`	Border color between body rows	`var(--table-row-border-color)`
`--table-body-row-border-style`	Border style between body rows	`var(--table-row-border-style)`

Column Border Tokens

Control vertical borders between columns:

Token	Description	Default Value
`--table-column-border-width`	Vertical borders between columns	`0`
`--table-column-border-width-print`	Column border width for print	`0`
`--table-column-border-color`	Vertical border color	`var(--border-color-default)`
`--table-column-border-style`	Vertical border style	`solid`

Header Styling Tokens

Visual styling for table headers.

Token	Description	Default Value
`--table-header-background`	Background color for headers	`var(--surface-sunken)`
`--table-header-background-dark`	Background color for dark mode	`var(--surface-sunken-dark)`
`--table-header-background-print`	Background color for print	`transparent`
`--table-header-font-weight`	Font weight for header text	`var(--font-weight-semibold)`

Row Styling Tokens

Interactive and striping behavior for table rows.

Token	Description	Default Value
`--table-row-hover`	Background color on hover	`var(--color-gray-50)`
`--table-row-hover-dark`	Hover background color for dark mode	`#303030`
`--table-row-striped`	Background color for even rows	`transparent`
`--table-row-striped-dark`	Striped background for dark mode	`transparent`
`--table-row-striped-print`	Striped background for print (transparent saves ink)	`transparent`

Cell Styling Tokens

Typography and spacing for table cells.

Token	Description	Default Value
`--table-cell-font-family`	Font family for cell text	`var(--text-font-family)`
`--table-cell-font-size`	Font size for cell text	`calc(var(--text-font-size) * 0.85)`
`--table-cell-line-height`	Line height for cell text	`var(--line-height-normal)`
`--table-cell-line-height-mobile`	Line height on mobile	`var(--line-height-tight)`
`--table-cell-line-height-print`	Line height for print	`var(--line-height-tight)`
`--table-cell-padding`	Cell padding	`var(--space-2)`
`--table-cell-padding-mobile`	Cell padding on mobile	`var(--space-1)`
`--table-cell-padding-print`	Reduced padding for print	`var(--space-xs)`

Examples

Default Tables

Standard table styling with automatic responsive spacing and dark mode support:

:root {
  /* No design token overrides */
}

Name	Value	Status
Alpha	42	Active
Beta	17	Pending
Gamma	89	Active
Delta	33	Closed

Scholarly Article Tables

Enhanced spacing and typography for formal academic documents:

:root {
  --table-spacing-top: calc(var(--content-spacing) * 2);
  --table-spacing-bottom: calc(var(--content-spacing) * 2);
  --table-caption-spacing-bottom: var(--content-spacing);
  --table-caption-align: justify;
  --table-caption-line-height: var(--line-height-md);
}

Table 1: Summary of experimental results showing treatment effects across three independent trials. Values represent mean ± standard deviation with significance levels indicated.
Treatment	Trial 1	Trial 2	Trial 3	p-value
Control	12.3±2.1	11.8±1.9	12.6±2.3	—
Drug A	18.7±3.2	19.1±2.8	18.3±3.5	< 0.001
Drug B	15.4±2.6	16.2±2.4	15.8±2.9	< 0.01

Tables with Multi-Paragraph Captions

Tables supporting longer, detailed captions with multiple paragraphs:

:root {
  --table-caption-line-height: var(--line-height-md);
  --table-caption-spacing-bottom: var(--space-6);
}

Table 2: Comparison of algorithm performance across three benchmark datasets. Execution time measured in milliseconds on standardized hardware.
All tests were conducted with identical parameters and repeated 100 times. The values shown represent median execution time with 95% confidence intervals.
Algorithm	Dataset A	Dataset B	Dataset C
Method 1	23±2 ms	45±4 ms	67±5 ms
Method 2	18±1 ms	38±3 ms	55±4 ms
Method 3	31±3 ms	52±5 ms	78±6 ms

Tables with Notes

Tables with annotations and additional context below the data:

:root {
  --table-notes-spacing-top: var(--space-4);
  --table-notes-font-size: var(--font-size-xs);
}

Table 3: Population statistics by region for 2023-2024.
Region	Population	Growth	Density
North	2,450,000	1.2%	145/km²
South	1,875,000	2.8%	98/km²
East	3,120,000	0.9%	201/km²
West	1,650,000	1.5%	87/km²

Tufte-Style Tables

Classic horizontal rules only (top and bottom borders, separator under header, no vertical lines):

:root {
  /* Outer borders - top and bottom only */
  --table-border-top-width: 1px;
  --table-border-bottom-width: 1px;
  --table-border-left-width: 0;
  --table-border-right-width: 0;

  /* Header separator - single rule below header */
  --table-header-border-bottom-width: 1px;

  /* Body rows - no interior borders */
  --table-body-row-border-width: 0;
  --table-column-border-width: 0;

  /* Minimal styling */
  --table-header-background: transparent;
  --table-row-hover: transparent;
  --table-cell-padding: var(--space-3);
}

Measure	Mean	SD	Range
Temperature	22.4	1.8	18.2-26.1
Humidity	65.3	8.2	52.1-78.5
Pressure	101.3	0.7	100.1-102.5

Booktabs-Style Tables

Thick rules at top and bottom, thin rule under header:

:root {
  /* Thick outer borders */
  --table-border-top-width: 2px;
  --table-border-bottom-width: 2px;
  --table-border-left-width: 0;
  --table-border-right-width: 0;

  /* Thin header separator */
  --table-header-border-bottom-width: 1px;

  /* No interior borders */
  --table-body-row-border-width: 0;
  --table-column-border-width: 0;

  /* Clean styling */
  --table-header-background: transparent;
  --table-header-font-weight: var(--font-weight-semibold);
}

Category	Count	Percentage
Type A	142	35.5%
Type B	198	49.5%
Type C	60	15.0%

Tips

Headers and striping: Use --table-header-background and --table-row-striped (with -dark variants) to improve scanability.

Row interactions: Set --table-row-hover to add or remove hover feedback without custom CSS.

Captions and notes: Use --table-caption-* and --table-notes-* to match the shared caption/label system.

Borders: Use edge-specific tokens like --table-border-top-width and --table-border-bottom-width for booktabs-style rules without custom selectors.