Browse Components
Tables
A responsive semantic data table.
Basic
A caption names the data. Column and row headers preserve relationships; numeric cells align at the reading-direction end.
| Project | Status | Members |
|---|---|---|
| Website | Published | 8 |
| Customer portal | In progress | 4 |
| Documentation | Draft | 2 |
View Code
<div class="table-scroll" role="region" aria-labelledby="projects-caption" tabindex="0">
<table>
<caption id="projects-caption">
Example projects
</caption>
<thead>
<tr>
<th scope="col">
Project
</th>
<th scope="col">
Status
</th>
<th class="table-number" scope="col">
Members
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Website
</th>
<td>
Published
</td>
<td class="table-number">
8
</td>
</tr>
<tr>
<th scope="row">
Customer portal
</th>
<td>
In progress
</td>
<td class="table-number">
4
</td>
</tr>
<tr>
<th scope="row">
Documentation
</th>
<td>
Draft
</td>
<td class="table-number">
2
</td>
</tr>
</tbody>
</table>
</div>Striped and compact
Optional stripes help track rows. Compact spacing suits concise data; keep interactive controls comfortably sized.
| Project | Status |
|---|---|
| Website | Published |
| Portal | Draft |
View Code
<table class="table-striped table-compact">
<caption>
Project status
</caption>
<thead>
<tr>
<th scope="col">
Project
</th>
<th scope="col">
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Website
</th>
<td>
Published
</td>
</tr>
<tr>
<th scope="row">
Portal
</th>
<td>
Draft
</td>
</tr>
</tbody>
</table>Totals
Use tfoot for a summary. Values are sample data; the component does not calculate totals.
| Invoice | Status | Amount |
|---|---|---|
| INV-101 | Paid | $250.00 |
| INV-102 | Pending | $150.00 |
| Total | $400.00 | |
View Code
<div class="table-scroll" tabindex="0" role="region" aria-labelledby="invoice-caption">
<table>
<caption id="invoice-caption">
Example invoices (USD)
</caption>
<thead>
<tr>
<th scope="col">
Invoice
</th>
<th scope="col">
Status
</th>
<th scope="col" class="table-number">
Amount
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
INV-101
</th>
<td>
Paid
</td>
<td class="table-number">
$250.00
</td>
</tr>
<tr>
<th scope="row">
INV-102
</th>
<td>
Pending
</td>
<td class="table-number">
$150.00
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">
Total
</th>
<td class="table-number">
$400.00
</td>
</tr>
</tfoot>
</table>
</div>Wide content
Tables in table-scroll keep a readable 28rem minimum width. Override --table-min for wider data (40rem here). On narrow screens, focus the region and use arrow keys, touch, or a trackpad to reach every column.
Scroll horizontally to see all columns.
| Project | Owner | Next milestone | Target date |
|---|---|---|---|
| Documentation | Sam Chen | Read the Documentation |
View Code
<div class="stack">
<p class="muted">
Scroll horizontally to see all columns.
</p>
<div class="table-scroll" tabindex="0" role="region" aria-labelledby="delivery-caption">
<table style="--table-min:40rem">
<caption id="delivery-caption">
Project delivery
</caption>
<thead>
<tr>
<th scope="col">
Project
</th>
<th scope="col">
Owner
</th>
<th scope="col">
Next milestone
</th>
<th scope="col">
Target date
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Documentation
</th>
<td>
Sam Chen
</td>
<td>
<a href="/docs">
Read the Documentation
</a>
</td>
<td>
<time datetime="2026-11-19">
19 Nov 2026
</time>
</td>
</tr>
</tbody>
</table>
</div>
</div>Empty state
Keep headers visible and explain why there are no rows. Do not use an empty table to represent a loading error.
| Project | Status |
|---|---|
| No projects yet. Projects will appear here after you create them. | |
View Code
<table>
<caption>
Team projects
</caption>
<thead>
<tr>
<th scope="col">
Project
</th>
<th scope="col">
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
No projects yet. Projects will appear here after you create them.
</td>
</tr>
</tbody>
</table>Right-to-left
Column order and text alignment follow the document direction. Numeric cells align at the logical end.
| פרויקט | חברי צוות |
|---|---|
| אתר | 8 |
| תיעוד | 2 |
View Code
<div
dir="rtl"
lang="he"
class="table-scroll"
tabindex="0"
role="region"
aria-labelledby="hebrew-caption"
>
<table>
<caption id="hebrew-caption">
הפרויקטים של הצוות
</caption>
<thead>
<tr>
<th scope="col">
פרויקט
</th>
<th scope="col" class="table-number">
חברי צוות
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
אתר
</th>
<td class="table-number">
8
</td>
</tr>
<tr>
<th scope="row">
תיעוד
</th>
<td class="table-number">
2
</td>
</tr>
</tbody>
</table>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/table.css">8,826 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Describe the data
Use a caption and scoped row and column headers. Apply .table-number to numbers that should align for comparison.
Make room on small screens
Wrap wide tables in .table-scroll with a name and tabindex="0". Keep important columns visible and let the region scroll.
Add only what you need
Use .table-striped or .table-compact for presentation. Sorting, filtering, pagination, and fetching are application features, not built into this table.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.