How to set table color in css

CSS is a style sheet language for HTML documents that can be used to set the appearance and layout of HTML documents. In web development, Table is a very commonly used HTML element, and the color of Table can be set through CSS. This article will introduce how to use CSS to set the color of a Table.

1. Table background color

The background color of Table can be set through the background-color property in CSS. This attribute can accept any CSS color value, such as color name, hexadecimal value or RGB value, etc.

For example, the following CSS style sets the background color of a Table to light blue:

table {
  background-color: #87CEFA;
}

2. Table border color

The border attribute in CSS can be used Set the border of the Table, including border width, style and color. Among them, the border color can be set individually through the border-color attribute, or simultaneously through the abbreviation of the border attribute. For example:

table {
  border: 1px solid #ccc;
}

This style sets the border width of a Table to 1 pixel, and the border style is Solid lines, border color gray.

3. Cell Color

The color of the cells in the Table can be set individually through CSS styles. You can make the Table more beautiful by setting the background color and border color of the cells.

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

This style sets the background color of all cells to white and the border color to gray.

4. Odd and even row colors

For some relatively large Tables, it may appear confusing if you only distinguish each row by cell color. At this time, you can set the color of the odd and even rows, that is, set the background color of the even rows and odd rows to different colors, so that each row can be clearly distinguished.

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

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

This style sets the background color of odd-numbered rows to white and the background color of even-numbered rows to light gray.

In general, flexible color settings can be set for the Table through CSS, which not only improves the aesthetics, but also makes the Table easier to read and understand. Developers can flexibly use the style setting function of CSS according to their own needs.

The above is the detailed content of How to set table color in css. For more information, please follow other related articles on the PHP Chinese website!