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