Tables

Used to organize and list data set information. While data visualization helps quickly summarize a data set, data tables allows customers to compare and data individual data rows.

Base Style

Office Country Employees Contact
Austin, TX United States 48 Henna Ferry
Bangalore India 13 Arun Chadda
New York City, NY United States 22 Billy Bourne
San Francisco, CA United States 108 Shane Holmes
San Ramon, CA United States 18 Annie Wu
Vancouver, BC Canada 76 Kendal Lewis
<table class="d-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col" width="10%"></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

Office Country Employees Contact
Austin, TX United States 48 Henna Ferry
Bangalore India 13 Arun Chadda
New York City, NY United States 22 Billy Bourne
San Francisco, CA United States 108 Shane Holmes
San Ramon, CA United States 18 Annie Wu
Vancouver, BC Canada 76 Kendal Lewis
<table class="d-table d-table--inverted">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col" width="10%"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>