Table
A native <table> laid out with grid and subgrid,
so every row shares the same columns.
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 in the last column gives each row its own 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>Zebra
Add class="zebra" to the table to alternate row
backgrounds.
| Name | Role | Status |
|---|---|---|
| Alice | Engineer | Active |
| Bob | Designer | Away |
| Carol | Manager | Active |
| David | Engineer | Active |
<table class="zebra">
...
</table>