Faire des tableaux en CSS
(Exercice de style)
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 lors de la création de votre site Web.
Sélection de liens concernant
les tableaux
en CSS
Ces liens pointent vers des pages dont les contenus complètent notre article.
Simuler des tableaux
en CSS
Babylon-design
propose une solution de tableau en 2 colonnes et expose les
possibilités de la propriété "display" dans ce domaine.
Tableaux, faux tableaux
Gcyrillus Free étudie avec minutie les avantages et dangers des
différents types de tableaux réalisés en CSS.
Changer la présentation des tableaux
grâce aux CSS
Nul besoin de ré-inventer la roue pour bénéficier des avantages des CSS
dans les tableaux. Cette page montre comment les styles CSS peuvent
modifier la présentation d'un tableau classique.
Mots clés
de cette page :
Création de site Web, design de site Web, conception de sites Internet.
Démonstration
Voici le résultat que l'on peut obtenir en jouant avec les propriétés "float" et "clear"
Légende 1 Légende 2 Légende 3
Case 1.1 Case 1.2 Case 1.3
Case 2.1 Case 2.2 Case 2.3
Code :
CSS
.Tableau span {
display:inline;
float:left;
border:1px solid #FF6600;
margin:0px;
padding:3px;
}
.Tableau p {
clear:left;
margin:0px;
padding:0px;
height:100% !important; height:1em;
}
.Tableau p.legende {font-weight:bold}
.Tableau span.col1 {width:70px}
.Tableau span.col2 {width:120px}
.Tableau span.col3 {width:90px}
HTML
<div class="Tableau">
<p class="legende">
<span
class="col1">Légende 1</span>
<span
class="col2">Légende 2</span>
<span
class="col3">Légende 3</span>
</p>
<p>
<span
class="col1">Case 1.1</span>
<span
class="col2">Case 1.2</span>
<span
class="col3">Case 1.3</span>
</p>
<p>
<span
class="col1">Case 2.1</span>
<span
class="col2">Case 2.2</span>
<span
class="col3">Case 2.3</span>
</p>
</div>
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".
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.
Avantages des tableaux en 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).
Légende 1 Légende 2 Légende 3
Case 1.1 Case 1.2 Case
1.3
Case 2.1 Case 2.2 Case 2.3
Code :
HTML
<div class="Tableau">
<p class="legende">
<span
class="col1">Légende 1</span>
<span
class="col2">Légende 2</span>
<span
class="col3">Légende 3</span>
</p>
<p>
<span
class="col1">Case 1.1</span>
<span class="col3">Case
1.2</span>
<span class="col2">Case<br>1.3</span>
</p>
<p>
<span
class="col1">Case 2.1</span>
<span
class="col2">Case 2.2</span>
<span
class="col3">Case 2.3</span>
</p>
</div>
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.
Le copyright de cette page appartient à css-faciles.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie
-
Introduction
Premiers pas
Héritages
Eléments "blocs"
Mise en page
Des tableaux
Pseudo-frames
Menu déroulant
Styles
alternatifs
10
trucs à savoir
Toutes les propriétés CSS
Couleurs
CSS
Unités CSS
Classement
par familles
Reflexions
et prises de tête
Les fausses promesses
Tableaux contre CSS : le combat
Les ayatollahs
Recherche
Haut de page
Page précédente
Page suivante
