GOV
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
| 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
<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.
| 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
<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>
Help Us Improve This Page
Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.
Feedback is anonymous.
