CSS alternative syntax for HTML Table cellpadding

 HTML Table cellpadding of CSS alternative syntax can be used within a form field tags (<td>) CSS of padding property, padding is a standard CSS from design syntax within almost all browsers support padding effect properties, but note is, CSS of padding to achieve with HTML cellpadding same effect, must be used within a table <td> tags, rather than in the <table> tag, otherwise it will become the distance between the table and the entire interior of the field, The examples will have practical applications.

CSS padding property syntax

padding: the inner margin of web page elements or table fields;

There are many ways to express the parameters of CSS padding , such as upper padding , right padding , lower padding , left padding , etc., because padding is a very common CSS basic syntax. If you are interested in studying, please read This one.

• CSS padding properties and usage examples

Then we use two examples to show the differences in the use of traditional HTML Table cellpadding and CSS padding.

Example 1: Traditional HTML Table cellpadding effect

<table cellpadding="10" border="1">
<tr><td>Table fields after cellpadding</td><td>Table fields after cellpadding</td></tr>
<tr ><td>Table fields after using cellpadding</td><td>Table fields after using cellpadding</td></tr>
</table>

Rendering effect

Table fields after using cellpadding	Table fields after using cellpadding
Table fields after using cellpadding	Table fields after using cellpadding

Example 1 shows the effect of traditional HTML cellpadding , which is used in the <table> tag at the beginning of the table to indicate that the inner margins of the fields (<td>) in the entire table are all 10px. The traditional table cellpadding attribute can design the entire table at once Column spacing, but there is no way to design the spacing of a single field separately. Please refer to the following pages for the detailed usage of this attribute.

• HTML Table cellpadding attribute

The second example will enter the effect of replacing HTML Table cellpadding with CSS padding, and design the padding of each table column individually.

Example 2: Use CSS padding property to replace HTML Table cellpadding effect

<table border="1">
<tr><td style="padding:10px;" >There are fields that use css padding</td><td style="padding:10px;" >There are fields that use css padding Bit</td></tr>
<tr><td>Fields without css padding</td><td>Fields without css padding</td></tr>
</table>

Rendering effect

There are fields that use css padding	There are fields that use css padding
Fields without css padding	Fields without css padding

In order to have the use of padding effect as unused padding of form fields show differences, we have used two fields in the first row of padding property, padding: 10px effect as a paradigm of "cellpadding =" 10 " "The same, but the difference is that each <td> tag must use the CSS padding attribute, otherwise it will have no effect. It can be seen that when the field spacing of the entire table is the same, the traditional HTML Table cellpadding can be used. When there is a separate field spacing design requirement, it may be more convenient to use the CSS padding attribute. Two methods All are supported by all major browsers.

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