Table
A data table built with the native <table> element,
laid out using CSS grid and subgrid for precise column alignment.
Default
Column count is detected automatically from the header row. All rows
inherit the same grid via subgrid.
| Name | Role | Status |
|---|---|---|
| Alice | Engineer | Active |
| Bob | Designer | Away |
| Carol | Manager | Active |
| 3 members | 2 active |
<table>
<caption>
Team members
</caption>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Engineer</td>
<td>Active</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3 members</td>
<td></td>
<td>2 active</td>
</tr>
</tfoot>
</table>Custom columns
Set --cols on the table to override the default equal
widths with any grid template value.
| Description | Date | Category | Amount |
|---|---|---|---|
| Monthly subscription | Mar 1 | Software | $12.00 |
| Office supplies | Mar 8 | Equipment | $34.50 |
| Team lunch | Mar 15 | Food | $87.20 |
<table style="--cols: 2fr 1fr 1fr 80px">
<thead>
<tr>
<th>Description</th>
<th>Date</th>
<th>Category</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monthly subscription</td>
<td>Mar 1</td>
<td>Software</td>
<td>$12.00</td>
</tr>
</tbody>
</table>Overflow
Tables scroll horizontally when their content exceeds the container width. No wrapper needed.
| Name | Department | Location | Start date | Status | |
|---|---|---|---|---|---|
| Alice | alice@example.com | Engineering | New York | Jan 12, 2022 | Active |
| Bob | bob@example.com | Design | London | Mar 4, 2023 | Away |
| Carol | carol@example.com | Management | Berlin | Sep 1, 2021 | Active |
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
<th>Location</th>
<th>Start date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>alice@example.com</td>
<td>Engineering</td>
<td>New York</td>
<td>Jan 12, 2022</td>
<td>Active</td>
</tr>
</tbody>
</table>With actions
A dropdown menu in the last column gives each row contextual actions.
| Name | Role | Status | Actions |
|---|---|---|---|
| Alice | Engineer | Active |
|
| Bob | Designer | Away |
|
| Carol | Manager | Active |
|
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Engineer</td>
<td>Active</td>
<td>
<button class="ghost square" popovertarget="actions-1">
<svg><!-- ellipsis icon --></svg>
</button>
<div id="actions-1" popover>
<menu>
<li><button class="ghost">Edit</button></li>
<li><button class="ghost">Duplicate</button></li>
<li><hr /></li>
<li><button class="ghost destructive">Remove</button></li>
</menu>
</div>
</td>
</tr>
</tbody>
</table>