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>