Table
A table is a pattern for organizing data sets. While data visualization helps quickly summarize a data set, a table allows users to compare and analyze individual data rows.
Classes
| Class | Applies to | Description |
|---|
Examples
Base Style
<table class="d-table">
<caption class="d-table__caption">...</caption>
<thead>
<tr>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Inverted Style
Used when you want to display a data table on a darker background.
<table class="d-table d-table--inverted">
<caption class="d-table__caption">...</caption>
<thead>
<tr>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Striped
<table class="d-table d-table--striped">
<caption class="d-table__caption">...</caption>
<thead>
<tr>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
<table class="d-table d-table--inverted d-table--striped">
<caption class="d-table__caption">...</caption>
<thead>
<tr>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Accessibility
Use the caption element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
We provide .d-table__caption for a basic caption style, but you can also use utility classes to apply custom styles as needed.