Tables
Options
- .noborder class in the table tag removes borders from cells
- .nostripe class in the table tag removes stripes from rows
- .scrollTable class in a wrapping div makes it mobile friendly
- .subheading (with colspan) puts background colour on a row
Basic Table
A basic table will auto-size according to its content and automatically add grey/white backgrounds on alternating rows.
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
<table>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>Table with a Header
By adding a 'thead' section at the top of your table, you can create column headers. The titles of each column header will automatically be bolded. Optionally, you can specify your column's size by adding a column width class like 'large-6', to force that column to a particular width.
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Content Goes Here | This is slightly longer content. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is very long Content that will probably wrap. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is even longer content that will probably wrap. Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
<table>
<thead>
<tr>
<th>Column 1</th>
<th class="large-6">Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is slightly longer content.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is very long Content that will probably wrap.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is even longer content that will probably wrap. Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>Table with a Caption, Header, Footer and Subheading
A table's footer must be placed immediately below the header. A caption can be placed anywhere, but will only display at the top of the table. Multiple captions will stack and should be avoided. Several subheadings can be used to separate your tabular data, as appropriate.
| Month | Savings | Expenses | Growth |
|---|---|---|---|
| Footer | $4000 | $2500 | 5% |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. | $400 | $100 | 5% |
| February | $300 | $250 | 4% |
| March | $500 | $210 | 12% |
| Midyear Subheading | |||
| July | $400 | $100 | 5% |
| August | $300 | $250 | 4% |
<table class="data large-12 columns">
<caption>Monthly savings - Table caption</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Expenses</th>
<th>Growth</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer</td>
<td>$4000</td>
<td>$2500</td>
<td>5%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</td>
<td>$400</td>
<td>$100</td>
<td>5%</td>
</tr>
<tr>
<td>February</td>
<td>$300</td>
<td>$250</td>
<td>4%</td>
</tr>
<tr>
<td>March</td>
<td>$500</td>
<td>$210</td>
<td>12%</td>
</tr>
<tr class="subheading">
<td colspan="4">Midyear Subheading</td>
</tr>
<tr>
<td>July</td>
<td>$400</td>
<td>$100</td>
<td>5%</td>
</tr>
<tr>
<td>August</td>
<td>$300</td>
<td>$250</td>
<td>4%</td>
</tr>
</tbody>
</table>Mobile-friendly (scrollable) table with a lot of content
Wrap the table in a div with a class="scrollTable". That will ensure the table will be scrollable on a mobile device.
| Month | Savings | Expenses | Growth | This | That |
|---|---|---|---|---|---|
| Footer | $4000 | $2500 | 5% | Number | More Numbers |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. | $400 | $100 | 5% | $100 | 5% |
| February | $300 | $250 | 4% | $250 | 4% |
| March | $500 | $210 | 12% | $210 | 12% |
| Midyear Subheading | |||||
| July | $400 | $100 | 5% | $100 | 5% |
| August | $300 | $250 | 4% | $250 | 4% |
<div class="scrollTable">
<table class="data large-12 columns">
<caption>Monthly savings - Table caption</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Expenses</th>
<th>Growth</th>
<th>This</th>
<th>That</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer</td>
<td>$4000</td>
<td>$2500</td>
<td>5%</td>
<td>Number</td>
<td>More Numbers</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</td>
<td>$400</td>
<td>$100</td>
<td>5%</td>
<td>$100</td>
<td>5%</td>
</tr>
<tr>
<td>February</td>
<td>$300</td>
<td>$250</td>
<td>4%</td>
<td>$250</td>
<td>4%</td>
</tr>
<tr>
<td>March</td>
<td>$500</td>
<td>$210</td>
<td>12%</td>
<td>$210</td>
<td>12%</td>
</tr>
<tr class="subheading">
<td colspan="6">Midyear Subheading</td>
</tr>
<tr>
<td>July</td>
<td>$400</td>
<td>$100</td>
<td>5%</td>
<td>$100</td>
<td>5%</td>
</tr>
<tr>
<td>August</td>
<td>$300</td>
<td>$250</td>
<td>4%</td>
<td>$250</td>
<td>4%</td>
</tr>
</tbody>
</table>
</div>