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:
theadtbodytfoot
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."