Médiaforma

All posts tagged tr

Pour définir un tableau, vous utiliserez la balise <table></table>. Chacune des lignes du tableau sera repérée par la balise <tr> </tr> et chacune des colonnes d’une ligne par la balise <td> </td>.

Voici un exemple élémentaire de tableau contenant deux lignes et trois colonnes :

Pour mieux visualiser les cellules du tableau, nous allons leur ajouter des bordures avec l’attribut border de la balise <table> :

Comme vous pouvez le voir la taille des cellules s’adapte à leur contenu, tout en conservant une cohérence sur les colonnes. Ainsi, la largeur d’une colonne sera définie par la cellule dont le contenu est le plus large. Dans l’exemple précédent, la cellule qui contient le mot “quatrième” fixe la largeur de la première colonne, et la cellule qui contient le mot “troisième” fixe la largeur de la troisième colonne.


Dans cette rubrique, je vais vous présenter quelques pseudo-sélecteurs CSS dédiés aux tableaux.

  • :first-child est le premier élément ;
  • :last-child est le dernier élément ;
  • :empty correspond aux éléments vides.

Nous ferons nos essais dans ce document :

Les lignes 10 à 17 définissent un tableau de 6 lignes sur 3 colonnes et placent des données dans certaines de ses cellules :

Pour colorer en rouge l’arrière-plan de la première ligne du tableau, nous insérons la ligne suivante entre les balises <style> et </style> :

tr:first-child { background-color: red; }

Voici le résultat :

Pour colorer en rouge la dernière colonne du tableau, nous insérons la ligne suivante entre les balises <style> et </style> :

tr:last-child { background-color: red; }

Voici le résultat :

Enfin, pour colorer en rouge toutes les cellules vides, nous insérons la ligne suivante entre les balises <style> et </style> :

td:empty { background-color: red; }

Voici le résultat :