HTML Table table border color and style design

 HTML Table Table border color and style can use css 's border-width , border-Color and border-style three attributes to design, you can directly use css border border properties directly once finished, the syntax is more concise and easier to maintain, an ordinary In this case, the four borders of the table are almost the same color. Only a few times, different borders need to be designed for four different directions. In either case, CSS can do it. This introduction will provide several Different examples allow readers to see different ways of designing HTML table borders. These examples are supported by almost all mainstream browsers.

HTML Table table border color is the same as style design example 1, four borders

<table style=" border:3px #cccccc solid; "cellpadding="10" border='1'>
<tr><td>This is a table field</td><td>This is a table field</td ></tr>
<tr><td>This is a table field</td><td>This is a table field</td></tr>
</table>

<table style=" border:3px #FFD382 dashed; "cellpadding="10" border='1'>
<tr><td>This is a table field</td><td>This is a table field</td></tr>
<tr><td >This is a table field</td><td>This is a table field</td></tr>
</table>

<table style=" border:8px #FFD382 groove; "cellpadding="10" border= '0'>
<tr><td>This is a table field</td><td>This is a table field</td></tr>
<tr><td>This is a table field</td><td>This is a table field</td></tr>
</table>

Rendering effect

This is a table field	This is a table field
This is a table field	This is a table field

This is a table field	This is a table field
This is a table field	This is a table field

This is a table field	This is a table field
This is a table field	This is a table field

Example 1 provides two tables with different border colors and styles. You can see that the difference is mainly in the border setting in the opening tag of the table. Others such as cellpadding and the border of HTML itself are just to make the example clearer. Please note, CSS 's border with HTML preset table border is not the same, HTML of the border on behalf of all the border instead of the border, the first two tables border = "1" representing all forms of borders are 1, third The border='0' of the table means that all borders are 0, so the borders between the fields disappear. If you want to further study the rules of HTML table design, please refer to this article: HTML table .

In the first example, we did not use border-color or border-style independent writing. If you are interested in CSS border design techniques or independent writing of various effects, these articles are worth studying.

• CSS border
• CSS border-color border color
• CSS border-style

After reading the introduction of Example 1, there should be a concept for the four border design of the table. Example 2 is the design of different borders. Please continue reading.

HTML Table table border color and style design example 2. Different border effects

<table style=" border-top:3px #FFD382 solid;border-bottom:3px #82FFFF solid; "cellpadding="10" border='0'>
<tr><td>This is a table field</td> <td>This is a table field</td></tr>
</table>

Rendering effect

This is a table field

This is a table field

In the second example, CSS border is used to design the upper and lower borders. Border-top is used to design the upper border and border-bottom is used to design the lower border. The four borders of css have different expressions. It is very useful when you need to modify a frame independently.

• border-top ← is used to design the top border.
• border-right ← is used to design the right border.
• border-bottom ← is used to design the bottom border.
• border-left ← is used to design the left border.

In the second example, only the top and bottom border styles are designed, so the left and right borders are not displayed, so use the css border property to design the table border. Only the ones that are written will be displayed. The default borders are not written. It is none, which means it is not displayed. It takes time to design for each direction separately, but you can design a unique frame style.