Créez votre site web avec HTML5 et CSS3

Créez un tableau en HTML et CSS

La balise en paire <table> </table> indique le début et la fin d'un tableau. Cette balise est de type  block  , on va donc la placer en dehors d'un paragraphe ou d'une  div  .

Indiquez les valeurs du tableau avec les balises HTML  <tr>  et  <td> 

On a une balise de ligne  <tr>  qui englobe un groupe de cellules  <td>  .

Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :

<table>
    <tr>
        <td>Carmen</td>
        <td>33 ans</td>
        <td>Espagne</td>
    </tr>
    <tr>
        <td>Michelle</td>
        <td>26 ans</td>
        <td>États-Unis</td>
    </tr>
</table>

Bon, le résultat est un peu déprimant :

Oui, un tableau HTML sans CSS paraît bien vide…

Ajoutez des bordures au tableau HTML grâce à la propriété CSS  border

Pour ajouter des bordures, on utilise le sélecteur CSS correspondant !

On utilise td pour sélectionner toutes les cellules des tableaux de la page. Donc pour créer des bordures à nos cellules, on fait :

td /* Toutes les cellules des tableaux... */
{
    border: 1px solid black; /* auront une bordure de 1px */
}

Et voici le résultat juste en dessous :

Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici.

Collez les bordures du tableau HTML avec la propriété CSS  border-collapse

border-collapse est une propriété CSS qui permet de “coller les bordures entre elles”. Elle peut prendre deux valeurs :

1. collapse  : les bordures seront collées entre elles, c'est l'effet qu'on recherche ici ;

2. separate  : les bordures seront dissociées (valeur par défaut).

On écrit :

table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
}

Ce qui nous permet d'obtenir :

Voilà qui est mieux !

Ajoutez une ligne d'en-tête au tableau avec la balise HTML  <th>

<table>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
        <th>Pays</th>
    </tr>
    <tr>
        <td>Carmen</td>
        <td>33 ans</td>
        <td>Espagne</td>
    </tr>
    <tr>
        <td>Michelle</td>
        <td>26 ans</td>
        <td>États-Unis</td>
    </tr>
</table>

La ligne d'en-tête est très facile à reconnaître pour deux raisons :

• les cellules sont des<th>  au lieu des  <td>  habituels ;

• c'est la première ligne du tableau (c'est idiot, mais encore faut-il le préciser).

Comme le nom des cellules est un peu différent pour l'en-tête, il faut penser à mettre à jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales et sur l'en-tête :

table {
    border-collapse: collapse;
}

td, th /* Mettre une bordure sur les td ET les th */ {
    border: 1px solid black;
}

Ce qui donne :

Donnez un titre au tableau avec la balise HTML  <caption>

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau. Notre exemple est constitué d'une liste de personnes… oui, mais alors ? Qu'est-ce que cela représente ? Sans titre de tableau, vous le voyez, on est un peu perdu.

Heureusement, il y a <caption> pour ajouter un titre à notre tableau  !

Cette balise se place tout au début du tableau, juste avant l'en-tête. C'est elle qui contient le titre du tableau :

<table>
    <caption>Passagers du vol 377</caption>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
        <th>Pays</th>
    </tr>
    <tr>
        <td>Carmen</td>
        <td>33 ans</td>
        <td>Espagne</td>
    </tr>
    <tr>
        <td>Michelle</td>
        <td>26 ans</td>
        <td>États-Unis</td>
    </tr>
</table>

Et voilà le résultat :

Bon mais on étouffe encore un peu avec ce tableau très compacte !

Exactement, et ça se fait côté CSS avec la propriété padding!

Ajoutez des marges à un tableau HTML avec la propriété CSS  padding

Pour correctement ajouter des marges à toutes nos cellules, y compris celles de l'en-tête, on va ajouter la propriété CSS  padding sur les sélecteurs  td  et  th  à la fois (comme on l'avait fait pour ajouter des bordures, souvenez-vous) :

