Tables remain the best way to structure data in rows / columns. A table is defined in HTML with the following tags:
<table>
: beginning of table</table>
: end of table<tr>
: beginning of a row (Table Row)</tr>
: end of the row<td>
: begiuunning of a cell (Table Division)</td>
: end of a cellWe conventionally meet structured tables (header and body) using following tags:
<thead>
: begining of header (Table Head)</thead>
: end of header<tbody>
: beginning of table body (Table Body)</tbody>
: end of table body<th>
: beginning of a heading cell (or group of cells)</th>
: end of heading cellsHere is an example of HTML table:
<table border="1">
<!-- Table header -->
<thead>
<tr>
<th>NAME</th>
<th>MARK</th>
</tr>
</thead>
<!-- Table body -->
<tbody>
<tr>
<th>Pierre</th>
<td>16</td>
</tr>
<tr>
<th>Paul</th>
<td>14</td>
</tr>
<tr>
<th>Jacques</th>
<td>18</td>
</tr>
</tbody>
</table>
The previous example displays the following table:
It is sometimes necessary to have a cell spanning several rows or columns. The
tags <td>
accept the attributes rowspan =" "
and colspan =" "
which respectively
specify the number of rows and columns on which the cell will spread. Here is an example :
<table border="1">
<tr>
<td colspan=2>Ingredients</td>
</tr>
<tr>
<td rowspan=3>Cake</td>
<td>Dough</td>
</tr>
<tr>
<td>Cream</td>
</tr>
<tr>
<td>Strawberries</td>
</tr>
</table>
The previous example displays the following table:
Create a table displaying the ingredients of the floating island. The table must be organized according to the following: