Skip to content

table.md

Latest commit

 

History

History
144 lines (103 loc) · 8.28 KB

table.md

File metadata and controls

144 lines (103 loc) · 8.28 KB
Raw
raw true
title Table
description A data table styled in place: header rule, row lines, optional stripes, hover, and cell borders, with numeric columns that line up.
nav_group Content
nav_order 8

Table

A data table styled in place: header rule, row lines, optional stripes, hover, and cell borders, with numeric columns that line up.

Example

<iframe title="Table, live" srcdoc="<base href="/yeti/"><link rel="stylesheet" href="/yeti/yeti.css"><script type="module" src="/yeti/yeti.js"></script><script>addEventListener("click",function(e){var a=e.target.closest&&e.target.closest('a[href="#"]');if(a)e.preventDefault();});</script><body style="margin:0;padding:var(--yeti-space-md)"><table class="table" data-striped> <caption>Summits</caption> <thead> <tr><th scope="col">Peak</th><th scope="col" data-numeric>Height (m)</th></tr> </thead> <tbody> <tr><td>Ben Nevis</td><td data-numeric>1,345</td></tr> <tr><td>Snowdon</td><td data-numeric>1,085</td></tr> <tr><td>Scafell Pike</td><td data-numeric>978</td></tr> </tbody> </table>"></iframe>
View Code 
<table class="table" data-striped>
	<caption>Summits</caption>
	<thead>
		<tr><th scope="col">Peak</th><th scope="col" data-numeric>Height (m)</th></tr>
	</thead>
	<tbody>
		<tr><td>Ben Nevis</td><td data-numeric>1,345</td></tr>
		<tr><td>Snowdon</td><td data-numeric>1,085</td></tr>
		<tr><td>Scafell Pike</td><td data-numeric>978</td></tr>
	</tbody>
</table>

When to use it

Rows and columns of data: prices, results, comparisons. If the content is a list of things with a picture each, that is a grid of cards, not a table.

How it works

The class goes on the table. Cells get padding from data-size and a line beneath each row; the header row gets a stronger rule. data-striped tints every other row, data-hover the row under the pointer, data-border draws every cell. Mark a column of numbers with data-numeric on its cells and header: they align to the end with tabular figures, so the digits line up. The marker works on any element, a price or a legend's values, where it gives the figures alone. A comparison, a feature column and a column per plan, reads across best when the columns are equal: data-fixed gives every column the same share of the width, whatever it holds. To make the first column wider, give its header cell a width, <th style="inline-size: 40%">, and the others share the rest. data-align="center" (or start, end) on a th or td aligns that cell, and on a tr every cell in the row; a cell's own value, or its data-numeric, outranks its row's. A tick in a centered cell is an inline svg, and the reset makes an svg a block, so wrap it in an icon or give it display: inline-block for the alignment to reach it.

<table class="table" data-fixed aria-label="Plans compared">
	<thead><tr><th scope="col" style="inline-size: 40%">Feature</th><th scope="col" data-align="center">Free</th><th scope="col" data-align="center">Walker</th></tr></thead>
	<tbody><tr data-align="center"><th scope="row" data-align="start">Offline maps</th><td>No</td><td>Yes</td></tr></tbody>
</table>

data-sticky on the thead pins the header row at --yeti-sticky-offset while the rows scroll under it; its cells take the surface color so the rows do not show through, and the rule beneath them moves with them. Set the offset to 0 on the thead to pin it flush with the top. A table that is wider than its container goes inside a scroller, which scrolls it sideways while the table itself stays a table. data-nowrap on the table keeps every cell's line; on a single th or td it keeps just that cell's; either way, put the table in a scroller so the kept line has somewhere to go.

<div class="scroller" role="region" aria-label="Quarterly results" tabindex="0">
	<table class="table" data-size="sm" data-border>
		<caption>Quarterly results</caption>
		<thead><tr><th scope="col">Region</th><th scope="col" data-numeric>Q1</th><th scope="col" data-numeric>Q2</th></tr></thead>
		<tbody><tr><th scope="row">North</th><td data-numeric>120</td><td data-numeric>132</td></tr></tbody>
	</table>
</div>

Accessibility

A table needs a name: a caption, or aria-label or aria-labelledby on the element. Header cells carry scope. Yeti never turns a table into stacked cards at narrow widths, because that breaks the relationships a screen reader depends on; use a scroller and keep the table a table.

Attributes

Attribute Type Values Default Description
data-size enum sm, md, lg md Cell padding and text size; sm is the compact table.
data-striped boolean Tint every other body row.
data-hover boolean Tint the row under the pointer.
data-border boolean Borders around every cell instead of lines between rows, as a box draws its border.
data-nowrap boolean Every cell keeps its line; put the table in a scroller.
data-fixed boolean Fixed table layout: the columns share the width equally, whatever their content. A width on a first-row header cell makes that column wider and the rest share what is left.

Markers

Attributes that descendants carry, not the root.

Attribute Type Values On Description
data-numeric boolean * Tabular figures, so digits line up, on any element; on a table's cells and headers the column is end-aligned too.
data-nowrap boolean th, td This cell keeps its line.
data-align enum start, center, end th, td, tr Aligns the text of this cell, or of every cell in this row. A cell's own data-align or data-numeric outranks its row's.

Children

  • > caption: 0 to 1. The table's title.
  • > thead: 0 to 1. The header row. With data-sticky it pins at --yeti-sticky-offset as the rows scroll under it, painted with the surface and carrying its rule.
  • > tbody: at least 1. The rows.
  • [data-numeric]: any number. A cell (or header cell) of numbers: end-aligned with tabular figures.

Tokens

Token Description
--yeti-table-stripe Fill of even rows with data-striped.
--yeti-table-border Row and cell borders.
--yeti-color-border-strong The rule under the header.
--yeti-text-md Text size when data-size is absent.
--yeti-space-sm The space step when data-size is absent; a cell's inline padding follows it.
--yeti-weight-strong Weight of the caption and of header cells.
--yeti-border-width Width of the row rules, and of every cell border with data-border.
--yeti-color-surface Background of the head cells when the head is pinned with data-sticky.
--yeti-color-surface-sunken Background of a row under the pointer with data-hover.
Internal tokens (may change between minor versions)
  • --_yeti-size-text
  • --_yeti-size-space

Accessibility

  • Give the table a caption, or aria-label / aria-labelledby. Header cells carry scope="col" or scope="row". A table wider than its container goes inside a scroller with tabindex="0" and a label; the table itself never changes shape, so it stays a table for assistive tech.

Browser support

  • Used without guards: logical properties, font-variant-numeric
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.