FriconiX
Free collection of beautiful vector icons for your web pages.

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:

We conventionally meet structured tables (header and body) using following tags:

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:

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:

Exercice

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

See also


Last update : 01/16/2020