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 |
<table>
<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>
</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>