Use CSS padding to design the distance between HTML table borders and fields

 Using CSS padding to design the distance between the HTML table border and the field is a form design technique. It can increase the distance between the table border and the field border in the table. Of course, it can also reduce the distance between each other. It is similar to traditional HTML tables . Cellspacing attribute, but the effect of using CSS padding is more delicate, and does not affect the distance between the table fields, and simply controls the distance between the table's own border and the internal field. The following examples let you see clearly, almost all mainstream Browsers all support this padding effect.

The distance between the HTML table border and the field example 1. The four borders are the same distance from the field

<style type="text/css">
<!--
table{
    padding:10px;
    background-color:#eee;
    border:1px solid black;
}
td{
    border:1px solid black;
    background-color:white;
}
- ->
</style>
<table>
    <tr><td>Example table fields</td><td>Example table fields</td></tr>
    <tr><td>Example table fields</td> td><td>Sample table fields</td></tr>
</table>

Present results

Example table field	Example table field
Example table field	Example table field

We all know that padding is the CSS standard "inner margin" design rule. We apply padding to HTML tables , hoping to create different styles of table effects through the parameter settings between the inner margins. It is obvious from example one As you can see, the effect of the table " padding:10px; " creates a distance of 10px between the border of the whole table and the fields inside the table. In addition, we also used the background color to make the gray part appear. About padding With background color design skills, you can read the following pages.

• CSS padding properties and usage examples
• CSS background-color background color

For padding after effects have a basic understanding, we can further the table up and down about four edges are designed for different distances, which is the padding basic functional properties, Example Two border and let the form down field from fixed, left and right borders The distance from the field is fixed, but the top and bottom are different from the left and right.

Example of the distance between the HTML table border and the field 2. The difference between the top and bottom borders and the left and right borders of the table

<style type="text/css">
<!--
table{
    padding:10px 2px;
    background-color:#eee;
    border:1px solid black;
}
td{
    border:1px solid black;
    background-color:white;
}
-->
</style>
<table>
    <tr><td>Example table field</td><td>Example table field</td></tr>
    <tr><td>Example table field< /td><td>Sample table fields</td></tr>
</table>

Present results

Example table field	Example table field
Example table field	Example table field

The effect of the distance between the upper and lower borders and the left and right borders of the second example is mainly designed through " padding:10px 2px; ", which means that the top and bottom of the table are 10px, and the left and right spacing is 2px. This will create an example The second effect, if you want to design a different distance between the top, bottom, left, and right, the padding property can also do it.

PS. Please copy the code of example 1 and example 2 to a blank document and save it as test.html, open the file with a browser, you can see the effect, you can modify the parameter value of padding or the background color. Change the style of the table.