Tables

Tables are used to list all information from a data set. The base style establishes preferred padding, font-size, and font-weight treatments. To enhance or customize the look of the table, apply any additional classes listed below.

Default Style

The default table style is a bordered cell layout with a stylized header row.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table class="s-table">
    <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>
Name Reputation Joined Last Seen
Aaron Shekey
263
7
Dec 1 ’17 at 20:24 just now
Joshua Hynes
611
11
Feb 12 at 18:47 Aug 10 at 14:57
Paweł Ludwiczak
25
8
Nov 28 ’17 at 20:21 1 hour ago
Piper Lawson
25
3
Jul 5 at 14:32 Aug 14 at 12:41

Borders & Backgrounds

By default, tables are outlined, have borders on all cells, and have a styled header. Depending on the size and complexity of a table, these can all be configured.

Horizontal Borders

Shows only horizontal table cell borders. Good for tables with lots of data that can be sorted and filtered.

1
2
3
<table class="s-table s-table__bx"></table>
First Name Last Name Username
1 Aaron S. @aarons
2 Joshua H. @joshuah
3 Paweł L. @pawełl
4 Ted G. @so-ted

Simple Borders

Removes most of the default borders and backgrounds. Good for tables without much data that don't need to be sorted or filtered.

1
2
3
<table class="s-table s-table__bx-simple"></table>
First Name Last Name Username
1 Aaron S. @aarons
2 Joshua H. @joshuah
3 Paweł L. @pawełl
4 Ted G. @so-ted

No Borders

Removes all table cell borders.

1
2
3
<table class="s-table s-table__b0"></table>
First Name Last Name Username
1 Aaron S. @aarons
2 Joshua H. @joshuah
3 Paweł L. @pawełl
4 Ted G. @so-ted

Zebra Striping

When tables have a lot of information, you can help users group information and isolate data by adding zebra striping.

1
2
3
<table class="s-table s-table__stripes"></table>
First Name Last Name Username
1 Aaron S. @aarons
2 Joshua H. @joshuah
3 Paweł L. @pawełl
4 Ted G. @so-ted

Spacing

A table’s padding can be changed to be more or less condensed.

Small

1
2
3
<table class="s-table s-table__sm"></table>
First Name Last Name Username
1 Aaron S. @aarons
2 Joshua H. @joshuah

Default

1
2
3
<table class="s-table"></table>
First Name Last Name Username
1 Paweł L. @pawełl
2 Ted G. @so-ted

Large

1
2
3
<table class="s-table s-table__lg"></table>
First Name Last Name Username
1 Aaron S. @aarons
2 Joshua H. @joshuah

Cell Widths

Table columns will size themselves based on their content. To set a specific width, you can use one of the following table cell classes to specify the width for any column.

Classes

Class Width
.s-table--cell1 8.3333333%
.s-table--cell2 16.6666667%
.s-table--cell3 25%
.s-table--cell4 33.3333333%
.s-table--cell5 41.6666667%
.s-table--cell6 50%
.s-table--cell7 58.3333333%
.s-table--cell8 66.6666667%
.s-table--cell9 75%
.s-table--cell10 83.3333333%
.s-table--cell11 91.6666667%
.s-table--cell12 100%

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Example 1
<table class="s-table">
    <tr>
        <td class="s-table--cell2"></td>
        <td></td>
    </tr>
</table>
// Example 2
<table class="s-table">
    <tr>
        <td class="s-table--cell3"></td>
        <td class="s-table--cell6"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
// Example 3
<table class="s-table">
    <tr>
        <td class="s-table--cell4"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td class="s-table--cell2"></td>
    </tr>
</table>
.s-table--cell2 No Class
.s-table--cell3 .s-table--cell6 No Class No Class No Class
.s-table--cell4 No Class No Class No Class No Class .s-table--cell2

Alignment

Vertical Alignment

