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 simple

La balise caption est une option.

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

On notera l'utilisation de balises d'en-tête <th> en début de colonne et en début de ligne.

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="#E8E8FF"; }
} 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 et de lignes.

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 complet

Il ajoute les balises caption, thead, et tbody. Le rendu est identique sous Firefox et Internet Explorer .
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 utilise le sélecteur suivant:

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

ou avec un nom de classe:

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

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

© 2010-2014 Xul.fr