Médiaforma

All posts tagged td

Dans la rubrique précédente, vous avez appris à définir une bordure personnalisée pour un tableau. Dans cette rubrique, nous allons voir comment définir une bordure personnalisée pour chacune des cellules du tableau. Pour cela, il va falloir modifier le style de la balise <td>.

Commencez par insérer une balise <style> </style> entre les balises <head> et </head>, et définissez le type de la balise <style> à “text/css”. Pour modifier le style de la balise <td>, il suffit d’écrire td entre les balises <style> et </style> et d’énumérer les caractéristiques de la balise <td> entre des accolades. Ici, toutes les balises <td> auront une couleur rouge pointillée épaisse de 5 pixels.

Avec cet exemple élémentaire, vous commencez à percevoir le potentiel des instructions CSS. Le simple fait d’avoir modifié le style de la balise <td> entre les balises <style> et </style> s’applique à tout le document.

Un dernier détail : pour éviter d’avoir des bordures répétées entre les cellules, il suffit de définir la propriété CSS border-collapse de la balise <table> et de lui affecter la valeur collapse.


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 :