17 #Tables Tables
table
Basic table styles are included in the core. Most of the advanced options here require the tables stylesheet. This are indicated where necessary below.
Note the table class is necessary for proper styling.
| thead | three | blind | mice |
| March 2014 | 123 | 59,323 | 0 |
|---|---|---|---|
| June 2014 | 321 | 10,001 | 12 | tfoot | 444 | 69,324 | 12 |
<table class="table">
<thead>
<tr>
<td>thead</td>
<td>three</td>
<td>blind</td>
<td>mice</td>
</tr>
</thead>
<tbody>
<tr>
<th>March 2014</th>
<td>123</td>
<td>59,323</td>
<td>0</td>
</tr>
<tr>
<th>June 2014</th>
<td>321</td>
<td>10,001</td>
<td>12</td>
</tr>
</tbody>
<tfoot>
<th>tfoot</th>
<td>444</td>
<td>69,324</td>
<td>12</td>
</tr>
</tfoot>
</table>17.1 #Tables.Alignment Alignment
17.1.1 #Tables.Alignment.Text Text Alignment
table-align-left, table-align-center, table-align-right
The alignment classes may be applied to the table or any of its child elements to align <td> accordingly.
This does not align <th> cells. To align them, the table-align-* class must be applied directly to the cell element.
| Eenie | 500.00 | 500.00 |
|---|---|---|
| Meenie | 1.00 | 1.00 |
| Miney | 53,780.00 | 53,780.00 |
<table class="table table-align-right">
<tbody>
<tr>
<th>Eenie</th>
<td class="num-dollar">500.00</td>
<td class="num-dollar">500.00</td>
</tr>
<tr>
<th>Meenie</th>
<td class="num-dollar">1.00</td>
<td class="num-dollar">1.00</td>
</tr>
<tr>
<th>Miney</th>
<td class="num-dollar">53,780.00</td>
<td class="num-dollar">53,780.00</td>
</tr>
</tbody>
</table>17.1.2 #Tables.Alignment.Vertical Vertical alignment
table-v-align-top, table-valign-middle, table-valign-bottom
Use these classes to vertically align table content. These classes may be applied to the whole table or individual td/th elements.
| Multi line content |
One liner |
| Multi line content |
Bottom aligned |
<table class="table table-valign-middle">
<tbody>
<tr>
<td>Multi<br>line<br>content</td>
<td>One liner</td>
</tr>
<tr>
<td>Multi<br>line<br>content</td>
<td class="table-valign-bottom">Bottom aligned</td>
</tr>
</tbody>
</table>| thead | three | blind | mice |
| March 2014 | 123 | 59,323 | 0 |
|---|---|---|---|
| June 2014 | 321 | 10,001 | 12 |
<table class="table table-compact">
<thead>
<tr>
<td>thead</td>
<td>three</td>
<td>blind</td>
<td>mice</td>
</tr>
</thead>
<tbody>
<tr>
<th>March 2014</th>
<td>123</td>
<td>59,323</td>
<td>0</td>
</tr>
<tr>
<th>June 2014</th>
<td>321</td>
<td>10,001</td>
<td>12</td>
</tr>
</tbody>
</table>17.3.1 #Tables.Helpers.Fixed Fixed Layout tables
table-layout-fixed
Use table-layout-fixed to force all columns of the table to be equal widths. Be judicious with this, but it can be helpful to make a table appear more centered if the browser gives too much space to a column with wide content.
| 01 | 02 | Column with veeeeeeeeeeeeeeery wide content |
<table class="table table-layout-fixed">
<tr>
<td>01</td>
<td>02</td>
<td>Column with veeeeeeeeeeeeeeery wide content</td>
</tr>
</table>17.3.2 #Tables.Helpers.Preheading Preheading rows tables
table-preheading
Useful in conjunction with partitioned columns.
| Q1 | Q2 | Q3 | Q4 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
<table class="table table-partitioned-3col">
<thead>
<tr class="table-preheading">
<th colspan="3">Q1</td>
<th colspan="3">Q2</td>
<th colspan="3">Q3</td>
<th colspan="3">Q4</td>
</tr>
<tr>
<td>Jan</td><td>Feb</td><td>Mar</td>
<td>Apr</td><td>May</td><td>Jun</td>
<td>Jul</td><td>Aug</td><td>Sep</td>
<td>Oct</td><td>Nov</td><td>Dec</td>
</tr>
</thead>
</table>17.3.3 #Tables.Helpers.Rowspan Using Rowspans tables
table-no-first-cell
Left padding is removed from the first cell in each row. This causes an misalignment of the second column when the first cell of a preceeding row has a rowspan. To correct this, add table-no-first-cell to the row without a cell in the first column.
| Colspan | Content one |
| Content two |
<table class="table">
<tr>
<td rowspan="2">Colspan</td>
<td>Content one</td>
</tr>
<tr class="table-no-first-cell">
<td>Content two</td>
</tr>
</table>17.3.4 #Tables.Helpers.Subheadings Subheadings tables
table-subheading, table-master-footer
Use multiple <tbody> elements to group the sections of the table logically.
Apply the table-subheading class to the first row of each tbody.
Sometimes, a grand totals row is necessary after several subheading sections.
Use the table-master-footer class to set it apart.
| English | |||
| Numbers | One | Two | Three |
|---|---|---|---|
| Spanish | |||
| Numeros | Uno | Dos | Tres |
| Values | 1 | 2 | 3 |
<table class="table">
<tbody>
<tr class="table-subheading">
<td colspan="4">English</td>
</tr>
<tr>
<th>Numbers</th> <td>One</td> <td>Two</td> <td>Three</td>
</tr>
</tbody>
<tbody>
<tr class="table-subheading">
<td colspan="4">Spanish</td>
</tr>
<tr>
<th>Numeros</th> <td>Uno</td> <td>Dos</td> <td>Tres</td>
</tr>
</tbody>
<tfoot>
<tr class="table-master-footer">
<td>Values</td> <td>1</td> <td>2</td> <td>3</td>
</tr>
</tfoot>
</table>17.3.5 #Tables.Helpers.Wordbreak Force wordbreaking tables
table-wordbreak
Add to a table or an individual cell to force long words or numbers to wrap.
| The longest English word is pneumonoultramicroscopicsilicovolcanoconiosis |
<table class="table table-wordbreak">
<tr><td>The longest English word is pneumonoultramicroscopicsilicovolcanoconiosis</td></tr>
</table>17.4 #Tables.Highlighted Highlighted Rows
is-highlighted
| Row | Amount | Fake Latin | |
| Highlighted row | 100.24 | Lorem ipsum | |
| Regular row | 200.33 | Dolor sit amet |
<table class="table">
<thead>
<tr>
<td>Row</td>
<td></td>
<td>Amount</td>
<td>Fake Latin</td>
</tr>
<thead>
<tbody>
<tr class="is-highlighted">
<td>Highlighted row</td>
<td><i class="sprite sprite-featured" title="featured"></i></td>
<td>100.24</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Regular row</td>
<td></td>
<td>200.33</td>
<td>Dolor sit amet</td>
</tr>
</tbody>
</table>| thead | three | blind | mice |
| March 2014 | 123 | 59,323 | 0 |
|---|---|---|---|
| June 2014 | 321 | 10,001 | 12 | tfoot | 444 | 69,324 | 12 |
<table class="table table-inverse">
<thead>
<tr>
<td>thead</td>
<td>three</td>
<td>blind</td>
<td>mice</td>
</tr>
</thead>
<tbody>
<tr>
<th>March 2014</th>
<td>123</td>
<td>59,323</td>
<td>0</td>
</tr>
<tr>
<th>June 2014</th>
<td>321</td>
<td>10,001</td>
<td>12</td>
</tr>
</tbody>
<tfoot>
<th>tfoot</th>
<td>444</td>
<td>69,324</td>
<td>12</td>
</tr>
</tfoot>
</table>17.6 #Tables.Mobile Mobile Layout tables
table-mobile
To make a table restructure itself vertically for narrow screens, add the table-mobile class. This also requires the addition of data-label to each cell in the table body.
| Date | Name | ID | value |
| March 2014 | Foo | 123 | 59,323 |
|---|---|---|---|
| June 2014 | Bar | 321 | 10,001 |
| July 2014 | Baz | 241 | 11,222 | tfoot | 444 | 69,324 | 12 |
<table class="table table-mobile">
<thead>
<tr>
<td>Date</td>
<td>Name</td>
<td>ID</td>
<td>value</td>
</tr>
</thead>
<tbody>
<tr>
<th data-label="Date">March 2014</th>
<td data-label="Name">Foo</td>
<td data-label="ID">123</td>
<td data-label="value">59,323</td>
</tr>
<tr>
<th data-label="Date">June 2014</th>
<td data-label="Name">Bar</td>
<td data-label="ID">321</td>
<td data-label="value">10,001</td>
</tr>
<tr>
<th data-label="Date">July 2014</th>
<td data-label="Name">Baz</td>
<td data-label="ID">241</td>
<td data-label="value">11,222</td>
</tr>
</tbody>
</tbody>
<tfoot>
<th>tfoot</th>
<td>444</td>
<td>69,324</td>
<td>12</td>
</tr>
</tfoot>
</table>17.7 #Tables.Partitioned Partitioned Columns tables
table-partitioned-2col, table-partitioned-3col
Use table-partitioned-* classes to add vertical borders between groups of columns.
Using <th> cells in the left column shifts the grouping to the right.
| One | Two | Three | Four | Five | Six |
| One | Two | Three | Four | Five | Six |
table-partitioned-2col
| One | Two | Three | Four | Five | Six |
| One | Two | Three | Four | Five | Six |
table-partitioned-3col
| One | Two | Three | Four | Five | Six |
| One | Two | Three | Four | Five | Six |
<table class="table [modifier class]">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
</table>| Numbers: | One | Two | Three | Four | Five | Six |
|---|---|---|---|---|---|---|
| Numerals: | One | Two | Three | Four | Five | Six |
<table class="table table-partitioned-2col">
<tr>
<th>Numbers:</th>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<th>Numerals:</th>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
</table>17.7.1 #Tables.Partitioned.Custom Custom Partitioning tables
table-partitioned
If you need more specific control, add the table-partitioned class
to individual cells to add a border to their right side.
| One | Two | Three | Four | Five | Six |
<table class="table">
<tr>
<td class="table-partitioned">One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td class="table-partitioned">Five</td>
<td>Six</td>
</tr>
</table>17.8 #Tables.Sorting Sorting tables
table-sort, table-sort-asc, table-sort-desc
Use on user-sortable tables to indicate feedback to the user.
| Sortable column | Sorted ascending | Sorted descending | 1 | 2 | 3 |
<table class="table">
<thead>
<td class="table-sort">Sortable column</td>
<td class="table-sort table-sort-asc">Sorted ascending</td>
<td class="table-sort table-sort-desc">Sorted descending</td>
</thead>
<tbody>
<td>1</td>
<td>2</td>
<td>3</td>
</tbody>
</table>17.9 #Tables.Special Special Tables tables
Special table types. These are designed for very specific purposes, and should generally not be used elsewhere.
<table class="table table-bigdata">
<thead>
<tr>
<td>Contract</td>
<td>Last</td>
<td>Time (GMT)</td>
<td>% Change</td>
<td>Volume</td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">
<i class="sprite sprite-chart"></i>Mar14
</a></td>
<td>100.83</td>
<td class="small">3/20/2014<br>6:19 PM</td>
<td>0.260</td>
<td>214.600</td>
</tr>
<tr class="is-selected">
<td><a href="#">
<i class="sprite sprite-chart-selected"></i>Jul14
</a></td>
<td>92.53</td>
<td class="small">3/20/2014<br>6:19 PM</td>
<td>0.260</td>
<td>214.600</td>
</tr>
</tbody>
</table>17.9.2 #Tables.Special.Market-Data Market Data tables
market-data, market-data-date, market-data-chart
| Futures | Code | Month | Last | Change | Intraday |
| Brent | B | Jun 14 | 1861.25 | +2.00 |  |
|---|---|---|---|---|---|
| WTI | B | Jun 14 | 1861.25 | +2.00 | |
| Russel 2000 | RU | Jun 14 | 1861.25 | +2.00 | |
| Gas oil | GO | Jun 14 | 1861.25 | +2.00 | |
<table class="market-data">
<thead>
<tr>
<td>Futures</td>
<td>Code</td>
<td>Month</td>
<td>Last</td>
<td>Change</td>
<td>Intraday</td>
</tr>
</thead>
<tbody>
<tr>
<th><a href="#">Brent</a></th>
<td>B</td>
<td class="market-data-date">Jun 14</td>
<td>1861.25</td>
<td>+2.00</td>
<td class="market-data-chart"><img src="../images/docs/sparkline.png"/></td>
</tr>
<tr>
<th><a href="#">WTI</a></th>
<td>B</td>
<td class="market-data-date">Jun 14</td>
<td>1861.25</td>
<td>+2.00</td>
<td class="market-data-chart"><img src="../images/docs/sparkline.png"/></td>
</tr>
<tr>
<th><a href="#">Russel 2000</a></th>
<td>RU</td>
<td class="market-data-date">Jun 14</td>
<td>1861.25</td>
<td>+2.00</td>
<td class="market-data-chart"><img src="../images/docs/sparkline.png"/></td>
</tr>
<tr>
<th><a href="#">Gas oil</a></th>
<td>GO</td>
<td class="market-data-date">Jun 14</td>
<td>1861.25</td>
<td>+2.00</td>
<td class="market-data-chart"><img src="../images/docs/sparkline.png"/></td>
</tr>
</tbody>
</table>17.9.3 #Tables.Special.Trading-Hours Trading Hours tables
trading-hours
For use in Product Specs. This is a three-column table with a specific layout:
| City | Trading | Pre-open |
| New York | 9:00 PM-2:20 PM * 12:00-14:20 |
7:30 PM 19:30 |
|---|---|---|
| London | 1:00 AM-6:20 PM 01:00-18:20 |
11:30 PM 19:30 |
| Singapore | 9:00 AM-2:20 AM * 09:00-02:20 |
7:30 AM 07:30 |
<table class="trading-hours">
<thead>
<tr>
<td>City</td>
<td>Trading</td>
<td>Pre-open</td>
</tr>
</thead>
<tbody>
<tr>
<th>New York</th>
<td>9:00 PM-2:20 PM *<br>12:00-14:20</td>
<td>7:30 PM<br>19:30</td>
</tr>
<tr>
<th>London</th>
<td>1:00 AM-6:20 PM<br>01:00-18:20</td>
<td>11:30 PM<br>19:30</td>
</tr>
<tr>
<th>Singapore</th>
<td>9:00 AM-2:20 AM *<br>09:00-02:20</td>
<td>7:30 AM<br>07:30</td>
</tr>
</tbody>
</table>