How to add borders to table form in html

This chapter will introduce you to how to add borders to table forms in HTML. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Generally speaking, different problems will arise when adding borders to tables. The following is a better way to display after adding borders to tables

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

But according to different needs, sometimes we need different Style, here I will do some summary and analysis on the factors that affect the table border

1.

Table border

As shown in the ↑ picture, that is, border=1, which means adding a 1-pixel border to each cell and border of the table

2.

cellspacing cell spacing

##As shown in ↑, the table size is: 200*118px

3. cellpadding cell margin

As shown in the ↑ picture, the table size is: 200*110px

4. Remove all attribute values ​​​​of the table in the table. When setting {border: 1px solid #151515} for the table in css

As shown in the ↑ picture, this time we found , The border in CSS is actually just adding an outer border to the table

5. border-collapse: collapse Border merge, this property sets whether the border of the table is merged into a single border, or like in the standard Displayed separately like in HTML

At this time, if we just want to add a border to the table as a whole, and do not need margins and spacing, in fact, we only need to write like this:

<style>
    table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}   
</style>

<table border="1">
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>

As shown in the figure↓

6. We can clearly see in the picture above that the borders parsed by the two browsers are different. But actually they are the same. They all added colors to the borders at the same time, but because our td and th have a default color by default, and we did not add styles to them here to cover the default black lines, this led to the situation in Firefox. In fact, this situation is It is also available in Google, but it is not obvious. The black default lines it parses are covered by our color. If you look carefully, you will still find black edges. At this time, we only need to add color styles to th and td. But

 table tr th, table tr td { border-color:#b6ff00; }

As shown in the picture↓

7. From above, if you look carefully, you will still find something wrong. Google seems to have a deeper outer border. This is actually still the case. Because, the reason why we added border=1 to the table at the beginning is because we added a default black line style to the table, which is what we said above, th, td and table all have default black edges, so if This problem needs to be completely solved so that the border can be displayed normally. It should be written like this:

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

To summarize:

The attributes of the table in Html:

border= “1”: Add a 1-pixel black border to the entire table (including the table and each cell), which is equivalent to the following in CSS: table, table tr th, table tr td { border:1px solid #0094ff; }

cellpadding="0": The cell margin is equal to 0, its default value is 1px, which is equivalent to: {padding: 0;}## in css

#cellspacing="0"

: The cell spacing is equal to 0, and its default value is 2px, which is equivalent to: border-collapse: collapse in CSS, but not exactly the same , cellspacing is only spacing, while border-collapse merges adjacent edges into one edge, thus avoiding the problem of thickened edges caused by overlapping edges in cellspacing. Therefore, it is not recommended here to set cellspacing to 0 when setting the table border using html attributes. If you want it to be equal to 0, it is more recommended to use css style attributes to set the table border, and use border-collapse: collapse to merge the borders. , instead of setting cellspacing to 0, causing the problem of overlapping edges being thickened.

The above is the detailed content of How to add borders to table form in html. For more information, please follow other related articles on the PHP Chinese website!