Einstein au tableau

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 :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

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&eacute;gende 1</span>
      <span class="col2">L&eacute;gende 2</span>
      <span class="col3">L&eacute;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&eacute;gende 1</span>
      <span class="col2">L&eacute;gende 2</span>
      <span class="col3">L&eacute;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.

This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Dans cette page :
Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu