Tables display groups of similar data as a grid-like structure:
Rows typically show individual data observations
Table typically show values of a property
For example:
A row could show a city
A column could show data that describe a city, e.g.
country
population
mayor
We could say that rows form the "nouns" and that columns form the "adjectives" of tables!
The HTML <table>
As part of semantic HTML, <table> tags allow us to make "two-dimensional lists" with headers, rows, columns and footers:
<table>
<caption>Explaining the table for accessibility</caption>
<thead>
<tr>
<th scope="col">Column 1 Header</th>
<th scope="col">Column 2 Header</th>
<th scope="col">Column 3 Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total, Column 1</td>
<td>Total, Column 2</td>
<td>Total, Column 3</td>
</tr>
</tfoot>
</table>
Breaking that down (usually a table 😂) we have:
| Tag | Nesting level | Meaning |
| <table> | 0 | the table |
| <caption> | 1 | a write-up explaining the table (usually used for screen readers for accessibility and hidden from sighted users) |
| <thead> | 1 | table heading section (usually a row to describe each column) |
| <tr> | 2 | table row |
| <th> | 3 | table heading |
| <tbody> | 1 | table body (main content) |
| <td> | 3 | table definition (data cell) |
| <tfoot> | 1 | table footer (usually a row for numerical totals) |
Web developers formerly used the <table> tag for layout purposes to divide up sections of a page; however, that has become highly frowned upon and replaced by the <div> tag!