css set table border

CSS is the abbreviation of Cascading Style Sheets, which can be used to set the style and layout of web pages. In web page production, tables are one of the common and important elements. How to set the border of the table with CSS is what we need to know.

1. Use the border attribute

The most common way to set the border of a table is to use the CSS border attribute.

The following is the CSS code to set the table border:

table {
border: 1px solid black;
}

In the above code, we are in the table element A border attribute is applied to it. Among them, the border attribute includes three attribute values, namely border-width, border-style, and border-color. The value used in this example is 1px solid black, which respectively represent:

border-width: the width of the border, usually specified in px units;
border-style: the style of the border, you can It is solid, dotted, dashed, double, etc.;
border-color: The color of the border, which can be a specific color name, hexadecimal color code or RGB color value.

2. Use the border color style attribute

When using the border attribute, you can use independent attribute values ​​to set the thickness, style and color of the border, as shown below:

table {
border-width: 1px;
border-style: solid;
border-color: black;
}

The effect of this code and the previous code is The same thing, except here we specify each style attribute of the border separately.

3. Set different border styles

If we want different border styles of the table to be different, we can set it like this:

table {
border-width: 1px ;
border-style: solid;
border-color: black;
border-top-style: dashed;
border-bottom-style: dotted;
}

By using border-top-style and border-bottom-style, we can set the styles of the upper and lower borders of the table independently. The above code sets the upper border of the table to dashed and the lower border to dotted.

4. Set only the border of the table header

Sometimes, we only want to set the border of the header part of the table, not the border of the entire table. We can select the header part by using thead, th, tr elements, and then set the border as needed.

The following is the CSS code to set the header border:

thead th {
border: 1px solid black;
}

In the above code, We just selected the th element in the thead element and set its border to a 1px solid line. If you only want to set the border of a certain cell in the table header, just replace thead th with the class or ID of the cell, and then set it.

Summary

The above are common methods for setting the borders of tables. We can choose different style attributes to realize the design of table borders as needed. When using border styles, we can set different styles according to our needs. For example, if we want the border styles of the table title and data rows to be different, we can set their styles separately. If you want to learn more about CSS table skills, you can check out professional tutorials and cases to learn more skills and practical methods.

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