Dimensions des tableaux HTML

La présentation des tableaux en HTML peut parfois être irritante, surtout lorsque vous souhaitez leur donner une taille précise. Voici quelques petites astuces qui permettent de récupérer une largeur et une hauteur définie.

Nous prendrons comme exemple de travail un tableau à 3 colonnes et 5 lignes :

<table>
    <tbody>
        <tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr>
        <tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr>
        <tr><td>Cell 3.1</td><td>Cell 3.2</td><td>Cell 3.3</td></tr>
        <tr><td>Cell 4.1</td><td>Cell 4.2</td><td>Cell 4.3</td></tr>
        <tr><td>Cell 5.1</td><td>Cell 5.2</td><td>Cell 5.3</td></tr>
    </tbody>
</table>
1. Code HTML d'un tableau de 5 lignes et de 3 colonnes.

1. Adaptation du tableau à son contenu

Nous souhaitons fixer sa taille à 100px de largeur et 100px de hauteur. Intuitivement, nous aurions à déclarer les règles suivantes dans notre feuille de style associée :

table {
    width: 100px;
    height: 100px;
}
2. Dimensionner un tableau.

Le tableau ainsi présenté devrait occuper un carré comme suit :

3. Espace théoriquement occupé par le tableau.

Cependant, un tableau avec 3 colonnes et 5 lignes donne le résultat suivant :

Cell 1.1Cell 1.2Cell 1.3
Cell 2.1Cell 2.2Cell 2.3
Cell 3.1Cell 3.2Cell 3.3
Cell 4.1Cell 4.2Cell 4.3
Cell 5.1Cell 5.2Cell 5.3
4. Affichage réel du tableau.

Bien. Vous pouvez prendre votre règle pour vérifier ou me croire sur parole : si ce tableau à bien 100px de large, sa hauteur est par contre bien plus grande que celle définie dans la feuille de styles. Pourquoi ? Parce que le tableau prend simplement la place qui lui est nécessaire pour afficher son contenu.

Vous voulez une preuve supplémentaire ?! Regardez pourquoi la largeur a été respectée : parce que le texte a pu être « encapsulé » dans les cellules. Imaginons un contenu où il n'y aurait pas d'espaces :

Cell1.1Cell1.2Cell1.3
Cell2.1Cell2.2Cell2.3
Cell3.1Cell3.2Cell3.3
Cell4.1Cell4.2Cell4.3
Cell5.1Cell5.2Cell5.3
5. Affichage réél du tableau, adapté au contenu des cellules.

Bingo ! Maintenant, ni la largeur ni la hauteur du tableau n'obéissent aux dimensions définies dans la feuille de styles.

2. Retrouver les dimensions spécifiées

2.1. Table-layout de la table et overflow des cellules pour récupérer la largeur

Certaines propriétés de présentation des tableaux HTML sont contrôlées par la propriété table-layout, qui définie en gros de quelle manière l'élément doit s'étendre dans le flux du document auquel il appartient. Si on place cette propriété à fixed, on réussit à récupérer notre largeur car Avec cet algorithme (rapide), la disposition horizontale de la table ne dépend pas du contenu des cellules, mais seulement de la largeur de la table, de la largeur des colonnes, des bordures et de l'espacement entre les cellules (ref) :

table {
    width: 100px;
    height: 100px;
    table-layout: fixed;
}
6. Règles CSS pour récupérer la largeur du tableau.
Cell1.1Cell1.2Cell1.3
Cell2.1Cell2.2Cell2.3
Cell3.1Cell3.2Cell3.3
Cell4.1Cell4.2Cell4.3
Cell5.1Cell5.2Cell5.3
7. Affichage du tableau avec la bonne largeur.

Un autre problème apparaît ici : le contenu des cellules se chevauche (dans le cas où il n'y pas d'espace blanc, évidemment). On peut néanmoins supprimer ce chevauchement en masquant l'overflow des cellules :

table {
    width: 100px;
    height: 100px;
    table-layout: fixed;
}
table td {
    overflow: hidden;
}
8. Règles CSS pour masquer le texte débordant des cellules.
Cell1.1Cell1.2Cell1.3
Cell2.1Cell2.2Cell2.3
Cell3.1Cell3.2Cell3.3
Cell4.1Cell4.2Cell4.3
Cell5.1Cell5.2Cell5.3
9. Affichage du tableau avec la bonne largeur et sans texte qui déborde.

2.2. Tbody et la hauteur du tableau

Dernier problème à résoudre : la hauteur. La propriété table-layout ne semble pas agir dessus. On peut cependant récupérer nos 100px en agissant sur le tbody du tableau, plus précisément sur sa hauteur et son overflow :

table {
    width: 100px;
    height: 100px;
    table-layout: fixed;
}
table tbody {
    height: 100%;
    overflow: auto;
}
table td {
    overflow: hidden;
}
10. Règles CSS pour récupérer la hauteur définie du tableau.
Cell1.1Cell1.2Cell1.3
Cell2.1Cell2.2Cell2.3
Cell3.1Cell3.2Cell3.3
Cell4.1Cell4.2Cell4.3
Cell5.1Cell5.2Cell5.3
11. Tableau gardant les tailles définies.

Nous récupérons finalement notre tableau de 100px de large et de 100px de hauteur.

3. Ressources et références

Titre
Spécification HTML 4.01
Auteurs
Dave RAGGETT
Auteurs
Hors LE
Auteurs
Ian JACOBS
Editeur
W3C
Date
Chapitre
11. Les tables
Titre
CSS 2.1 Specification
Auteurs
Bert BOS
Auteurs
Tantek ÇELIK
Auteurs
Ian HICKSON
Auteurs
Lie WIUM
Editeur
W3C
Date
Chapitre
17. Tables