Submodule 1.2: HTML on Tables

  • The elements of a table
  • Construction of a table

Understand the elements of a table

The structure of a table is defined in HTML by the <table> tag. Each row of cells is defined by the <tr> tag.

Tables have headers which are defined by the <th> tag and the body of the table, the cells, are defined by the <td> tag.

Moreover, the different parts of a table can be grouped together. The headers can be grouped together using the <thead> tag and the main-body content using the <tbody> tag.

Tables can also have footers which are defined by the <tfoot> tag.
Ew can also add a caption using the tag <caption>

TABLE STRUCTURE

The HTML code:

<table>
  <caption> STRUCTURE</caption>
  <thead>
    <tr> <th>HHH</th> <th>HHH</th> <th>HHH</th> </tr>
  </thead>
  <tfoot>
    <tr> <td>fff</td> <td>fff</td> <td>fff</td> </tr>
  </tfoot>
  <tbody>
    <tr> <td>CCC</td> <td>CCC</td> <td>CCC</td> </tr>
    <tr> <td>CCC</td> <td>CCC</td> <td>CCC</td> </tr>
  </tbody>
</table>


will create a page displayed as:

Table HTML

Grouping in terms of context can be useful for applying different styles to the different sections. 
For more information: https://www.w3schools.com/tags/tag_thead.asp