Table
Renders tabular data with header, body, row, head, and cell sub-components. Supports captions and is fully accessible.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Credit Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-003 | Unpaid | Bank Transfer | $350.00 |
Simple
A minimal table with only a header and body, useful for short lists.
| Name | Role | |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
Anatomy
- Table — Wrapper with overflow scroll on small screens.
- TableHeader — The
<thead>element. - TableBody — The
<tbody>element. - TableFooter — The
<tfoot>element. - TableRow — A
<tr>with hover state. - TableHead — A
<th>cell in the header. - TableCell — A
<td>data cell. - TableCaption — An accessible table caption.
Installation