Table
The table can be used for displaying data in a structured form.
The simplest table you can make that doesn't require a lot of code looks like so:
First Name | Last Name | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
<div class="flix-table__wrap">
<table class="flix-table"><tbody><tr class="flix-table__header"><th scope="col">First Name</th><th scope="col">Last Name</th><th scope="col">Age</th></tr><tr><td scope="row">Jill</td><td>Smith</td><td>50</td></tr><tr><td scope="row">Eve</td><td>Jackson</td><td>94</td></tr></tbody></table>
</div>
Table elements
A table can broken into segments using the following elements:
thead
tbody
tfoot
When using table segments, move the __header
class name from the heading row to the thead
element so the styles are applied correctly.
According to HTML specs, the table caption
should always be the first descendant of the table, we then use CSS to position it at the bottom.
Name | Tails | Feet | Hands | Flowers |
---|---|---|---|---|
Bulbasaur | 0 | 4 | 0 | 1 |
Charmander | 1 | 2 | 2 | 0 |
Squirtle | 1 | 2 | 2 | 0 |
Totals | 2 | 8 | 4 | 1 |
<div class="flix-table__wrap">
<table class="flix-table"><caption>Pokémon features</caption><thead class="flix-table__header"><tr><th scope="col">Name</th><th scope="col">Tails</th><th scope="col">Feet</th><th scope="col">Hands</th><th scope="col">Flowers</th></tr></thead><tbody><tr><th scope="row">Bulbasaur</th><td>0</td><td>4</td><td>0</td><td>1</td></tr><tr><th scope="row">Charmander</th><td>1</td><td>2</td><td>2</td><td>0</td></tr><tr><th scope="row">Squirtle</th><td>1</td><td>2</td><td>2</td><td>0</td></tr></tbody><tfoot class="flix-table__footer"><tr><th scope="row">Totals</th><td>2</td><td>8</td><td>4</td><td>1</td></tr></tfoot></table>
</div>
Scopes
The declaration of the scope
attribute on the table headings (the th
tags) helps people who are using screen readers while they navigate the table. If your table has headers, please include the adequate scope for them.
The scope="col"
should be applied to the cells inside the <thead>
and identify the data of a column. E.g.: "This column has First Names".
The scope="row"
should be applied in header cells that identify the row (if there are any). E.g.: "This row has Jill's data."