Les tableaux en HTML

Que ce soit pour afficher des données sur sa page web ou pourquoi gérer les espaces dans sa page web, l’utilisation des tableaux peut sembler compliquée.

Un des éléments importants sur une page internet sont les tableaux. Il est facile en HTML et css de les mettre en forme. La partie css sera fait plus tard, Nous verrons ici les balises. Je le considère important car si on réfléchi un peu plus loin, le tableau ne sert pas quà faire un tableau, on peut très bien concevoir sa page internet avec, voir l’exemple sur cette page ICI.

Les balises html d’un tableau

Il en existe peu, le tableau se construit de cette manière :

<table>
     <tr><th>Titre 1</th><th>Titre 2</th><th>Titre 3</th></tr>
     <tr><td>Cellule</td><td>Cellule</td><td rowspan=2>Cellule fusionnée sur deux lignes</td></tr>
     <tr><td>cellule</td><td>cellule</td></tr>
     <tr><td colspan=2>cellule fusionnée sur deux colonnes</td><td>cellule</td></tr>
</table>

Voilà ce que ça donne :

Titre 1 Titre 2 Titre 3
Cellule Cellule Cellule fusionnée sur deux lignes
cellule cellule
cellule fusionnée sur deux colonnes cellule

Petites explications :

  • <table></table>, ce sont les balise qui ouvrent et ferment le tableau
  • <tr></tr>, ce sont les balises qui ouvrent et ferment une ligne
  • <td></td>, ce sont les balises qui délimitent une cellule
  • <th></th>, ce sont les balises pour indiquer le titre d’une colonne

Les attributs du tableau en HTML

De manière très clair, les seuls attributs dont je parlerai ici sont :

  • <td colspan=X>, cet attribut permet de fusionner X cellules qui sont sur la même ligne et adjacente
  • <td rowspan=X>, cet attribut, quant à lui permet de fusionner X cellules qui sont sur la même colonne et adjacente

En cas d’erreur dans la disposition des cellules :

<table>
     <tr><th>Titre 1</th><th>Titre 2</th><th>Titre 3</th></tr>
     <tr><td>Cellule</td><td>Cellule</td><td rowspan=2>Cellule fusionnée sur deux lignes</td></tr>
     <tr><td>cellule</td><td>cellule</td><td>Cellule censé se trouvé sous les cellules fusionnées sur deux lignes</td></tr>
     <tr><td colspan=2>cellule fusionnée sur deux colonnes</td><td>cellule</td></tr>
</table>

Voilà ce que ça donne :

Titre 1 Titre 2 Titre 3
Cellule Cellule Cellule fusionnée sur deux lignes
cellule cellule Cellule censé se trouvé sous les cellules fusionnées sur deux lignes
cellule fusionnée sur deux colonnes cellule

Donc si vous avez un petit problème de disposition de cellule, assurez vous de bien avoir écrit vos balises
Les autres attributs faisant partis de la mise en page de ma feuille (à mon avis) et seront bien plus simple à gérer via une feuille de style. Mais pour information, cette page synthétise bien les attributs.

Laisser un commentaire