Submodule 5.1: HTML on Tables

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:

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