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

Construct a table

To construct a table we should use the structure elements explained in the previous section.
Thus, an example of a table with 2 cells across 3 rows is:

View source:

<table>
  <tr>
    <th>
        Header 1
    </th>
    <th>
        Header 2
    </th>
  </tr>
  <tr>
    <td>
        Content 1 of row 2
    </td>
    <td>
        Content 2 of row 2
    </td>
  </tr>
  <tr>
    <td>
        Content 1 of row 3
    </td>
    <td>
        Content 2 of row 3
    </td>
  </tr>
</table>

Assume that you want to group the above table using the <thead> and <tbody>. How do you think the modified code would look like?

View source:

<table>
  <thead>
    <tr>
      <th>
        Header 1
      </th>
      <th>
        Header 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Content 1 of row 2
      </td>
      <td>
        Content 2 of row 2
      </td>
    </tr>
    <tr>
      <td>
        Content 1 of row 3
      </td>
      <td>
        Content 2 of row 3
      </td>
    </tr>
  </tbody>
</table>

Assume that you want to add to the above table  <caption> and <tfoot>. How do you think the modified code would look like?

View source:

<table>
  <caption> 
          CAPTION
  </caption>
  <thead>
     <tr>
        <th>
          Header 1
        </th>
        <th>
          Header 2
        </th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>
          Content 1 of row 2
        </td>
        <td>
          Content 2 of row 2
        </td>
     </tr>
     <tr>
        <td>
          Content 1 of row 3
        </td>
        <td>
          Content 2 of row 3
        </td>
     </tr>
  </tbody>
  <tfoot>
     <tr>
        <td>
          Footer 1 of row 4
        </td>
        <td>
          Footer 2 of row 4
        </td>
     </tr>
  </tfoot>
</table>

Exercise

Exercise

1. Open your editor, create a new file and save it as exersice05.1.01.html in the folder "Exercises".
2. Modify and save the file. The browser's output should be as shown in the following table:

You should include <thead> and <tbody> tags.

Solution: