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:

<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>    

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)