Lesson 1.10. HTML tables

Syntax

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 cell

We 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 cells

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

Try it online

Formatting tables

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:

Try it online

Exercice

Create a table displaying the ingredients of the floating island. The table must be organized according to the following:

Try online

Solution

Lesson 1.9 Summary Lesson 1.11

Lesson 1.10. HTML tables

Syntax

Formatting tables

Exercice

See also