The default vertical alignment is middle. You change a table’s or a specific cell’s vertical alignment by using the Vertical Alignment atomic classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table class="s-table">
    <tbody>
        <tr>
            <td class="va-top"></td>
            <td class="va-middle"></td>
            <td class="va-bottom"></td>
        </tr>
    </tbody>
</table>
<table class="s-table va-bottom">
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
.va-top .va-middle .va-bottom
.s-table.va-bottom .s-table.va-bottom .s-table.va-bottom

Text Alignment

Text alignment can be changed at a table or cell level by using atomic text alignment classes. Columns containing copy should be left-aligned. Columns containing numbers should be right-aligned.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table class="s-table">
    <tbody>
        <tr>
            <td class="ta-left"></td>
            <td class="ta-center"></td>
            <td class="ta-right"></td>
        </tr>
    </tbody>
</table>
<table class="s-table ta-right">
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
.ta-left .ta-center .ta-right
.s-table.ta-right .s-table.ta-right .s-table.ta-right

Sortable Tables

With the addition of JavaScript, table columns can be re-sorted based on the columns data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table class="s-table s-table__sortable">
    <thead>
        <tr>
            <th scope="col" class="is-sorted">Listing @Svg.ArrowDownSm</th>
            <th scope="col">Status @Svg.ArrowUpDownSm</th>
            <th scope="col">Owner @Svg.ArrowUpDownSm</th>
            <th scope="col" class="ta-right">Views @Svg.ArrowUpDownSm</th>
            <th scope="col" class="ta-right">Applies @Svg.ArrowUpDownSm</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
Listing Status Owner Views Applies
Site Reliability Engineer, Generalist
Sydney, Australia
Running Sansa Stark 502 13
Senior Product Designer
New York, NY, USA
Running Robert Baratheon 900 15
Product Manager, Developer Products
London, England
Running Sansa Stark 3 1

Bar Graphs

To help users, you can add data visualizations into table cells. These are useful to help visualize the reported data and calling extra attention to the table cell. These graphs should always be paired with a number.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table class="s-table">
    <thead></thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="s-table--progress">1,854</td>
            <td class="s-table--progress-bar">
                <div class="s-progress bg-white">
                    <div class="s-progress--bar bg-powder-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="67.247" style="width: 67.247%"></div>
                </div>
            </td>
            <td class="s-table--progress">43</td>
            <td class="s-table--progress-bar">
                <div class="s-progress bg-white">
                    <div class="s-progress--bar bg-orange-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72.881" style="width: 72.881%"></div>
                </div>
            </td>
        </tr></tbody>
</table>
Listing Status Owner Source Views Applies
Site Reliability Engineer, Generalist
Sydney, Australia
Running Sansa Stark stackoverflow.com 1,854
43
Senior Product Designer
New York, NY, USA
Running Robert Baratheon linkedin.com 900
15
Product Manager, Developer Products
London, England
Running Sansa Stark m.facebook.com 3
1

Bulk Actions

Generally for a checkbox input that’s placed first in the table row for bulk actions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="s-table">
    <thead>
        <tr>
            <th scope="col" class="s-table--bulk">
                <input type="checkbox" class="s-checkbox">
            </th>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="s-table--bulk">
                <input type="checkbox" class="s-checkbox">
            </td>
            <td></th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
Display Name Full Name Email
SansaStark Sansa Stark sstark@company.com
RobertBaratheon Robert Baratheon rbaratheon@company.com
Test Developer To Be Is Not A Developer Yet Test Developer To Be Is Not A Developer Yet testdevelopertobeisnotadevyet@team-mgmt.dev.company.com

Totals Row

Used mainly with data tables, the totals row increases the font-size for all cells within a row.

1
2
3
4
5
6
<table class="s-table ta-right"><tfoot class="s-table--totals"></tfoot>
</table>
Listing Views Apps App CTR
Site Reliability Engineer, Generalist 6,871 187 5.02%
Senior Product Designer 2,242 196 16.46%
Product Manager, Developer Products 3,469 229 14.9%
Totals 12,582 612 14.65%