Modifier la couleur d'arrière-plan d'un tableau HTML
Ce qu'il faut savoir
- Le plus simple : ajouter la propriété style Couleur de l'arrière plan à la balise de tableau, de ligne ou de cellule.
- Plus simple ensuite : 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.
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é au profit des feuilles de style, ce n'est donc pas la meilleure façon 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é de style Couleur de l'arrière plan à la balise de tableau, de ligne ou de cellule.
Cet exemple modifie la couleur d'arrière-plan d'un tableau entier :
|__+_|Pour changer la couleur d'une seule ligne, insérez la propriété background-color dans le
Vous pouvez modifier la couleur d'une seule cellule en ajoutant l'attribut à la
Vous pouvez également appliquer des couleurs d'arrière-plan aux en-têtes de tableau ou
|__+_|
Modifier 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 au HEAD de votre document HTML ou les définir dans un feuille de style externe . Des modifications comme celles-ci dans HEAD ou une feuille de style externe peuvent apparaître comme celles-ci pour les tableaux, les lignes et les cellules :
tableau { couleur de fond : #ff0000 ; }
tr { couleur de fond : jaune ; }
td { couleur de fond : #000 ; }
Définition de la couleur d'arrière-plan des colonnes
La meilleure façon de définir la couleur d'arrière-plan d'une colonne consiste à créer un classe de style puis affectez-le 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 { couleur d'arrière-plan : bleu ; }
Le HTML :
cellule 1 cellule 2 cellule 1 cellule 2
L'un des avantages significatifs du contrôle des couleurs d'arrière-plan via une feuille de style est que vous pouvez modifier votre choix de couleur ultérieurement. Plutôt que de parcourir le document HTML et d'apporter la modification à chaque cellule, vous pouvez apporter une seule modification au choix de couleur dans le CSS qui s'appliquera immédiatement à chaque cas où le class='ColColor' la syntaxe apparaît.
Bien que l'insertion de CSS dans votre HTML, ou l'appel d'un fichier CSS séparé, ajoute un peu de surcharge administrative au-delà de la simple modification d'un attribut HTML, vous constaterez que s'appuyer sur CSS réduit les erreurs, accélère le développement et améliore la portabilité de votre document.