Tables cheat sheet

Tags

<table> <tr> <th scope="…">

The element that surrounds all other table Defines a row of cells in the table. Defines a heading cell to label a row or column.
elements. scope="row" — for row labels.
No other table element can be outside the scope="col" — for column labels.
<table>

<td> <thead> <tbody>

Defines a single piece of data in the table—a To group the table rows that define the To group the table rows that account for the
cell. headers. main data.
Can have many other HTML elements inside, Must have at least one <tr> inside.
including other tables.
rowspan="…" — allows merging of cells
vertically.
colspan="…" — allows merging of cells
horizontally.

<tfoot> <caption> <col>

To group the table rows that define the footer, To add a visible caption that describes the Non-visible element that defines a column for
like totals. purpose of the table. styling.
Must have at least one <tr> inside. Really good for accessibility.

<colgroup>
Non-visible element that defines a group of
columns for accessibility and styling.
Examples

Headers & footers Merging cells Captioned table

<table> <table> <table>
<thead> <tr> <caption>Important dinosaur
<tr> <td>&nbsp;</td> discoveries from history.
<th scope="col">Name</th> <th scope="col">Name</th> </caption>
<th scope="col">Price</th> <th <tr>
</tr> scope="col">Discovery</th> <th scope="col">Name</th>
</thead> </tr> <th
<tbody> <tr> scope="col">Discovery</th>
<tr> <th rowspan="2" </tr>
<td>Chocolate</td> scope="row">Plant eaters</th> <tr>
<td>$4.99</td> <td>Apatosaurus</td> <td>Apatosaurus</td>
</tr> <td>1877</td> <td>1877</td>
<tr> </tr> </tr>
<td>Candy</td> <tr> <tr>
<td>$3.99</td> <td>Stegosaurus</td> <td>Stegosaurus</td>
</tr> <td>1877</td> <td>1877</td>
</tbody> </tr> </tr>
<tfoot> <tr> </table>
<tr> <th scope="row">Meat
<th eaters</th>
scope="total">Total</th> <td>Tyrannosaurus</td>
<td>$8.89</td> <td>1905</td>
</tr> </tr>
</tfoot> </table>
</table>
CSS snippets

Style columns Remove border doubling Zebra stripe rows

<table> table { tr:nth-child(even) {
<col class="thang"> border-collapse: collapse; background-color: #e2e2e2;
<colgroup class="things"> } }
<col>
<col>
</colgroup>
⋮

.thang {
background-color: #e2e2e2;
}

.things {
background-color: #ccc;
}