Table

The <table> element and all its children (<thead>, <tbody>, <tfoot>, <tr>, <th>, <td>) are styled automatically. No classes required.

Basic Table

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Version</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Luminary UI</td>
      <td>1.0.0</td>
      <td>Stable</td>
    </tr>
    <tr>
      <td>React</td>
      <td>18.3</td>
      <td>Stable</td>
    </tr>
  </tbody>
</table>

Table with Footer

<tfoot> renders with muted text and a top border separator.

<table>
  <thead>
    <tr><th>Item</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Glass Card</td><td>Free</td></tr>
    <tr><td>Glass Button</td><td>Free</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$0.00</td></tr>
  </tfoot>
</table>

Styling Details

Part	Treatment
<thead> <th>	Uppercase, 0.8rem, bold, --glass-text, 2px bottom border
<tbody> <tr>	1px glass-border row dividers with hover background tint
<tbody> <td>	0.75rem 1rem padding, vertically centered
<tfoot> <td>	Muted color, 0.85rem, 1px top border

Tables use border-collapse: collapse and width: 100% by default.