4 colonnes en tableau sans tableau

© Paladin. Document créé le 19 avril 2007 , mis à jour le 1er février 2011.

Les cons ça ose tout. C'est même àça qu'on les reconnaît. Michel Audiard

Accueil du site > Astuces > CSS > 4 colonnes en tableau sans tableau

Tableau / CSS 2

L’interprétation des float/clear en CSS est parfois bien complexe à appréhender. Et s’il n’est pas trop compliqué de placer quelques float dans une page, cela devient nettement plus complexe lorsque certains clear:none dans un élément profondément enfoui destructure l’ensemble.

Une alternative est la construction de tableau sans tableau. Un ensemble de div simulant la construction d’un tableau, le tout défini par des feuilles de styles.

Voici un exemple CSS que je vous propose de tester/valider, proposant la construction d’un tableau de 4 colonnes, sans passer par les tags consacrés (table).

Vous remarquerez au passage l’utilisation des commentaires conditionnels pour Internet Explorer. En effet, ce dernier, malheureusement, est quelque peu réticent à interpréter correctement certains attributs CSS.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table display</title>
<style type="text/css">
body, html {
        margin:0;
}
div.table {
        display:table;
        /* Joindre les bords des cellules */
        border-collapse:collapse;
        /* Forcer le tableau à prendre la largeur écran */
        width:100%;
        border:2px solid red;
}
div.caption {
        /* Ffox n'affiche pas le caption dans la table
                il faut le déclarer bloc */
        display:block;
        /* Si déclaré bloc, lui donner la largeur des
                td cumulés */
        width:400%; /* 100 % x 4 colonnes */
        /* Aligner le titre au centre */
        text-align:center;
}
        /* tbody optionnel */
div.tbody {
        display:table-row-group;
}
div.tr {
        display:table-row;
}
div.td {
        display:table-cell;
        border:1px solid red;
        padding:5px;
        width:24.5%;
}
div.end {
        width:auto;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div.table {
        /* 100 % fait sortir le tableau de la fenêtre */
        width:auto;
}
div.caption {
        /* table-caption est reconnu/interprété par IE */
        display:table-caption;
        width:auto;
}
div.td {
        /* table-cell ne passe pas pour IE, obligé bloc et float */
        display:block;
        border:thin solid blue;
        float:left;
}
div.end {
        /* dernière cellule */
        width:auto;
        float:none;
}
</style>
<![endif]-->
</head>

<body>

<div class="table">
        <div class="caption">Titre du tableau</div>
                <div class="tbody">
                        <div class="tr">
                        <div class="td">Première cellule</div>
                        <div class="td">Seconde cellule</div>
                        <div class="td">Troisième cellule</div>
                        <div class="td end">Dernière cellule</div>
                </div>
        </div>
</div>

</body>
</html>

Comme vous pouvez le voir ici, pas de tableau déclaré en HTML. Pourtant, le résultat affiché est un tableau, qui prend toute la largeur de l’écran, avec titre et 4 colonnes.

Validé sur Firefox 2 et Internet Explorer 7.

Plussoyez !

Les forums sont fermés.

  • 4 colonnes en tableau sans tableau 23 mai 2007 02:33, par Christophe

    Merci pour cette approche intéressante.

    Testé également avec IE6 : OK

    Par contre avec FF2... le tableau sort légèrement de l’écran sur la droite (pas de barre de défilement affichée)

    ...et j’ai pas de solution à proposer. désolé :(

    @+
    Christophe

    Les forums sont fermés.

  • 4 colonnes en tableau sans tableau 13 août 2009 14:17, par Rob2
    Pour moi, pas moyen de le faire marcher sous IE :/ Il n’y a pas une autre méthode ?

    Les forums sont fermés.

  • 4 colonnes en tableau sans tableau 29 décembre 2009 15:09, par freddy

    Bjr,

    Si dans la 4 ième colonne il ya + de lignes que dans les 3 autres, la div passe sous les 3 precedentes

    Peut-on faire un colonnage strict comme dans les

     ?

    Cdlt

    freddy

    Les forums sont fermés.

  • 4 colonnes en tableau sans tableau 4 mars 2011 17:55, par kim
    Bonjour, je viens de découvrir votre tutoriel et j’ai testé le code. J’en suis impressionné comme l’explication est simple et efficace. Et aussi à quel point je trouve un tableau en div bien plus propre qu’un tableau traditionnel. J’avais déjà testé un tableau en div auparavent, mais ça ne rendait pas aussi bien que les explications que vous avez publié. Merçi mille fois...

    Les forums sont fermés.