Archives

Les tableaux, balises <table> et </table>, sont des éléments de mise en forme avancée dont le but est de présenter des informations de type tabulaire, mais qui ont été utilisées à tort pour faire des mises en page de site web.
La présentation des balises ci-après est donc à remettre dans son contexte : il s'agit de balises plus ou moins connues utiles à la mise en forme de données tabulaires (statistiques, évolution de chiffre d'affaires, etc...).

Balises de définition et sémantique d'un tableau

Un tableau est défini par une balise d'ouverture et de fermeture, ainsi que de lignes (row en anglais) et de cellules. Il peut y avoir une infinité de lignes dans un tableau, mais toutes les lignes doivent avoir le même nombre de cellules au sein d'une même table.

<table [...]>

[...]

</table>

La balise d'ouverture accepte un certain nombre d'attributs. Les plus répandus sont ceux qui servent à définir la taille de la bordure, l'espacement entre les cellules et enfin la marge à l'intérieur des cellules. Les unités sont exprimées en pixels dans le code source, mais peuvent être rédigées dans d'autres unités via les CSS.
Un autre attribut moins connu est celui qui permet de définir le sommaire, càd un texte d'explication sur le contenu du tableau. Cela sert d'une part à l'indexation du contenu, mais aussi et surtout à l'accessibilité. Les navigateurs en mode texte peuvent en effet avoir une description de ce qui n'est pas affiché...
Il existe aussi plein d'autres attributs, mais la plupart sont devenus obsolètes à cause des/grâce aux feuilles de style.

<table

border="0|x"
cellpadding="0|x"
cellspacing="0|x"
summary="[{texte de description du contenu du tableau}]"

>

[...]

</table>


Définir une ligne

Il s'agit de la balise <tr> et de son tenant de fin </tr> (on pourrait traduire TR par Table Row, ligne de tableau).
En dehors des attributs class et style (pour attribuer des classes ou définir des styles à la volée), il n'existe pas d'attributs foncièrement utiles. Une ligne s'ajuste en effet en hauteur en fonction du contenu de la plus haute des cellules qui la compose...

Définir une cellule

Il existe deux grands types de cellule, les cellules d'entête et celles de corps. Une cellule d'entête est définie par le couple <th> [...] </th>, alors que les cellules de corps sont définies par le couple <td> [...] </td>. Ces deux balises de cellule ont les mêmes attributs, dont certains sont tombés en désuètude avec les feuilles de style.
La balise TH correspond à des cellules d'entête, elles sont donc sémantiquement à placer dans la toute première ligne TR du tableau, et contiendront les entêtes de colonnes (les titres si vous préférez). Les navigateurs appliquent par défaut une apparence sensiblement différente aux cellules d'entête par rapport aux cellules normales, il est évidement possible de gérer cela de façon libre et puissante avec les CSS.

Synthèse

<table

border="0|{bordure en pixels}"
cellpadding="0|{marge interne en pixels}"
cellspacing="0|{espacement entre cellule en pixels}"
[ class="{classe(s) css}" ]
[ style="{style(s) css à la volée}" ]
[ width="{largeur du tableau en pixels}" ] *le recours aux feuilles de style est désormais préconisé*
summary="{texte de description du contenu du tableau}"
[ id="{identifiant}" ]

>

<caption

style=""
class=""

></caption>

<thead
class=""
style=""
>
<tr
class=""
style=""
>
<th
class="classe_css"
style=""
valign="baseline|bottom|middle|top" *le recours aux feuilles de style est désormais préconisé*
align="center|char|left|justify|right" *le recours aux feuilles de style est désormais préconisé*
width="largeur" *le recours aux feuilles de style est désormais préconisé*
colspan="nombre_colonne"
rowspan="nombre_ligne"
nowrap="nowrap"
></th>
</tr>
</thead>
<tfoot
class=""
style=""
>
<tr>
<td
class=""
style=""
valign="baseline|bottom|middle|top" *le recours aux feuilles de style est désormais préconisé*
align="center|char|left|justify|right" *le recours aux feuilles de style est désormais préconisé*
width="" *le recours aux feuilles de style est désormais préconisé*
colspan=""
rowspan=""
nowrap="nowrap"
></td>
</tr>
</tfoot>
<tbody
class=""
style=""
>
<tr>
<td></td>
</tr>
</tbody>
</table>