Tables
Tables look like...
<table> - Has a table class
<thead> - Has a table__header class
<tr> - Has a table__row class
<th> - Has a table_cell class
<tbody>
<tr> - Has a table__row class
<td> - Has a table_cell class
Be sure to resize the page to see the table's limitations.
Example
| The Herculoids | Spiderman | Thundercats | Justice League |
|---|---|---|---|
| Zandor | Firestar | Lion 'O | Black Canary |
| Tara | Iceman | Cheetara | Firestorm |
| Gloop | Lightwave | Pumyra | Zatanna |
| Gleep | Videoman | Snarf | Wonder Woman |
Markup: tables/tables.html
<table class="table">
<thead class="table__header">
<tr class="table__row">
<th class="table__cell">The Herculoids</th>
<th class="table__cell">Spiderman</th>
<th class="table__cell">Thundercats</th>
<th class="table__cell">Justice League</th>
</tr>
</thead>
<tbody>
<tr class="table__row">
<td class="table__cell">Zandor</td>
<td class="table__cell">Firestar</td>
<td class="table__cell">Lion 'O</td>
<td class="table__cell">Black Canary</td>
</tr>
<tr class="table__row">
<td class="table__cell">Tara</td>
<td class="table__cell">Iceman</td>
<td class="table__cell">Cheetara</td>
<td class="table__cell">Firestorm</td>
</tr>
<tr class="table__row">
<td class="table__cell">Gloop</td>
<td class="table__cell">Lightwave</td>
<td class="table__cell">Pumyra</td>
<td class="table__cell">Zatanna</td>
</tr>
<tr class="table__row">
<td class="table__cell">Gleep</td>
<td class="table__cell">Videoman</td>
<td class="table__cell">Snarf</td>
<td class="table__cell">Wonder Woman</td>
</tr>
</tbody>
</table>
Source:
tables/_tables.scss, line 35
Table Width
Use colspans to adjust the width of table cells. Make sure that a row's cell colspans equal 24.
Example
| The Herculoids | Spiderman | Thundercats | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Zandor | Firestar | Lion 'O | |||||||||||||||||||||
| Tara | Iceman | Cheetara | |||||||||||||||||||||
| Gloop | Lightwave | Pumyra | |||||||||||||||||||||
| Gleep: gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep gleep | Videoman | Snarf | |||||||||||||||||||||
Markup: tables/table-width.html
<table class="table">
<thead class="table__header">
<tr class="table__row">
<th colspan="10" class="table__cell">The Herculoids</th>
<th colspan="7" class="table__cell">Spiderman</th>
<th colspan="7" class="table__cell">Thundercats</th>
</tr>
</thead>
<tbody>
<tr class="table__row">
<td colspan="10" class="table__cell">Zandor</td>
<td colspan="7" class="table__cell">Firestar</td>
<td colspan="7" class="table__cell">Lion 'O</td>
</tr>
<tr class="table__row">
<td colspan="10" class="table__cell">Tara</td>
<td colspan="7" class="table__cell">Iceman</td>
<td colspan="7" class="table__cell">Cheetara</td>
</tr>
<tr class="table__row">
<td colspan="10" class="table__cell">Gloop</td>
<td colspan="7" class="table__cell">Lightwave</td>
<td colspan="7" class="table__cell">Pumyra</td>
</tr>
<tr class="table__row">
<td colspan="10" class="table__cell">
Gleep: gleep gleep gleep gleep gleep gleep gleep
gleep gleep gleep gleep gleep gleep gleep gleep gleep
gleep gleep gleep
</td>
<td colspan="7" class="table__cell">Videoman</td>
<td colspan="7" class="table__cell">Snarf</td>
</tr>
</tbody>
</table>
Source:
tables/_tables.scss, line 55
Example
Add the table__row--hoverable class to a table row for hoverable rows
| The Herculoids | Spiderman | Thundercats |
|---|---|---|
| Zandor | Firestar | Lion 'O |
| Tara | Iceman | Cheetara |
| Gloop | Lightwave | Pumyra |
Add the table__row--stripe class to a table row for striped rows
| The Herculoids | Spiderman | Thundercats |
|---|---|---|
| Zandor | Firestar | Lion 'O |
| Tara | Iceman | Cheetara |
| Gloop | Lightwave | Pumyra |
Markup: tables/table-rows.html
<p>Add the <strong>table__row--hoverable</strong> class to a table row for hoverable rows</p>
<table class="table">
<thead class="table__header">
<tr class="table__row">
<th class="table__cell">The Herculoids</th>
<th class="table__cell">Spiderman</th>
<th class="table__cell">Thundercats</th>
</tr>
</thead>
<tbody>
<tr class="table__row table__row--hoverable">
<td class="table__cell">Zandor</td>
<td class="table__cell">Firestar</td>
<td class="table__cell">Lion 'O</td>
</tr>
<tr class="table__row table__row--hoverable">
<td class="table__cell">Tara</td>
<td class="table__cell">Iceman</td>
<td class="table__cell">Cheetara</td>
</tr>
<tr class="table__row table__row--hoverable">
<td class="table__cell">Gloop</td>
<td class="table__cell">Lightwave</td>
<td class="table__cell">Pumyra</td>
</tr>
</tbody>
</table>
<p>Add the <strong>table__row--stripe</strong> class to a table row for striped rows</p>
<table class="table">
<thead class="table__header">
<tr class="table__row">
<th class="table__cell">The Herculoids</th>
<th class="table__cell">Spiderman</th>
<th class="table__cell">Thundercats</th>
</tr>
</thead>
<tbody>
<tr class="table__row table__row--stripe">
<td class="table__cell">Zandor</td>
<td class="table__cell">Firestar</td>
<td class="table__cell">Lion 'O</td>
</tr>
<tr class="table__row table__row--stripe">
<td class="table__cell">Tara</td>
<td class="table__cell">Iceman</td>
<td class="table__cell">Cheetara</td>
</tr>
<tr class="table__row table__row--stripe">
<td class="table__cell">Gloop</td>
<td class="table__cell">Lightwave</td>
<td class="table__cell">Pumyra</td>
</tr>
</tbody>
</table>
Source:
tables/_tables.scss, line 64