HTML Table cellpadding attribute

 HTML table cellpadding attribute can be used to design the distance between the elements and borders within form fields, belonging to the HTML form the basic properties of the default HTML form text or images within, will stick together with the border, we can make the text or through cellpadding There is a distance between the picture and the table border, creating a more beautiful table and content presentation effect. The effect of using cellpadding in HTML Table is equivalent to using css padding in each table field (td) . Later, an example will be used to show the syntax difference between the two.

HTML Table cellpadding syntax

cellpadding="distance value"

The cellpadding grammar is very simple. Just write the distance value. The entire grammar is placed in the beginning tag of the HTML Table. The distance value unit in the grammar is preset to px.

HTML Table cellpadding usage example 1: Design directly with cellpadding

Table
<table border="1">
<tr><td>This is the content of the test field</td><td>The content of the test field</td></tr>
</ td> table>

Table with cellpadding attribute already used
<table cellpadding="8" border="1">
<tr><td>This is the test field content</td><td>This is the test field content</td ></tr>
</table>

Rendering effect

Table without cellpadding property

This is the test field content

This is the test field content

Table with cellpadding property already used

This is the test field content

This is the test field content

The example provides two different HTML Tables. The first one does not use cellpadding, which is the default form of the table, and the second uses the cellpadding attribute. The section " cellpadding="8" " marked in red in the syntax . In this way, each column in the table can be preset to the effect of "8px between the content and the border", which will look better. This is the main function of cellpadding. What if we only have a single field to use this effect? It can be handled with css padding, please see example two.

HTML Table cellpadding usage example 2: Switch to css padding design

<table border="1">
<tr><td style="padding:8px;" >This is the test field content</td><td style="padding:8px;">This is the test field content< /td></tr>
</table>

Rendering effect

This is the test field content

This is the test field content

In the table tag at the beginning of the second example, we have cancelled the cellpadding syntax, and instead use the CSS style in the left column (td) to declare a padding effect, that is, the red mark " style="padding:8px ;" "Here, writing padding in the td of a field will only affect one field. Through this feature, you can modify the different padding effects of each field individually . This padding is the so-called internal padding in CSS design. Distance can be used to modify the distance between the elements in the table field and the border.

Table cellpadding is often confused with cellspacing. The two have different effects. Cellspacing is used to design the distance between table elements. For example, the distance between each field can be designed with cellspacing. Please see this introduction: HTML Table cellspacing attribute .