Table d'apparence professionnelle en CSS

Sans aucun framework Ajax, mais avec juste une fonction JavaScript pour alterner les couleurs, on peut donner à ses tables HTML l'apparence d'un tableau de magazine ou de site professionnel.

La démonstration est faite sur une structure de table complète et une structure simplifié (voir l'article Les tables en HTML 4 et 5 pour plus de détail). Le rendu est exactement le même.

Code HTML de la table

La balise caption est une option tout comme les balises thead et tbody..

<table>
<thead>
  <caption></caption>
</thead>
<tbody>
  <tr>
    <th></th>  ...trois cellules...
  </tr>
  <tr>
    <td></td><td></td><td></td>
     ...quatre lignes de trois cellules chacune.
  </tr>
</tbody>
</table>

On notera l'utilisation de balises d'en-tête <th> en début de colonne. On peut les utiliser aussi au début des lignes.

Le code CSS

Il s'applique globalement à toutes les tables dans la page.

table {
border-collapse:collapse;
width:100%;
max-width:700px;
min-width:400px;
text-align:center;
}

caption {
caption-side:bottom;
font-weight:bold;
font-style:italic;
margin:4px;
}

table,th, td {
border: 1px solid gray;
}

th, td {
height: 24px;
padding:4px;
vertical-align:middle;
}

th {
background-image:url(table-shaded.png);
}

.rowtitle {
background: #9CF;
font-weight:bold;
}

Les attributs border-collapse et border permettent de créer un bord de largeur uniforme.

L'attribut caption-side place le libellé de table au-dessous de celle-ci. On peut omettre cet attribut pour le garder au-dessus.

On utilise .rowtitle pour les titres de lignes de la seconde table, pour la démonstration. On peut aussi bien utiliser des balises <th> comme dans la première. Mais dans ce cas on ne peut pas spéficier une hauteur propre à cette balise et différente de celle des balises <td>.

text-align et vertical-align centrent les libellés. On peut les aligner autrement avec des feuille de style.

Les autres attributs sont des choix de présentation, notamment les dimensions maximales et minimales de la taille, les hauteurs de lignes.

La fonction JavaScript

L'alternance des couleurs pour les lignes des tables est obtenue par une fonction JavaScript. On peut ainsi éditer les lignes de la table sans avoir à s'en soucier.

Elle s'applique globalement à toutes les lignes de toutes les tables dans la page.

function colourize() {
  var dnl = document.getElementsByTagName("tr");
  for(i = 0; i < dnl.length; i++) {
    if((Math.round(i / 2) * 2) == ((i / 2) * 2) )
    dnl.item(i).style.background="#F0F0F0";
  } 
}
window.onload = colourize;

Un objet DOMNodeList regroupant toutes les balises <tr> est créé, et l'attribut de couleur est changé pour toutes les balises dont l'indice est impair.

Démonstration avec le code simplifié

C'est une balise table avec des lignes <tr> et des cellules <td> ou <th>.

On utilise des balises <th> pour les en-têtes de colonnes.

Utilisation	Rapide	Sûr
Application locale	C++	Pascal
Web coté serveur	PHP	Java
Web coté client	JavaScript	CSS
Système	C	Go

Avec le code HTML complet

Il ajoute les balises caption, thead, et tbody.
Le choix des images de fond et des couleurs est indépendant de la structure de la table.

Caption : Libellé de la table

Utilisation	Rapide	Sûr
Application locale	C++	Pascal
Web coté serveur	PHP	Java
Web coté client	JavaScript	CSS
Système	C	Go

Supprimer le code JavaScript et alterner les couleurs en CSS

Cela est possible en CSS pour IE9 et les autres navigateurs. On ajoute le sélecteur suivant à la propriété tr:

table tr:nth-child(odd) td {
  background-color: #F0F0F0;
}

ou avec un nom de classe:

.pretty tr:nth-child(odd) td {
  background-color: #F0F0F0;
} 

Les pseudo-classes de la forme :nom ne sont pas supportées par les anciennes versions de navigateurs.