Des tableaux de données simples, standards et lisibles en CSS et PHP

Même si leur usage a été banni dans la mise en forme de pages au profit des DIV, les tableaux sont un outil de choix dès qu'il s'agit d'afficher des données sous forme de lignes et de colonnes. Il reste cependant difficile de créer des tableaux lisibles et conformes aux standards. Voici un condensé de bonnes pratiques pour styler vos tableaux, qui n'a rien de révolutionnaire mais vous fera peut-être gagner du temps.

Même si leur usage a été banni dans la mise en forme de pages au profit des DIV, les tableaux sont un outil de choix dès qu'il s'agit d'afficher des données sous forme de lignes et de colonnes. Il reste cependant difficile de créer des tableaux lisibles et conformes aux standards. Voici un condensé de bonnes pratiques pour styler vos tableaux, qui n'a rien de révolutionnaire mais vous fera peut-être gagner du temps.

Remplacer le cellpadding

Les paramètres cellpadding et cellspacing des tableaux, bien qu'il soient obsolètes, continue d'être utilisé sous la forme <table cellpadding="5" cellspacing="0">. Pour l'espacement entre les cellules (cellspacing), l'équivalent en CSS est simple : c'est l'attribut border-spacing de l'élément table. Le "bourrage" (padding), lui, doit être appliqué individuellement sur chaque cellule. Mais grâce à l'héritage permis par CSS 2, la manoeuvre reste très simple. Prenons le tableau suivant :

<table class="tableau">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Par défaut, le padding des cellules sera réglé à 0. Cependant, il suffit d'utiliser le sélecteur table.tableau td ou même .tableau td pour affecter l'ensemble des cellules de cette table. On pourra donc régler le padding en détail avec le style suivant :

// CSS
.tableau {
    border-spacing:0;
}
.tableau td {
    padding : 0.2em 10em 0.2em 10em ; // haut-droite-bas-gauche
}

Tableau avec padding et spacing par défaut

1 2

3 4

Tableau avec padding et spacing sur mesure

1 2

3 4

Une bordure pour chaque cellule

De même qu'avec le padding, il est possible de spécifier la bordure autour de chaque cellule du tableau :

table.tableau td {
    border : 1px solid #eee ; 
}

Cependant, le style des tables par défaut juxtapose les bordures de chaque cellule lorsque deux d'entre elles se touchent, produisant un effet désagréable :

Tableau avec bordures juxtaposées

1 2

3 4

Pour réunifier les bordures concomitantes, CSS vous propose le paramètre border-collapse: collapse à intégrer au style de votre table :

// CSS
table.tableau {
    border-collapse:0;
}

Tableau avec bordures jointes

1 2

3 4

Remplir les cellules vides

Les cellules vides, ça arrive, surtout lorsque votre tableau sert à afficher des données issues de bases de données dont le remplissage reste aléatoire. Hélas, par défaut, si vous avez laissé un espacement entre les cellules (border-spacing) les cellules vides n'affichent rien, pas même la couleur de fond de la cellule. L'effet peut être perturbant pour votre mise en page :

Tableau avec cellules vides

1 2

3

4

Formater les en-têtes de colonnes

Les éléments TH existent depuis belle lurette pour identifier les en-têtes de colonnes. Pourtant on continue de voir des TD stylés dans ce but. Il est très facile d'employer la balise TH et de lui affecter un style approprié :

<table class="tableau">
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

// CSS
.tableau th {
   color: #666;
   font-size:0.8em;
}

Tableau avec en-têtes stylés

En-tête 1 En-tête 2

1 2

3 4

Un caption bien visible

Fini le H2, pratiquez le caption pour donner un titre à vos tableaux. Avec un peu de mise en forme, l'effet sera visuellement identique pour un respect des standards renforcé.

<table class="tableau">
<caption>Titre du tableau</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

// CSS
.tableau caption {
font-size:2em;
padding:1em 0 0.5em 1em; // HDBG;
}

Tableau avec caption stylé

1 2

Alterner entre plusieurs couleurs

Pour changer la couleur d'une ligne entière, on a souvent tendance à attribuer une classe (ou pire un style inline !) à chacune des cellules, ce qui démultiplie le code inutile. Il suffit pourtant de désigner chaque ligne (TR) impaire et de modifier par CSS l'ensemble des TD qui en descendent. Exemple :

<table class="tableau">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="impaire">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr class="impaire">
<td>7</td>
<td>8</td>
</tr>
</table>

// CSS
tr.impaire td {
   background-color: #eee;
}

Tableau avec lignes impaires stylées

1 2

3 4

5 6

7 8

Bonus : comment gérer l'affichage des lignes impaires en PHP ? Dans la boucle d'affichage qui va sortir chaque ligne dans un TR différent, intégrez le code suivant : <tr <?= ($ligne_i++ % 2 == 1) ? ' class="impaire"' : '' ; ?>>. Cette portion de code se décompose ainsi :

• la balise <tr> (en gras) délimite le tout. On lui greffe un bout de code PHP.
• Le code PHP, qui s'ouvre sur un <?= (équivalent raccourci de )
• Les parenthèses de condition suivies de la valeur retournée selon que la condition est vraie ou fausse : (condition) ? "retour si vraie" : "retour si fausse" ;
• La variable $ligne_i, que vous pouvez déclarer avec une valeur de zéro avant le tableau (surtout important pour la remettre à zéro si vous l'utilisez dans plusieurs tableaux successifs)
• Le signe ++ qui incrémente d'un point la valeur de la variable APRES l'avoir évaluée
• Le signe % 2 (modulo 2) qui renvoie le reste de la division de la variable $ligne_i par 2. A la première ligne, $ligne_i vaut 0 (AVANT incrémentation, je vous le rappelle). Le résultat de zéro divisé par 2 vaut zéro, reste zéro. A la deuxième ligne, $ligne_i vaut 1. Le division de 1 par 2 vaut zéro, reste 1. A la troisième, le reste vaut 0, à la quatrième il vaut 1, et ainsi de suite...
• Le dernier opérateur == 1 vérifie que l'opération précédente renvoie 1. C'est le cas pour toutes les lignes impaires.
• Lorsque cette condition est vérifiée, le script affiche class="impaire", dans le cas contraire il n'affiche rien et laisse le TR vierge.

Et si on résume

Voici la feuille de style minimale que j'utilise pour définir mes tableaux. A vous de l'adapter à vos besoins :

.tableau {
    border-collapse:collapse
}
.tableau td {
    padding : 0.4em ;
    border-spacing:0;
    border:1px solid #666;
    empty-cells: show;
    background-color:#fafafa;
 }
.tableau caption {
    font-size:2em;
    padding:1em 0 0.5em 1em; // HDBG;
}
.tableau tr.impaire td {
   background-color: #eee;
}
.tableau th {
   color: #666;
   font-size:0.8em;
   font-weight:bold;
   text-align:center;
}