• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

Tables

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

While tables are essential for organizing information, they're a bit tricky to build in HTML: this is why I've waited until now to tell you about them. Indeed, you'll have to embed new HTML tags in a specific order.

We're going to begin by building basic tables and then gradually go on to more complex aspects: merging cells, dividing into multiple sections... We're also going to find out about table-related CSS properties, used to customize their appearance.

A simple table

The first tag you need to know about is <table> </table>. It's this tag that specifies the start and end of a table.

This tag is a block tag, so it has to be placed outside a paragraph. Example:

<p>This is a paragraph before the table.</p>

<table>
   <!-- Insert here your table content -->
</table>

<p>This is a paragraph after the table.</p>

OK, so what do you write inside the table?

At this point, get ready for a new avalanche of tags.
To start off slowly, here are two very important new tags:

  • <tr> </tr>: specifies the start and end of a table row;

  • <td> </td>: specifies the start and end of the cell contents.

In HTML, a table is built row by row. In each row (<tr>), the contents of the cells is specified (<td>).
A table is basically constructed as shown in the figure below.

A table, with cells contained in lines
A table, with cells contained in lines

It has a row tag (<tr>) which includes a group of cells (<td>).
For example, if I want to build a table with two rows, with three cells per row (thus three columns), I would type this:

<table>
   <tr>
       <td>Carmen</td>
       <td>33 years old</td>
       <td>Spain</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 years old</td>
       <td>United States</td>
   </tr>
</table>

The result is a bit depressing (figure below).

A table without borders
A table without borders

You call that a table?
The text follows on continuously and there aren't even any borders!

Yes, a table without CSS seems pretty empty. And rightly so, since adding borders is very simple. You already know the corresponding CSS code!

td /* All table cells... */
{
    border: 1px solid black; /* will have a 1px border */
}

And here's the result in the figure below.

Each cell has its own border
Each cell has its own border

Um, it's not yet as perfect as you'd what. Indeed, we'd really like only one border between two cells and that's not the case here.

Fortunately, there is a CSS property specific to tables, border-collapse, which means "stick borders together".
This property can take two values:

  • collapse: the borders are stuck together; this is the effect we're looking for here;

  • separate: the borders will be split (default value).

table
{
    border-collapse: collapse; /* The table borders will be stuck together (nicer looking) */
}
td
{
    border: 1px solid black;
}

The figure below shows the result obtained.

The borders are stuck together
The borders are stuck together

Now that's better!

The header row

Now that we've what we wanted, we're going to add the table's header row. In the example below, the headers are "Name", "Age" and "Country".
The header row is created with a <tr> tag as we've done so far, but the cells it contains are this time framed by <th> tags and not <td>!

<table>
   <tr>
       <th>Name</th>
       <th>Age</th>
       <th>Country</th>
   </tr>

    <tr>
       <td>Carmen</td>
       <td>33 years old</td>
       <td>Spain</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 years old</td>
       <td>United States</td>
   </tr>
</table>

The header row is easy to recognize for two reasons:

  • the cells are <th> tags rather than the usual <td> tags;

  • it's the first row of the table (it has to be pointed out, even though it may be obvious).

As the cell name is slightly different for the header, remember to update the CSS code to tell it to apply a border around normal cells and the header (figure below).

table
{
    border-collapse: collapse;
}
td, th /* Assign a border to the td AND th tags */
{
    border: 1px solid black;
}
A table with a header
A table with a header

As you can see, your browser has bolded the text in the header cells. Although this is what browsers usually do, you can, if you want, change this using CSS: change the background color, font, borders, etc. of the header cells.

Table title

Normally, all tables must have a title. The title quickly informs the visitor about the table content.
Our example is a just list of people... but so what? What does it represent? Without the table title, we're a bit lost, as you can see.

Fortunately, there's <caption>!
This tag is placed right at the start of the table, just before the header. It's the tag that contains the table title (figure below):

<table>
   <caption>Passengers of flight 377</caption>

    <tr>
       <th>Name</th>
       <th>Age</th>
       <th>Country</th>
   </tr>
    <tr>
       <td>Carmen</td>
       <td>33 years old</td>
       <td>Spain</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 years old</td>
       <td>United States</td>
   </tr>
</table>
A table with a title
A table with a title

Ah, that's a bit clearer!

Note that you can change the title position using the CSS caption-side property which can take two values:

  • top: the title will be placed above the table (as default);

  • bottom: the title will be placed below the table.

A structured table

We have learned how to build small, simple tables. While these small tables are sufficient in most cases, you may sometimes need to build more complex tables.

We are going to find out about two special techniques:

  • Large tables can be divided into three parts:

    • Header;

    • Table body;

    • Table footer.

  • For some tables, you may need to merge cells together.

Dividing up a big table

If your table is fairly big, it's best to divide it into several parts. For this purpose, HTML tags are used to define the three "fields" of the table:

  • the header (at the top): is defined with the tags <thead></thead>;

  • the body (in the center): is defined with the tags <tbody></tbody>;

  • the table footer (at the bottom): is defined with the tags <tfoot></tfoot>.

