Comment changer la couleur d'arrière-plan d'un tableau HTML

Ce qu'il faut savoir

  • Le plus simple: ajoutez la propriété style Couleur de l'arrière plan au tableau, à la ligne ou à la balise de cellule.
  • Ensuite, le plus simple: utilisez l'attribut bgcolor.

Cet article explique les méthodes permettant de modifier les couleurs d'arrière-plan des parties d'un tableau sur un site Web.

Script informatique HTML de type orange et bleu sur fond noir

L'ancienne méthode utilisait l'attribut bgcolor pour changer la couleur de fond d'un tableau. Il peut également être utilisé pour changer la couleur d'une ligne de tableau ou d'une cellule de tableau. Mais l'attribut bgcolor a été déprécié en faveur des feuilles de style, ce n'est donc pas le moyen optimal de manipuler la couleur d'arrière-plan d'un tableau.

La meilleure façon de changer la couleur d'arrière-plan est d'ajouter la propriété style Couleur de l'arrière plan au tableau, à la ligne ou à la balise de cellule.

Cet exemple modifie la couleur d'arrière-plan d'un tableau entier:


Pour modifier la couleur d'une seule ligne, insérez la propriété background-color dans le fichier.

instagram viewer

Vous pouvez modifier la couleur d'une seule cellule en ajoutant l'attribut au fichier.


Vous pouvez également appliquer des couleurs d'arrière-plan aux têtes de table ou aux


Changer la couleur d'arrière-plan à l'aide de feuilles de style

Cependant, il vaut mieux éviter d'utiliser l'attribut background-color au profit d'une feuille de style correctement formatée. Par exemple, vous pouvez définir les styles dans une feuille de style à l'EN-TÊTE de votre document HTML ou les définir dans un feuille de style externe. Des modifications comme celles-ci dans HEAD ou dans une feuille de style externe peuvent apparaître comme celles-ci pour les tableaux, les lignes et les cellules:

table { couleur d'arrière-plan: #ff0000; }
tr { couleur d'arrière-plan: jaune; }
td { couleur d'arrière-plan: #000; }

Définition de la couleur d'arrière-plan de la colonne

La meilleure façon de définir la couleur d'arrière-plan d'une colonne est de créer un classe de style puis l'affecter aux cellules de la colonne. La création d'une classe vous permet d'affecter cette classe aux cellules d'une colonne spécifique à l'aide d'un attribut.

Le CSS:

td. ColColor { background-color: blue; }

Le HTML:


cellule 1cellule 2cellule 1cellule 2

Un avantage important du contrôle des couleurs d'arrière-plan via une feuille de style est que vous pouvez modifier votre choix de couleur plus tard. Plutôt que de parcourir le document HTML et de modifier chaque cellule, vous pouvez modifier une seule fois le choix de couleur dans le CSS qui sera immédiatement appliqué à chaque cas où le class="ColCouleur" la syntaxe apparaît.

Bien qu'intercaler CSS dans votre HTML, ou appeler un fichier CSS séparé, ajoute un peu de surcharge administrative au-delà de la simple modification un attribut HTML, vous constaterez que le CSS réduit les erreurs, accélère le développement et améliore la portabilité de votre document.