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>
Feedback is anonymous.
