Tables

Using tables for tabular data

Overview

Tables on stlouis-mo.gov should be used for tabular data, not for general content layout. Tables should have captions and easy-to-understand headings (with a defined scope) to help with usability and accessibility. Learn more about creating accessible tables.

When creating a data table, use the class .data. To add row stripes, add the class .striped

Horizontal Feedback Graph Module Parameters
Parameter Type Default Description
happyLabel String Happy Label for the first (green) item in the dataset
happyURL String   Optional URL that the label will link to
happyNumber Numeric 0 First item in the dataset
borderlineLabel String Borderline Label for the second (yellow) item in the dataset
borderlineURL String   Optional URL that the label will link to
borderlineNumber Numeric 0 Second item in the dataset
unhappyLabel String Unhappy Label for the third (red) item in the dataset
unhappyURL String   Optional URL that the label will link to
unhappyNumber Numeric 0 Third item in the dataset
Data table with stripes (97 lines)
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<table class="data striped"> 
    <caption> 
        Horizontal Feedback Graph Module Parameters 
    </caption> 
 
    <thead> 
        <tr> 
            <th scope="col">Parameter</th> 
            <th scope="col">Type</th> 
            <th scope="col">Default</th> 
            <th scope="col">Description</th> 
        </tr> 
    </thead> 
 
    <tbody> 
        <tr> 
            <td>happyLabel</td> 
            <td>String</td> 
            <td>Happy</td> 
            <td> 
                Label for the first (green) item in the dataset 
            </td> 
        </tr> 
 
        <tr> 
            <td>happyURL</td> 
            <td>String</td> 
            <td> </td> 
            <td> 
                Optional URL that the label will link to 
            </td> 
        </tr> 
 
        <tr> 
            <td>happyNumber</td> 
            <td>Numeric</td> 
            <td>0</td> 
            <td> 
                First item in the dataset 
            </td> 
        </tr> 
 
        <tr> 
            <td>borderlineLabel</td> 
            <td>String</td> 
            <td>Borderline</td> 
            <td> 
                Label for the second (yellow) item in the dataset 
            </td> 
        </tr> 
 
        <tr> 
            <td>borderlineURL</td> 
            <td>String</td> 
            <td> </td> 
            <td> 
                Optional URL that the label will link to 
            </td> 
        </tr> 
 
        <tr> 
            <td>borderlineNumber</td> 
            <td>Numeric</td> 
            <td>0</td> 
            <td> 
                Second item in the dataset 
            </td> 
        </tr> 
 
        <tr> 
            <td>unhappyLabel</td> 
            <td>String</td> 
            <td>Unhappy</td> 
            <td> 
                Label for the third (red) item in the dataset 
            </td> 
        </tr> 
 
        <tr> 
            <td>unhappyURL</td> 
            <td>String</td> 
            <td> </td> 
            <td> 
                Optional URL that the label will link to 
            </td> 
        </tr> 
 
        <tr> 
            <td>unhappyNumber</td> 
            <td>Numeric</td> 
            <td>0</td> 
            <td> 
                Third item in the dataset 
            </td> 
        </tr> 
    </tbody> 
</table>

Vertical Tables

To create a table with headings on the left instead of on top, add the class .vertical.

Trail Information
Length 15.4 mile loop (round trip)
Difficulty Moderate
Elevation Gain 30 feet
Activity Pedestrian traffic only
Amenities Two campgrounds along the route
Vertical table (30 lines)
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
29
30
<table class="data vertical"> 
    <caption> 
        <span class="glyphicons glyphicons-tree-conifer"></span> 
        Trail Information 
    </caption> 
    <tr> 
        <th scope="row">Length</th> 
        <td>15.4 mile loop (round trip)</td> 
    </tr> 
    <tr> 
        <th scope="row">Difficulty</th> 
        <td>Moderate</td> 
    </tr> 
    <tr> 
        <th scope="row">Elevation Gain</th> 
        <td>30 feet</td> 
    </tr> 
    <tr> 
        <th scope="row">Activity</th> 
        <td>Pedestrian traffic only</td> 
    </tr> 
    <tr> 
        <th scope="row">Amenities</th> 
        <td> 
            <a href="#"> 
                Two campgrounds along the route 
            </a> 
        </td> 
    </tr> 
</table>

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.