HTML table cellspacing attribute

 The function of the HTML Table cellspacing attribute is used to design the "distance between fields" in the table . It is often confused with cellpadding . When we use cellspacing to increase the distance of the table fields, it will feel as if the box lines of the table have changed. It’s thick, it’s actually due to the visual effect caused by the increased distance between the fields. The default distance between the fields of the HTML table is not obvious. If the table border is set to 0 and the cellpadding is also set to 0, it is almost You can't feel the distance between the table fields, it is easy to stick together, but if you make good use of the effects of the cellspacing property, combined with the border and cellpadding properties, you can solve this problem.

HTML Table cellspacing attribute basic syntax

cellspacing: distance value;

Distance referred to here is the value table the distance between the fields, the default unit is px, the entire cellspacing should write in the table in the Table will be effective beginning with the label.

Note, the cellspacing property will also increase the distance between the table column and the table border .

HTML Table cellspacing attribute example

Table that has not used cellspacing
<table border="1">
<tr><td>This is the test field content</td><td>This is the test field content</td></tr>
</table >

Forms that have used cellspacing
<table cellspacing="8" border="1">
<tr><td>This is the test field content</td><td>This is the test field content</td></ tr>
</table>

Rendering effect

Forms that haven't used cellspacing

This is the test field content

This is the test field content

Forms that have used cellspacing

This is the test field content

This is the test field content

In order to clearly show the effect of using cellspacing difference, examples were prepared two HTML tables , the code is only a difference " cellspacing =" 8 " " This section presents the results from the example you can see, the table in There is a distance of 8px between the two fields, and a distance of 8px from the border of the table. It looks like the border of the table has become thicker. In fact, the distance between the fields has been increased. This is the main function of cellspacing. . Through this effect, if you match the design of the background color and border style of the table, you can also create a unique web form . Take a look at these articles for reference.

• HTML Table table background color
• HTML Table table border color and style design

In order to make the table more beautiful or easier to read, web designers usually use the cellspacing attribute and cellpadding to design HTML tables together . This article focuses on the explanation of cellspacing. It is recommended that you read the content of " HTML Table cellpadding attribute " , Understand this attribute of cellpadding.

CSS border-spacing can achieve more advanced effects than cellspacing, please refer to: CSS border-spacing property .