Le retour des tables HTML via CSS (la guerre est finie)

Le retour des tables

On vous disait depuis des années que les tables, c’était pas bien pour la mise en page. Eh bien aujourd’hui, Digital Web Magazine, ardent défenseur du web sémantique et du positionnement en CSS nous donne une nouvelle leçon : les tables sont de retour. Une chance d’en finir avec l’un des casse-têtes les plus complexes que les webdesigners ont rencontré depuis l’abandon des tables de layout.


Le retour des tables

On vous disait depuis des années que les tables, c’était pas bien pour la mise en page. Eh bien aujourd’hui, Digital Web Magazine, ardent défenseur du web sémantique et du positionnement en CSS nous donne une nouvelle leçon : les tables sont de retour. Il nous montre comment les évolutions d’Internet Explorer 8 (après Safari, Firefox et les autres bien entendu) nous permettront d’en finir avec l’un des casse-têtes les plus complexes que les webdesigners ont rencontré depuis l’abandon des tables de layout.

Mais attention, on ne va pas revenir aux balises <table> pour structurer son code ! Nous parlons ici d’un code sémantique, respectueux des standards, mais qu’un peu de CSS rend – magie – aussi flexible que les tables. Il s’agit de donner à un élément l’attribut display:table. Il se comportera dès lors comme une table, et ses descendants comme des cellules de tableau. Voici un exemple de code :

<style>
.table {
display:table;
border-collapse: separate;
border-spacing:1em;
border:1px dashed black;
}

.colonne {
width:150px;
display:table-cell;
background-color:#452300;
color: #fff;
}

</style>

<div class="table">

<div class="colonne">Le contenu s'étend pour s'adapter au contenu de la deuxième colonne.</div>
<div class="colonne">
<p>Cette colonne a un contenu plus important et s'étend naturellement vers le bas pour s'adapter.</p>
<p>C'est ce que fait une DIV ordinaire.</p>
</div>


</div>

Si votre navigateur est compatible, vous verrez deux colonnes de même hauteur.

Le contenu s’étend pour s’adapter au contenu de la deuxième colonne.

Cette colonne a un contenu plus important et s’étend naturellement vers le bas pour s’adapter.

C’est ce que fait une DIV ordinaire.

Pour ceux qui ont un navigateur encore à la traîne, le pseudo-tableau devrait ressembler à ceci :

Pseudo-tableau en CSS

Je ne refais pas toute la démonstration, l’article publié par Rachel Andrew sur Digital Magazine est en anglais mais les exemples de code sont parlants.

Des mises en pages simplifiées

Ce que cela signifie ? La libération du webdesign ! Finis les bricolages avec des images de fond coloréés (ou encore des scripts qui recalculent les dimensions) pour « étendre » artificiellement un bloc à la hauteur d’un autre. La mise en page retrouve une partie de la souplesse qu’elle avait perdue.

Il ne reste plus qu’à patienter le temps que IE 8.0 s’impose et remplace les IE 7.0 et autres 6.0 encore en activité. Plus que quelques années ?…

Bookmark and Share
Outil de référencement professionnel - essai gratuit Cette entrée a été publiée dans Webdesign, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

3 réponses à Le retour des tables HTML via CSS (la guerre est finie)

  1. oelmekki dit :

    "Il ne reste plus qu’à patienter le temps que IE 8.0 s’impose et remplace les IE 7.0 et autres 6.0 encore en activité. Plus que quelques années ?.."

    Quel optimisme :)

    Une idée si des discussions sont en cours pour intégrer ce comportement dans les standards CSS?

  2. Damien Ravé - Le Caphar dit :

    A priori c’est intégré dans les spécifications CSS3. La vraie question est : quels modules (puisque CSS3 est modulaire) les navigateurs utilisés par le grand public intègrent-ils ? Parce que c’est bien beau d’avoir quelques bijoux technologiques 100% compatible avec les standards (Opéra, Safari ou Gecko) mais si 80% des visiteurs sont restés à l’ère de Netscape 3.0, les designers risquent de déprimer.

  3. oelmekki dit :

    C’est bien le problème :)

    Cela dit, je pense que c’est important de ressasser les multiples avantages des fonctionalités les plus récentes ne serait-ce que pour qu’elles ne soient pas oubliées.

    J’ai tendance à penser "ie6" quand j’intègre, je l’avoue. Le risque est de s’y faire et de freiner l’assimilation des nouvelles features par les navigateurs…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>