Table

The Table system provides structured data presentation with consistent styling and various size options. It's designed to display information in a clear, scannable format while maintaining visual hierarchy.

Base Structure

Tables are built using standard HTML table elements with additional classes for styling. The base structure includes headers and data cells with consistent spacing and typography.

Default Table

The table class provides the standard table styling with comfortable spacing and clear visual hierarchy.

Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3
Table Default
<table class="table">
  <thead>
    <tr>
      <th><span class="title">Header 1</span></th>
      <th><span class="title">Header 2</span></th>
      <th><span class="title">Header 3</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="label">Row 1, Cell 1</span></td>
      <td><span class="label">Row 1, Cell 2</span></td>
      <td><span class="label">Row 1, Cell 3</span></td>
    </tr>
  </tbody>
</table>

Size Variants

Tables can be rendered in different sizes to accommodate various use cases and space constraints. Size variants maintain the same structure while adjusting spacing and typography.

Condensed Table

Add table--condensed for a more compact table with reduced padding and smaller text.

Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3
Table Condensed
<table class="table table--condensed">
  <thead>
    <tr>
      <th><span class="title title--small">Header 1</span></th>
      <th><span class="title title--small">Header 2</span></th>
      <th><span class="title title--small">Header 3</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="label label--small">Row 1, Cell 1</span></td>
      <td><span class="label label--small">Row 1, Cell 2</span></td>
      <td><span class="label label--small">Row 1, Cell 3</span></td>
    </tr>
  </tbody>
</table>