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>