Html-how to add a border to a table, html-table

Html-how to add a border to a table, html-table

In general, adding borders to a table may lead to different problems. The following is a better way to add borders to the table.

<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> content </td> <td> content </ td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> </table>

But sometimes we need different styles according to different needs. Here I will make some summary and analysis on the factors that affect the table border.

1. <table border = "1"> table border

, That is, border = 1, that is, adding a 1-pixel border to each grid of the table and the border

 

2. <table border = "1" cellspacing = "0"> cellspacing cell spacing

The table size is 200 * 118px.

 

3. <table border = "1" cellspacing = "0" cellpadding = "0"> cellpadding cell margins

The table size is 200 * PX.

 

4. Remove all table attribute values from the table. When {border: 1px solid #151515} is set to the table in css}

At this time, we found that the border in css actually adds an outer border to the table.

 

5. border-collapse: collapse border merging. This attribute sets whether the border of the table is merged into a single border or displayed separately as in standard HTML.

In this case, if we only want to add borders to the table and do not need margins or spacing, we only need to write the following:

<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> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> </table>

(Google) (firefox)

 

6. We can see clearly in the figure above that the border resolved by the two browsers is different. But they are actually the same. They also added a color to the border, but because we have a default color for td and th, we didn't add a style to them to overwrite the default black line, this has led to the situation in Firefox. In fact, this situation also exists in Google, but it is not obvious. The default black lines parsed by Firefox are covered by our colors, if you check it carefully, you will still find a black edge. In this case, you only need to add a color style to th and td.

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

(Google) (firefox)

 

7. From the above perspective, we can still find that something is wrong. Google seems to have a deeper outer border. This is actually because we added border = 1 on the table at the beginning, because a default black line style is added to the table, that is, as we mentioned above, both th, td, and table have the default Black edge. Therefore, if you need to completely solve this problem, to display the border normally, we should write 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> content </td> <td> content </ td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> </table>

 

 

Summary:

Table attributes in Html:

Border = "1": Add a black border of 1 pixel to the entire table (including the table and each cell,

It is equivalent to: table, table tr th, table tr td {border: 1px solid # 0094ff;} in css ;}

 

Cellpadding = "0": the cell margin is equal to 0, and its default value is 1px,

It is equivalent to: {padding: 0;} in css ;}

 

Cellspacing = "0": the cell spacing is equal to 0, and its default value is 2px,

It is equivalent to: border-collapse: collapse (border merging) in css, but it is not exactly the same. cellspacing only spacing, while border-collapse merges adjacent edges into an edge, this avoids the problem of edge thickening caused by the overlap of edges in cellspacing. Therefore, we do not advocate setting cellspacing to 0 when using the html attribute to set the border of a table. If you want it to be equal to 0, we recommend that you use the css style attribute to set the border of a table, use border-collapse: collapse to merge edges, instead of setting cellspacing to 0, which causes the overlap edge to become rough.

 

To sum up, there are two ways to add a border to a table:

1. Html attribute, adding rows inside, black border by default

<Table border = "1" cellpadding = "2" cellspacing = "0"> <tr> <td> content </td> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> <tr> <td> content </td>/ td> </tr> </table>

Here, we can see the problem of adding a duplicate edge, which I just mentioned, but the method below is obviously not like this.

 

2. Css styles: You can customize the colors, sizes, and styles you like:

<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; padding: 2px ;} </style> <table> <tr> <td> content </td> <td> content </ td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> <td> content </td> <td> content </td> </tr> </table>

After summing up, I found that many times I misuse a lot of table borders. In fact, when using the first method, I don't need to use the second method, if the two methods are used together, many problems may occur.

Author: leona

Link: http://www.cnblogs.com/leona-d/p/5950280.html

Copyright Disclaimer: The copyright of this article is shared by the author and the blog. You are welcome to repost it. However, you must keep this statement without the author's consent and provide the original article link clearly on the article page.