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.