L’utilisation des tableaux (balise table) à des fins de mise en page a été rudement critiqué par certains défenseurs des CSS
(Lire à ce sujet « Tableaux contre CSS : le combat »).
Cette cabale a été si loin, que certains voudraient purement et simplement supprimer cette balise. Bien que cette idée soit absurde, voici, à titre d’exercice, comment réaliser des tableaux… sans tableaux. Cette démonstration pourra peut-être vous servir à résoudre des cas particuliers de mises en page.
Démonstration
Voici le résultat que l’on peut obtenir en jouant avec les propriétés « float » et « clear »Le « height:100% » est indispensable pour Internet Explorer 7.
Le « height:1em » est indispensable pour Internet Explorer 6.
Pour permettre le bon affichage de cet exemple dans ces 2 navigateurs, on a utilisé la propriété
!important. Si vous voulez mieux comprendre cette finesse; voir « !important est ignoré par IE6 ».
Les limites de la démonstration
Même si l’exemple ci-dessus singe de façon convaincante les cellules d’un tableau, il n’en adopte pas
exactement le comportement dans de nombreuses situations. Essayez par exemple de réduire la largeur de
la fenêtre de votre navigateur et vous constaterez que les cellules se ré-ordonnent d’une façon
inappropriée.
Les encadrements des cellules sont complexes à modifier. Il est, par exemple, trés difficile de faire
disparaître le double trait séparant les cellules sans rencontrer des incompatibilités entre Internet Explorer
et Firefox.
Les avantages de tableaux css
Ce type de mise en page peut permettre des variations inhabituelles dans les largeurs ou les hauteurs de
cellule. Voici ce qu’on obtient en inversant les attributions des classes pour les colonnes 1.2 et 1.3 et en
ajoutant un saut de ligne dans la case 1.3. (les styles CSS utilisés sont exactement les mêmes que dans l’exemple précédent).
Conclusion
Il est quasi-impossible de reproduire par des CSS les caractéristiques exactes d’un tableau et cela ne présente d’ailleurs aucun intérêt.
Contrairement à une idée largement répandue, les balises table ne posent pas – dans la plupart des cas – de gros problèmes d’accessibilité, alors qu’un tableau reconstruit à l’aide de CSS peut représenter un casse-tête insoluble sur ce point.
La démonstration ci-dessus doit être appréciée pour ce qu’elle est : un simple exercice de style.
