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