What should you put in the table footer? If it's a long table, you'll usually copy the header cells. This allows you to see what each column refers to, even at the bottom of the table. Basically, a table is divided into three parts as shown in the figure below.

A table split up into several parts
A table split up into several parts

It's a bit confusing, but it's advisable to write the tags in the following order:

  1. <thead>

  2. <tfoot>

  3. <tbody>

So, in the code, you define first the top part, then the bottom part, and finally the main part (<tbody>). Don't worry, the browser will take care of displaying each element in the right place.

So here's the code to be entered to build the table in three parts:

<table>
   <caption>Passagers du vol 377</caption>

   <thead> <!-- Passengers of flight 377 -->
       <tr>
           <th>Name</th>
           <th>Age</th>
           <th>Country</th>
       </tr>
   </thead>

   <tfoot> <!-- Table footer -->
       <tr>
           <th>Name</th>
           <th>Age</th>
           <th>Country</th>
       </tr>
   </tfoot>

   <tbody> <!-- Table body -->
       <tr>
           <td>Carmen</td>
           <td>33 years old</td>
           <td>Spain</td>
      </tr>
      <tr>
           <td>Michelle</td>
           <td>26 years</td>
           <td>United States</td>
       </tr>
       <tr>
           <td>François</td>
           <td>43 years old</td>
           <td>France</td>
       </tr>
       <tr>
           <td>Martine</td>
           <td>34 years old</td>
           <td>France</td>
       </tr>
       <tr>
           <td>Jonathan</td>
           <td>13 years old</td>
           <td>Australia</td>
       </tr>
       <tr>
           <td>Xu</td>
           <td>19 years old</td>
           <td>China</td>
       </tr>
   </tbody>
</table>

3, 2, 1… Merge!

In some complex tables, you'll need to "merge" the cells together.
An example of merging? The table in the figure below provides a list of films and their intended audience.

A table containing film titles and their audience
A table containing film titles and their audience

For the last film, you can see that the cells have been merged into one This is exactly the effect we are trying to achieve.

To merge, you add an attribute to the tag <td>. There are two types of merging:

    • Merging of columns: this is what I've just done in this example. The cells are merged horizontally.

The colspan attribute is used.

    • Merging of rows: in this case, two rows are merged into one. The cells are merged vertically.

The rowspan attribute is used.

As you know, you have to give a value to the attribute (whether it be colspan or rowspan). You have to specify the number of cells to be merged together. In our example, we merged two cells: the cell of the "For children?" column the cell of the "For adolescents?" column ». We thus have to enter:

<td colspan="2">

… which means: "This cell is the merging of two cells." You can merge several cells at once (three, four, five, etc. as much as you want).

Here's the HTML code that merges the corresponding cells of the table above:

<table>
   <tr>
       <th>Film title</th>
       <th>For children?</th>
       <th>For adolescents?</th>
   </tr>
   <tr>
       <td>Chainsaw massacre</td>
       <td >No, too violent</td>
       <td>Yes</td>
   </tr>
   <tr>
       <td>The care bears go skiing</td>
       <td>Yes, suitable</td>
       <td>Not violent enough...</td>
   </tr>
   <tr>
       <td>Lucky Luke, goes it alone</td>
       <td colspan="2">For the whole family!</td>
   </tr>
</table>

Important note: you can see that line 19 only contains two cells instead of three (there are only two tags <td>). This is quite normal as I merged the last two cells together. The <td colspan="2"> specifies that this cell takes the place of two cells at a time.

And how do you proceed for vertical merging with rowspan?

This is a bit more complicated. For our example, we going to "reverse" our table order: instead of putting the film titles on the left, we'll put them at the top.
It's another way of seeing the table: instead of building height-wise, we can build it length-wise.

In this case colspan is no longer suitable and rowspan should be used:

<table>
   <tr>
       <th>Film title</th>
       <td>Chainsaw massacre</td>
       <td>The care bears go skiing</td>
       <td>Lucky Luke, goes it alone</td>
   </tr>
   <tr>
       <th>For children?</th>
       <td>No, too violent</td>
       <td>Yes, suitable</td>
       <td rowspan="2">For the whole family!</td>
   </tr>
   <tr>
       <th>For adolescents?</th>
       <td>Yes</td>
       <td>Not violent enough...</td>
   </tr>
</table>

Result: the cells are merged vertically (figure below)!

The cells have been vertically merged
The cells have been vertically merged

Summing up

  • A table is inserted using the <table> tag and is defined row by row using the <tr> tag.

  • Each row contains <td> cells (normal cells) or <th> cells (header cells).

  • The table title is defined using <caption>.

  • You can add a border to the table cells using border. To merge borders, you use the CSS property border-collapse.

  • A table can be divided into three sections: <thead> (header), <tbody> (body) and <tfoot> (table footer). The use of these tags is not compulsory.

  • You can merge cells horizontally using the colspan attribute or vertically using rowspan. You have to specify how many cells have to be merged.

Exemple de certificat de réussite
Exemple de certificat de réussite