td, th {
    border: 1px solid black;
    padding: 15px;
}

Et voilà le résultat avec une marge de 15 pixels :

C'est mieux !

C'est simple, et ça se passe une fois de plus dans le fichier CSS, cette fois, au niveau du sélecteur  table !

Centrez un tableau HTML avec la propriété CSS  margin

Un peu plus haut dans le chapitre avait utilisé le sélecteur  table  pour ajouter la propriété CSS  border-collapse  qui nous permettait de "coller" les cellules entre elles.

C'est également sous le sélecteur  table  qu'on va indiquer au navigateur de centrer le tableau sur la page grâce à la propriété CSS  margin  , pour laquelle on va préciser la valeur auto:

table {
    border-collapse: collapse;
    margin: auto;
}

Voici ce que ça donne :

Super ! Bon maintenant, voyons comment structurer un tableau un peu plus complexe. Nous avons appris à construire un petit tableau simple. Cela peut suffire dans la plupart des cas, mais vous aurez parfois besoin de réaliser des tableaux plus… complexes.

Structurez un grand tableau avec des balises HTML

Divisez un tableau avec les balises HTML  thead,  tbody et  tfoot

Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs parties. Pour cela, il existe des balises HTML qui permettent de définir les trois “zones” du tableau :

1. l'en-tête du tableau (en haut) se définit avec les balises <thead></thead>  

2. le corps du tableau (au centre) se définit avec les balises <tbody></tbody>  

3. le pied du tableau (en bas) se définit avec les balises <tfoot></tfoot>

Vous pouvez par exemple y mettre un résumé, ou un total. Le pied de tableau se mettra, comme l'en-tête, par défaut, en gras :

Dans cet exemple de tableau, ce n'est pas forcément très parlant de mettre le même contenu dans l'en-tête et le pied du tableau. Mais cela peut être utile lorsqu'un tableau est très long.

Fusionnez des cellules du tableau avec les attributs colspan et rowspan

Pour fusionner des cellules entre elles, il suffit d'ajouter un attribut dans la balise HTML <td>. Cela permet d'indiquer le nombre de cellules à fusionner entre elles (la balise des cellules).

II existe deux attributs pour deux types de fusions différentes :

1. l'attribut  colspan  permet de fusionner des colonnes : la fusion s'effectue horizontalement, aussi bien sur les lignes d'en-tête que sur le contenu lui-même. 

2. l'attribut  rowspan  permet de fusionner des lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.

Voyons tout de suite à quoi cela peut ressembler :

À vous de jouer !

Vous allez maintenant pouvoir construire le tableau des tarifs de Robbie Lens !

Vous verrez que la base de code a été réorganisée :

• le fichier CSS a été découpé en 4 fichiers CSS différents qui se trouvent dans le dossier  style ;

• le fichier de base  style.css  est importé par chaque page ;

• chaque page possède son propre fichier CSS.

Vous ajouterez les tarifs à la suite de la page "À propos", après le lien Call to action (appel à l’action).

Voilà à quoi le tableau devrait ressembler :

En résumé

• Un tableau s'insère avec la balise HTML  <table>  et se définit ligne par ligne avec  <tr>.

• Chaque ligne comporte des cellules  <td>  (cellules normales) ou  <th>   (cellules d'en-tête).

• Le titre du tableau se définit avec  <caption>.

• On peut ajouter une bordure aux cellules du tableau HTML avec la propriété CSS border  . Pour coller les bordures entre elles, on utilise la propriété CSS  border-collapse.

• Un tableau peut être divisé en trois sections grâce aux balises HTML <thead>  (en-tête),  <tbody>  (corps) et  <tfoot>  (bas du tableau). L'utilisation de ces balises n'est pas obligatoire.

• En HTML, on peut fusionner des cellules horizontalement avec l'attribut  colspan, ou verticalement avec  rowspan. Il faut indiquer combien de cellules doivent être fusionnées.

Dans le chapitre suivant, on va apprendre à créer des formulaires. Alors à tout de suite !