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. 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;
}
Le tableau ainsi présenté devrait occuper un carré comme suit :
Cependant, un tableau avec 3 colonnes et 5 lignes donne le résultat suivant :
Cell 1.1 | Cell 1.2 | Cell 1.3 |
Cell 2.1 | Cell 2.2 | Cell 2.3 |
Cell 3.1 | Cell 3.2 | Cell 3.3 |
Cell 4.1 | Cell 4.2 | Cell 4.3 |
Cell 5.1 | Cell 5.2 | Cell 5.3 |
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.1 | Cell1.2 | Cell1.3 |
Cell2.1 | Cell2.2 | Cell2.3 |
Cell3.1 | Cell3.2 | Cell3.3 |
Cell4.1 | Cell4.2 | Cell4.3 |
Cell5.1 | Cell5.2 | Cell5.3 |
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;
}
Cell1.1 | Cell1.2 | Cell1.3 |
Cell2.1 | Cell2.2 | Cell2.3 |
Cell3.1 | Cell3.2 | Cell3.3 |
Cell4.1 | Cell4.2 | Cell4.3 |
Cell5.1 | Cell5.2 | Cell5.3 |
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;
}
Cell1.1 | Cell1.2 | Cell1.3 |
Cell2.1 | Cell2.2 | Cell2.3 |
Cell3.1 | Cell3.2 | Cell3.3 |
Cell4.1 | Cell4.2 | Cell4.3 |
Cell5.1 | Cell5.2 | Cell5.3 |
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;
}
Cell1.1 | Cell1.2 | Cell1.3 |
Cell2.1 | Cell2.2 | Cell2.3 |
Cell3.1 | Cell3.2 | Cell3.3 |
Cell4.1 | Cell4.2 | Cell4.3 |
Cell5.1 | Cell5.2 | Cell5.3 |
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