HTML <table> tags

Tables

Tables display groups of similar data as a grid-like structure:

• Rows typically show data observations of individual phenomena
• Columns typically show values that describe those individuals

For example:

• A row could show a city
• A column could show data that describes each city, e.g.:
  • country
  • population
  • mayor

Structure

As part of semantic HTML, <table> tags allow us to make "two-dimensional lists" with headers, rows, columns and footers:

1<table>
2  <caption>Explaining the table for accessibility</caption>
3  <thead>
4    <tr>
5      <th scope="col">Column 1 Header</th>
6      <th scope="col">Column 2 Header</th>
7      <th scope="col">Column 3 Header</th>
8    </tr>
9  </thead>
10  <tbody>
11    <tr>
12      <td>Row 1, Column 1</td>
13      <td>Row 1, Column 2</td>
14      <td>Row 1, Column 3</td>
15    </tr>
16    <tr>
17      <td>Row 2, Column 1</td>
18      <td>Row 2, Column 2</td>
19      <td>Row 2, Column 3</td>
20    </tr>
21  </tbody>
22  <tfoot>
23    <tr>
24      <td>Total, Column 1</td>
25      <td>Total, Column 2</td>
26      <td>Total, Column 3</td>
27    </tr>
28  </tfoot>
29</table>    

Elements

We can see each tag as part of a hierarchy of tags:

Attributes

One attribute to note is scope for table headings; these simply denote whether the heading refers to:

• items that appear vertically below that heading as a column (col)
• items that follow that heading as a row (row)