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 :
C'est un tableau, ça ? Le texte s'est écrit à la suite et il n'y a même pas de bordures…
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 :
collapse
: les bordures seront collées entre elles, c'est l'effet qu'on recherche ici ;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 !
Oui d'ailleurs, comment on fait pour ajouter des marges dans un tableau, avec du padding
?
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 !
Et comment on fait pour centrer un tableau ? Par défaut il est à gauche…
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 :
l'en-tête du tableau (en haut) se définit avec les balises
<thead></thead>
le corps du tableau (au centre) se définit avec les balises
<tbody></tbody>
le pied du tableau (en bas) se définit avec les balises
<tfoot></tfoot>
Ok d'accord, mais en fait, je vois bien ce qu'on peut mettre en en-tête et à l'intérieur du tableau, mais que mettre dans le pied de tableau ?
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 :
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.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é CSSborder-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 avecrowspan
. 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 !