Termes CSS clés employés : display, float
Compatibilité navigateurs : tous navigateurs
Les tableaux sont très décriés, et considérés comme mal employés dans de nombreux cas. Est-il possible d’obtenir une mise en forme tabulaire sans employer les tableaux HTML ?
Oui, cela est possible. Une simple liste peut être mise assez facilement sous forme tabulaire.
Le code HTML est donc une simple liste :
<UL class="tableau">
<LI>Première ligne<br />Première colonne</LI>
<LI>Première ligne<br />Deuxième colonne</LI>
<LI>Première ligne<br />Troisième colonne</LI>
<LI>Deuxième ligne<br />Première colonne</LI>
<LI>Deuxième ligne<br />Deuxième colonne</LI>
<LI>Deuxième ligne<br />Troisième colonne</LI>
</UL>
C’est dans le code CSS que les choses sont définies. Rien d’extraordinaire pour l’élément UL :
UL.tableau{
display:block;
width:80%;
margin:0 auto 0;
}
L’élément LI est en revanche déclaré comme bloc flottant à gauche, et doté d’une bordure. Comme notre tableau comporte trois colonnes, la largeur est fixée à 33% du conteneur.
UL.tableau li {
display:block;
float:left;
padding:0;
width : 33%;
height : auto;
border: 1px solid #000;
text-align:center;
}
Cela fonctionne parfaitement, comme le montre l'exemple suivant.
Toutefois, si la fenêtre est redimensionnée, malgré une définition de largeur à 33% les cellules se décalent et enlèvent toute signification au tableau.
Une des solutions serait alors d’attribuer une largeur explicite tant au contenant UL qu’à ses enfants LI, de façon à imposer des sauts de ligne corrects.
UL.tableau{
width:720px;
…
}
UL.tableau li {
width : 238px;
…
}
Cela implique l’apparition d’un ascenseur, mais le pseudo-tableau conserve sa forme.
Il semble en réalité que la complexité de réalisation des tableaux soit le principal responsable du dédain montré à leur égard. Un tableau est une structure HTML parfaitement bien définie, qui possède une correspondance bien gérée en CSS : je ne vois personnellement aucune raison de ne pas les employer, tant que cela est pour des données tabulaires et non dans un but de présentation…
|
|---|