CSS alternative syntax for HTML Table cellspacing

 The CSS alternative syntax of HTML Table cellspacing can be achieved with the border-spacing attribute. The so-called border-spacing attribute refers to the "border space", which can achieve the same effect as the cellspacing attribute of the traditional HTML table , and it can further The horizontal and vertical distances between the table fields are designed separately. To design table fields with the same horizontal or vertical distance , you can directly use the border-spacing attribute or the traditional HTML cellspacing attribute. field vertical space frame design is different, you must use CSS 's border-spacing and border-collapse property together with the use of examples of these two effects will make the difference. CSS border-spacing property syntax

border-spacing: the horizontal distance between table fields and the vertical distance between table fields;

If only one of the two parameters is written, it means that the horizontal and vertical distances of the table fields are the same. Separately, the horizontal and vertical distances can be designed separately. For the usage of the border-spacing attribute, please refer to the other introduction on this site , There are more detailed grammar usage rules and examples.

• CSS border-spacing property
  

The following example will show the usage and differences between HTML cellspacing and CSS border-spacing.

Example of CSS alternative syntax for HTML Table cellspacing 1. Original cellspacing effect

<table cellspacing="10" border="1">
<tr><td>Use the fields after cellspacing</td><td>Use the fields after cellspacing</td></tr>
<tr>< td>Use the fields after cellspacing</td><td>Use the fields after cellspacing</td></tr>
</table>

Rendering effect

Field after using cellspacing	Field after using cellspacing
Field after using cellspacing	Field after using cellspacing

Examples of a just provide the raw HTML the Table of cellspacing attribute to you to see, Examples of such wording "cellspacing =" 10 "", showing a table between a horizontal border and vertical border between them from the field are 10px, cellspacing of pre-distance unit Set to px, please refer to this article for the usage of HTML cellspacing

• HTML table cellspacing attribute

Examples Next will use two CSS 's border-spacing complete example of a substituted HTML Table cellspacing effect.

Example of CSS alternative syntax for HTML Table cellspacing 2. Switch to CSS border-spacing effect

<table style=" border-spacing:10px; "border="1">
<tr><td>The field after using border-spacing</td><td>The field after using border-spacing</td ></tr>
<tr><td>Use the field after border-spacing</td><td>Use the field after border-spacing</td></tr>
</table>

Rendering effect

Fields after using border-spacing	Fields after using border-spacing
Fields after using border-spacing	Fields after using border-spacing

Example 2 uses CSS style to declare styles. The red mark " border-spacing:10px; " is the effect of replacing HTML cellspacing . Only the parameter value of 10px is used. The effect is equivalent to the cellspacing of Example 1. In the next example, you can see How to separate the horizontal distance and vertical distance of the table column design.

Example of CSS alternative syntax of HTML Table cellspacing 3. The horizontal and vertical distances of the fields are different

<table style=" border-spacing:20px 5px;border-collapse:separate; "border="1">
<tr><td>Fields after using border-spacing</td><td>Use border-spacing The field after the </td></tr>
<tr><td>The field after the use of border-spacing</td><td>The field after the use of border-spacing</td></tr>
< /table>

Rendering effect

Fields after using border-spacing	Fields after using border-spacing
Fields after using border-spacing	Fields after using border-spacing

The CSS style of example three " border-spacing:20px 5px;border-collapse:separate; " means that the horizontal border distance between the table fields is 20px, the vertical distance is 5px, and the effect of border-collapse:separate is used to tell The browser should separate the horizontal and vertical distances. Although this border-collapse does not have to be written, it is better to write it in order to avoid some browser misjudgments leading to loss of effect.

➤Learn the distance between the table fields, what about the distance inside the table? Read this article: CSS alternative syntax for HTML Table cellpadding .