How to set the border style of html table with CSS

How to set the table border style: 1. Add the "border: border width, border style, border color" style to the table element to set the border style for the entire table; 2. Add "border: border width" to the td element Border style "Border color" style, you can set the border style for each cell.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS How to set the table border style

Setting the CSS style border on the table is divided into several situations:
1. Set the border only on the table
2. Set the td Border

In order to facilitate observation, all case tables are set to a 1px solid red border as an example; the table width is 400px; the table is three columns and three rows. In the above cases, a p box is added to the outer layer of the table and named respectively. For ".table-a", ".table-b".

1. Only set the border style for the table label

##Set the border style only for the table label. The outermost table of this table will have a border, but no border style will be generated inside the table.

The case details are as follows:

Corresponding css code

<style>
 .table-a table{
 border:1px solid #F00
 } 
 /* css注释：只对table标签设置红色边框样式 */ 
 </style>

Corresponding html code fragment

<p class="table-a"> 
<table width="400" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
        <td width="105">1</td> 
        <td width="181">2</td>
        <td width="112">3</td> 
    </tr> 
    <tr> 
         <td>1</td>
         <td>2</td> 
         <td>3</td>
    </tr>
    <tr>
         <td>4</td> 
         <td>5</td> 
         <td>6</td> 
    </tr> 
</table> 
</p>

Effect:

2. Set the border for td

For table table td Set the border style. The td within the table object will implement the border style, but the middle td will cause double borders to appear.

Corresponding css code

<style>
.table-b table td{
border:1px solid #F00
} 
/* css注释：只对table td标签设置红色边框样式 */ 
</style>

Corresponding html source code fragment

<p class="table-b"> 
<table width="400" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
        <td width="105">1</td> 
        <td width="181">2</td>
        <td width="112">3</td> 
    </tr> 
    <tr> 
         <td>1</td>
         <td>2</td> 
         <td>3</td>
    </tr>
    <tr>
         <td>4</td> 
         <td>5</td> 
         <td>6</td> 
    </tr> 
</table> 
</p>

Effect:

##Learning video sharing:

css video tutorial

The above is the detailed content of How to set the border style of html table with CSS. For more information, please follow other related articles on the PHP Chinese website!