Mise en forme des tableaux

bsr,je voudrais faire la mise en forme(par exemple les lignes paires en bleu et les lignes impaires en vert,si possible faire un peu d'ombrage sur mes tableaux)d'un tableau que me génère une page PHP de ma base de données.Malheureusement je n'y arrive pas encore.Quelqu'un voudrait-il bien m'aider?Merci!

Bonjour et bienvenue,

je déplace ton sujet dans le Salon CSS et mise en forme car HTML et sémantique web est réservé à la discussion sur l'intérêt à tel endroit de tel ou tel élément HTML. Dans ton cas, pas de doute c'est bien de table, caption, thead/tbody/tfoot, tr et th/td dont il s'agit

Tu as deux façons de faire.
La première, compatible avec Internet Explorer 6, 7 et 8, est de rajouter une classe sur les éléments tr que tu veux styler différemment, ici un tr sur deux.
EDIT: l'opérateur modulo % de PHP est très utile dans ce cas avec une variable qui compte le nombre de lignes
Si tu n'as pas déjà un compteur, une variable booléenne et ses deux valeurs false et true fera l'affaire :

// Initialisation
$pair = false;

// Dans la boucle mysql_...(), ajout de deux lignes de code :
if $pair echo ' class="pair"'; // rien si impair, voir variante ci-dessous si ça ne convient pas
// Variante
//echo $pair ? ' class="pair"' : ' class="impair"'; // opérateur ternaire qui permet de rajouter deux classes différentes aux lignes impaires et paires de tbody
$pair = !$pair; // opérateur logique not, cette variable prend donc successivement les valeurs true false true false ... après avoir été initilisée à false avant le début de la boucle
// fin boucle mysql_...()

La seconde, utilisant un sélecteur CSS3 donc pas compatible avec IE8 et versions précédentes, est d'utiliser le sélecteur :

tr:nth-child(2n) { background-color: pink; } /* lignes paires */

Entre parenthèses, les deux choix les plus courants sont 2n pour les lignes paires et 2n+1 pour les lignes impaires.

Attention, si tu utilises comme c'est prévu les éléments thead et tbody, la 1ère ligne dans thead est impaire, la 1ère ligne dans tbody est aussi impaire (même si c'est la deuxième de l'élément table, c'est quand même la première de son parent tbody !). A priori tu sais combien de lignes d'entête tu as et SURTOUT tu vas probablement styler les lignes d'entête avec une 3ème couleur pour les distinguer du corps du tableau m'enfin soit pas surpris (et puis c'est le même problème ou presque avec les classes sur tr ...)
Ca donne quelque chose comme :

thead tr { background-color: black; color: white; }
tbody tr:nth-child(2n) { background-color: #9E9; color: black; }
tbody tr:nth-child(2n+1) { background-color: #CFC; color: black; }

EDIT: code PHP dans le premier cas
Modifié par Felipe (28 Mar 2010 - 12:10)