Comment définir la couleur du tableau en CSS

CSS est un langage de feuille de style pour les documents HTML qui peut être utilisé pour définir l'apparence et la mise en page des documents HTML. Dans le développement Web, Table est un élément HTML très couramment utilisé et la couleur de Table peut être définie via CSS. Cet article explique comment utiliser CSS pour définir la couleur d'un tableau.

1. Couleur d'arrière-plan du tableau

La couleur d'arrière-plan du tableau peut être définie via la propriété background-color en CSS. Cet attribut peut accepter n'importe quelle valeur de couleur CSS, telle que le nom de la couleur, la valeur hexadécimale ou la valeur RVB, etc.

Par exemple, le style CSS suivant définit la couleur d'arrière-plan d'un tableau sur bleu clair :

table {
  background-color: #87CEFA;
}

2. Couleur de la bordure du tableau

L'attribut border en CSS peut être utilisé pour définir la bordure du tableau, y compris la largeur de la bordure, style et couleur. Parmi eux, la couleur de la bordure peut être définie individuellement via l'attribut border-color, ou simultanément via l'abréviation de l'attribut border. Par exemple :

table {
  border: 1px solid #ccc;
}

Ce style définit la largeur de la bordure d'un tableau à 1 pixel et le style de la bordure. est une ligne continue. La couleur est grise.

3. Couleur des cellules

Les cellules du tableau peuvent être définies individuellement en couleur via les styles CSS. Vous pouvez rendre le tableau plus beau en définissant la couleur d'arrière-plan et la couleur de la bordure des cellules.

td {
  background-color: #fff;
  border: 1px solid #ccc;
}

Ce style définit la couleur d'arrière-plan de toutes les cellules sur blanc et la couleur de bordure sur gris.

4. Couleurs de lignes impaires et paires

Pour certains tableaux relativement grands, cela peut paraître déroutant si vous distinguez chaque ligne uniquement par la couleur des cellules. À ce stade, vous pouvez définir la couleur des lignes paires et impaires, c'est-à-dire définir la couleur d'arrière-plan des lignes paires et des lignes impaires sur des couleurs différentes, afin que chaque ligne puisse être clairement distinguée.

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(odd) {
  background-color: #fff;
}

Ce style définit la couleur d'arrière-plan des lignes impaires sur blanc et la couleur d'arrière-plan des lignes paires sur gris clair.

En général, des paramètres de couleur flexibles peuvent être définis pour le tableau via CSS, ce qui améliore non seulement l'esthétique, mais rend également le tableau plus facile à lire et à comprendre. Les développeurs peuvent utiliser de manière flexible la fonction de définition de style de CSS en fonction de leurs propres besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!