Table

<Table>
  <TableCaption>Buena Mono instances.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Weight</TableHead>
      <TableHead>CSS</TableHead>
      <TableHead>Slant</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Regular</TableCell>
      <TableCell className="font-mono">400</TableCell>
      <TableCell className="font-mono">0°</TableCell>
    </TableRow>
  </TableBody>
</Table>

<Table>
  <TableHeader>…</TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>hello-world.md</TableCell>
      <TableCell>Published</TableCell>
      <TableCell className="text-right">
        <button aria-label="Edit">…</button>
      </TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total</TableCell>
      <TableCell className="text-right font-mono">3 notes</TableCell>
    </TableRow>
  </TableFooter>
</Table>

// striped: zebra body rows
<Table className="[&_tbody_tr:nth-child(even)]:bg-bg-surface">…</Table>

// bordered: ruled cells
<Table className="border border-separator [&_th]:border [&_td]:border [&_th]:border-separator [&_td]:border-separator">…</Table>

<TableRow className="cursor-pointer">…</TableRow>
// selected row — data-state drives the highlight
<TableRow data-state="selected" className="cursor-pointer">…</TableRow>