Table en html

Minimal

Pour structurer des données

tr pour encadrer une ligne et td pour encadrer une donnée. attention à mettre le même nombre de données dans chaque ligne pour éviter les erreurs de place dans le tableau.

<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

Description pour les non-voyants

Sortie sonore ou braille

Avez-vous déjà écouté un tableau ? La moindre des choses est d'en donner une description.

<table summary="Description du tableau pour les non-voyants">
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

Largeur

Automatique ou toute la largeur

<table width="100%">
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

Dans la balise table, vous pouvez utiliser aussi ces autres attibuts:
id, class (identifiants internes au document)
lang (indications de langue), dir (direction du texte)
title (titre de l'élément)
style (information de style en-ligne)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
bgcolor (couleur d'arrière-plan)
frame, rules, border (bordures et règles)
cellspacing, cellpadding (marges des cellules)

Avec légende

Le titre général de description du tableau

<table>
<caption>Légende</caption>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

Légende

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

Rubriques et données

Pour identifier une case comme le titre (th) de ligne ou de colonne de la donnée (td)

<table>
<tr><th>L\C</th><th>col1</th><th>col2</th><th>col3</th></tr>
<tr><th>lig1</th><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><th>lig2</th><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><th>lig3</th><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

L\C	col1	col2	col3
lig1	1.1	1.2	1.3
lig2	2.1	2.2	2.3
lig3	3.1	3.2	3.3

Structurer le tableau en groupant des lignes

Entête, pied et corps de tableau à définir dans cet ordre

Le tableau peut contenir plusieurs corps (tbody) mais ne doit contenir qu'une entête (thead) et un pied (tfoot). Le pied est placé juste après l'entête. pour que le navigateur puisse éventuellement afficher l'entête en haut du média, le pied en bas du média et faire défiler le corps entre les deux.

<table>
<thead>
<tr><th>col1</th><th>col2</th><th>col3</th></tr>
</thead>
<tfoot>
<tr><th>-col1-</th><th>-col2-</th><th>-col3-</th></tr>
</tfoot>
<tbody>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</tbody>
</table>

col1	col2	col3
-col1-	-col2-	-col3-
1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

Identifier les colonnes

Utile pour simplifier la mise en forme pas CSS des colonnes

L'identification des colonnes est mal géré dans les navigateurs. Colorier le fond et donner une largeur à la colonne est à peu près tout ce que vous pourrez faire par css.

<table>
<col width="50px" class="entete" ><col><col>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

Fusionner des cellules du tableau

Pour le fun

<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td colspan="2">2.1 et 2.2</td><td rowspan="2">2.3<br>et<br>3.3</td></tr>
<tr><td>3.1</td><td>3.2</td></tr>
</table>

Attention de supprimer les cases correspondant aux cellules fusionnées.

1.1	1.2	1.3
2.1 et 2.2		2.3 et 3.3
3.1	3.2

Mettre en forme les tables par CSS

Pour toutes les utilisations

Un tableau de données, une estimation pour un projet sont deux exemples usuels de bonne utilisation des tables. La mise en forme des tables html par css fait alors toute la différence.

Faire de la mise en page avec le table

Fortement déconseillé

L'envie de faire de la mise en page avec des tables est très forte. Il vaut mieux résister à la tentation. La mise en page par CSS est beaucoup plus simple à réaliser. Le seul problème qui reste non résolu est que les navigateurs actuels gèrent mal les médias paginés et les répétitions sur les pages.