La balise table en HTML

Structure et éléments internes à une table en HTML 4, et ce qui change avec HTML 5.

Les tables servent à représenter des collections de données. Il est inutile de chercher à les remplacer par des calques avec des feuilles de styles, et à l'inverse, l'agencement d'une page web doit être réalisé par des calques avec feuilles de style et non par une table.

Les balises en HTML 4 et HTML 5

Table

Le conteneur global, on peut lui assigner un id et une class pour un style global personnalisé.

<table>
</table>

Caption

L'élement caption se place juste au dessous de <table> et avant les autres balises, <thead> ou <tr>.

<table>
  <caption style="caption-side:bottom">Description</caption>
  <tr>
    <th>Titre 1</th><th>Titre 2<th>
  </tr>
  <tr>
    <td>Contenu 1</td><td>Contenu 2</td>
  </tr>
</table>

Description

Titre 1	Titre 2
Contenu 1	Contenu 2

Il sera affiché au-dessus de la table, ou au-dessous avec l'attribut caption-side: top ou bottom ou left et right (non reconnu par Internet Explorer 7 et précédents et IE ne reconnaît que top et bottom).
Par défaut, c'est top.

En JavaScript, on peut le changer avec l'instruction: object.style.captionSide = "bottom".

Pour l'alignement, à gauche (par défaut), au centre ou à droite, on utilise l'attribut text-align.

La largeur de cet élément est la même que celle de la table. On lui donne une marge intérieure avec la propriété padding, et on peut changer la couleur du fond, ou lui donner un cadre avec l'attribut border.

Thead

Contient les titres de colonnes. On peut le supprimer, se contenter d'utiliser des balises <th>, mais il aide à accéder au contenu d'une table en JavaScript.

Contient une ligne <tr> et des cellules <th>.

<table>
 <thead>
   <tr>	
     <th>Col 1</th>
     <th>Col 2</th>
   </tr>
 <thead>
 <tbody>
   <tr>
     <td>Contenu 1</td>
     <td>Contenu 2</td>
   </tr>
 </tbody>
</table>

Col 1	Col 2
Contenu 1	Contenu 2

Cet élément à un intérêt limité. Il peut dédoubler les titres de colonnes, mais nuit au rendu de la table. Si on l'utilise, on le place avant les lignes, juste après <thead>.

Tbody

Contient un ensemble de lignes, donc de balises <tr>. Sert à accéder par script au contenu de la table.

Tr

Ligne de table, contenant un ensemble de cellules, soit des balises <th>, soit <td>.

Th

Cellule d'en-tête. On peut lui assigner un style particulier. On peut les placer dans <thead> ou dans <tr>.

On peut en placer une en début de chaque <tr> pour créer un en-tête de ligne. On peut aussi les placer dans le corps de la table. Cependant si les dimensions d'une <th> différent de celles des <td>, cela peut changer l'apparence globale.

Td

Cellules de tableau. L'attribut colspan permet d'en regrouper plusieurs horizontalement sans changer l'agencement global de la table. On peut les fusionner verticalement, sur plusieurs lignes avec l'attribut rowspan.

Exemple:

	<td colspan="2"> </td>
<td rowspan="2"></td>

Balises futures

Colgroup

Une balise colgroup représente une ou plusieurs colonnes. Avec l'attribut span qui permet de les regrouper elle peut représenter plusieurs colonnes adjacentes.
Elle permet d'assigner des propriétés à toutes les cellules d'une colonne: largeur, couleur, alignement, etc.
Elle se place après caption et avant toutes autres balises.

Colgroup et col sont mal ou pas supportées par Firefox aussi sont elles mentionnées pour mémoire.

Col

La balise col permet d'appliquer un style à une colonne ou plusieurs colonnes adjacentes avec l'attribut span, à l'intérieur d'une colgroup.
Ainsi le style défini par une colgroup peut être précisé pour chaque colonne quand la colgroup contient plusieurs colonnes. On peut surcharger le style de la colgroup par une col.

L'attribut width de colgroup ou col définit la largeur de la ou les colonnes.

Structure d'une table

La balise table et le choix des balises internes.

Structure complète

Elle permet en théorie de mieux contrôler le contenu, mais pas plus qu'une structure simple avec des ID et des classes.

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
            ...
        </tr>
        ...
    </thead>
    <tfoot></tfoot>
    <tbody>
    <tr>
        <td></td>
        ...
     </tr>
     ...
    </tbody>
</table>

Les balises colgroup et col n'étant pas bien implémentée par Firefox, elle sont ignorées.

Structure simple

Elle est suffisante dans la plupart des cas, accompagnée d'une feuille de style pour mettre en relief les titres de colonnes et de lignes.

<table>
    <caption></caption>
    <tr>
        <th></th>
        ...
    </tr>
    <tr>
        <td></td>
        ...
    </tr>
</table>

On peut aussi utiliser des <th> en début de ligne.

Table en HTML 5

La nouvelle balise tfoot peut être placée avant ou après tbody.

On peut omettre les balises de fermeture comme </td>, </th>, </thead>, </tbody>, </tfoot>.
Mais <table> et <caption> doivent être fermés.

Exemple de code HTML 5:

<table>
<caption>Libellé</caption>
<thead>
   <tr>
   <th>Titre 1
   <th>Titre 2 
<tfoot> Bas de page
<tbody>
  <tr>
   <th>Titre de ligne
   <td>Contenu de cellule
   ...
</table>

Il est possible de créer dynamiquement une table avec les fonctions telles que:

• createTbody()
• insertRow(index) et deleteRow(index)
• createTFoot() et deleteTFoot()
• createCaption() et deleteCaption()

Ces fonctions sont associées à l'objet DOM de la table ou à des objets internes comme tbody, tr.

De même on peut lire les contenus d'une table avec les objets DOM de ses balises ou collections de balises (table représente l'objet DOM de la table):

• table.caption
  Accéder à l'objet DOM représentant la balise <caption>.
• table.tHeads
  Accéder à l'objet DOM resprésentant la collection des balises <thead>.
• table.rows
  Accéder à l'objet DOM resprésentant la collection des balises <tr>.
• table.tBodies
  Accéder à un objet DOM qui est la collection des balises tbody de l'objet table.

Etude de cas

• Donner à une table une apparence professionnelle avec CSS.