Submodule 5.1: HTML on Tables

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>