How to set table border style with CSS

Today I will talk to you about how to set the border style of table with CSSTableThere are 4 situations in setting CSS style border for table. The following will explain in detail how to deal with these four situations.

1. Only set the border for table

2. Set the border for td

3. Set the table border skillfully for table and td

4. Set the background for table and td to achieve perfect table borders

The following is an explanation and case demonstration of the above several HTML table border styles. In order to facilitate observation, divcss5 sets all case tables to a 1px solid red border as an example; the table width is 400px; the table has three columns and three rows. For the above four cases, a div box is added to the outer layer of the table, and the CSS names are ". table-a", ".table-b", ".table-c", ".table-d".

Set the border only for the table label

Set the border (border) style only for the table label, which will give the outermost table of the table a border. The border style is not generated inside the table.

The case details are as follows:

1. Corresponding css code

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

2. Corresponding html code snippet

<div class="table-a"> 
<table width="400" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="105">站名</td> 
<td width="181">网址</td> 
<td width="112">说明</td> 
</tr> 
<tr> 
<td>PHP</td> 
<td>www.php.cn</td> 
<td>php</td> 
</tr> 
<tr> 
<td>php</td> 
<td>www.php.cn</td> 
<td>php</td> 
</tr> 
</table> 
</div>

These are the methods for setting the table border style in CSS Friends who need it can save it, and please continue to pay attention to other updates of this site.

Related reading:

How to set the margin attribute of CSS

Set the background color of DIV What are the methods

How to use DIV+CSS

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