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

Maximal

Pour structurer des données

Une structure plus complète avec une légende <caption>...</caption>, une possibilité d'identifier les colonnes <col> une à une ou en les groupant avec un <col span=...>, un groupe d'en-tête <thead>...</thead>, un ou plusieurs groupes de corps <tbody>...</tbody>, et un groupe de pied <tfoot></tfoot>

Si vous êtes à l'aise avec la structure, vous pouvez passer aux css pour la mise ne forme.

<table>

<caption></caption>

<col><col><col><col><col><col>

<thead>
<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
</thead>

<tbody>
<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>

<tfoot>
<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
</tfoot>

</table>

Titre

\	A	B	C	D	E
L\C	C1	C2	C3	C4	C5
L1	1	2	3	4	5
L2	6	7	8	9	10
L3	11	12	13	14	15
L4	16	17	18	19	20
L5	21	22	23	24	25
\	A	B	C	D	E

Largeur

Automatique ou toute la largeur

La table s'adapte automatiquement à son contenu.

1.1	1.2	1.3
2.1	cette case contient du texte	2.3
3.1	3.2	3.3

Pour lui donner la pleine largeur, il faut lui appliquer un style

<style>
.toutelalargeur {width: 100%;}
</style>

</table>

<table class="toutelalargeur"
<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

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></th><th></th> </tr>
<tr> <th></th><td></td> </tr>
<tr> <th></th><td></td> </tr>
<tr> <th></th><td></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

En-tête, pied et corps de tableau à définir dans cet ordre

Le tableau peut contenir plusieurs corps (tbody) mais ne doit contenir qu'un en-tête (thead) et un pied (tfoot). À l'intérieur de la balise table, il faut placer les groupes dans l'ordre, caption puis Thead puis tbody puis tfoot

Pour faire défiler le corps du tableau entre l'en-tête et le pied, il faut utiliser les CSS.

<table>
<thead>
<tr><th>col1</th><th>col2</th><th>col3</th></tr>
</thead>
<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>
<tfoot>
<tr><th>-col1-</th><th>-col2-</th><th>-col3-</th></tr>
</tfoot>
</table>

Tableau

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

Identifier les colonnes

Utile pour simplifier la mise en forme pas CSS des colonnes

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

<style>
col.description {background-color:silver; width:40px ;}
</style>

<table>
<col class="description" ><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 défiler le texte de la table entre l'en-tête et le pied avec le style css

Faire de la mise en page avec la balise 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.