Il est souvent utile de présenter des informations mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes. Les tableaux sont définis comme étant des suites de lignes.
Un tableau doit être construit selon les règles suivantes (exemple d'un tableau de deux lignes et deux colonnes):
<table> → début du tableau
<caption> → début du titre
</caption> → fin du titre
<tr> → début de la ligne A
<td> → début de la cellule 1
</td> → fin de la cellule 1
<td> → début de la cellule 2
</td> → fin de la cellule 2
</tr> → fin de la ligne A
<tr> → début de la ligne B
<td> → début de la cellule 3
</td> → fin de la cellule 3
<td> → début de la cellule 4
</td> → fin de la cellule 4
</tr> → fin de la ligne B
</table> → fin du tableau
Cela donne un tableau transparent. lorsqu'on le remplit de texte, les éléments s'alignent parfaitement mais on ne voit pas le tableau tant qu'on en lui a pas donné de style.
Il existe des cellules d'en-tête <th></th> qui permettent de mettre en valeur des titres de colonne en haut ou à gauche.
Voici un exemples de tableaux :
| th | th | th | th |
|---|---|---|---|
| th | td | td | td |
<thead> précise l'en-tête de tableau, cette balise s'emploie avec :
<tbody> : corps du tableau, et :
<tfoot> pied du tableau.
Voici l'ordre dans lequel elle doivent être insérées :
Pour que toutes les personnes qui visitent votre site aient accès à toutes les parties de vos pages, y compris les malvoyants, lorsque vous construisez vos tableaux, il faut penser à ajouter des attributs à certaines de vos balises. Un attribut est un texte ajouté dans une balise et qui précise l'usage de la balise à l'aide d'une valeur. Pour les tableaux, il convient d'ajouter l'attribut "summary", il se rédige ainsi : <table summary="résumé court de mon tableau">. On précise également avec l'attribut scope dans les balises th si les cellules de titres sont horizontales<th scope="row"> : ou verticales : <th scope="col">.
Lorsque l'on écrit le code d'un tableau tel que je l'indique ci-dessus, le tableau ne possède pas de bordures et la présentation est triste.
Afin de rendre visible le tableau il est nécessaire d'introduire quelques notions de feuilles de style. Dans le code HTML, nous allons dans la balise <head> ajouter la balise <style> :
<head>
<style>
</style>
</head>
Entre les deux balises <style></style>, nous allons placer les feuilles de style. La façon de rédiger les feuilles de style est la suivante :
attribut { propriété:style;}Il faut bien placer la ou les propriétés entre deux accolades et séparer chaque style avec un point virgule.
Nous allons ajouter au tableau, table un cadre, border noir(#000000), un trait continu (solid), et une épaisseur moyenne (2 pixels) :
table { border:#000000 solid 2px;}
Maintenant, le tableau est encadré, nous allons donner une couleur aux bordures border de cellules td en traits continus (solid) fins (1px) et bleus (#0099FF) :
td {
border:#0099FF solid 1px;
}
Le tableau possède maintenant un cadre noir et ses cellules sont encadrées de bleu, mais elles ne sont pas collées les unes aux autres. Pour cela, on a longtemps employé l'attribut cellspacing (qui est est encore accepté en XHTML 1.O mais ne le sera plus en HTML 5 ). Les feuilles de style permettent la même action, c'est à dire coller les cellules les unes aux autres, en employant le style border-collapse :
table {
border:#000000 solid 2px;
border-collapse:collapse;
}
td {
border:#0099FF solid 1px;
}
th {
border:#0099FF solid 1px;
}
On peut aussi ajouter un fond coloré backgroud-color gris (#CCCCCC) au th par exempleet lui ajouter une bordure :
th { background-color:#CCCCCC;border:#0099FF solid 1px; }
On peut fusionner les cellules d'un tableau de manière horizontale ou verticale. Pour les cellules en ligne on ajoutera l'attribut colspan="n" ; à la première balise <td>, "n" étant le nombre de colonnes que l'on fusionne, ici 3 colonnes :
| cellule fusionnée | ||
|---|---|---|
| A | B | C |
| D | F | G |
Voici le code html du tableau ci-dessus :
<table> <tr><th colspan="3">cellule fusionnée</th></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>D</td><td>F</td><td>G</td></tr> </table>
Pour les cellules en colonnes, c'est rowspan="n" qui sera utilisé, n étant de le nombre de cellules fusionnées. Attention à l'écriture du tableau. Pour les lignes des cellules CD et FG, il n'y a que deux balises <td> à la place de trois.
| cellule fusionnée |
cellule A | cellule B |
|---|---|---|
| cellule C | cellule D | |
| cellule F | cellule G |
Voici le code html du tableau ci-dessus :
<table> <tr><th rowspan="3">cellule fusionnée</th><td>cellule A</td><td>cellule B</td></tr> <tr><td>cellule C</td><td>cellule D</td></tr> <tr><td>cellule F</td><td>cellule G</td></tr> </table>