html-on how to correctly add a frame to a table

In general, there are different problems in adding a border to a table, the following is a good way to show the table and frame

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

But depending on the needs of different sometimes we need different styles, here I will affect the table border factors, do some summary and analysis

One, <table border= "1" > table border

, that is, border=1, which means to add a 1-pixel border to each grid and border of the table.

Second, <table border= "1" cellspacing= "0" > cellspacing cell spacing

The table size is: 200*118px

Three, <table border= "1" cellspacing= "0" cellpadding= "0" > cellpadding cell margins

The table size is: 200*110px

Remove all the property values of table in tables, and set {border:1px solid #151515} to table in CSS

At this point, we find that the border in CSS actually adds an outer box to the table.

Border-collapse:collapse border Merge, this property sets whether the border of the table is merged into a single border, or is displayed separately as in standard HTML

This time if we just want to add a border to the table, and we don't need margin and spacing, we just need to write this:

<style>        Table {width:200px; min-height:25px; line-height:25px; text-align:center; Border-color: #b6ff00; bo Rder-collapse:collapse;}       </style>    <table border= "1" >        <tr><td> content </td><td> content </TD><TD > Content </td><td> content </td><td> content </td></tr>        <tr><td> content </td ><td> content </td><td> content </td><td> content </td><td> content </td></tr>        <tr><td> content </td><td> content </td><td> content </td><td> content </td> <td> content </td></tr>        <tr><td> content </td><td> content </td><td> content </td><td> content </td><td> content </td></tr>    </table>

(Google) (Firefox)

Six, we can see clearly in the above figure, two browser resolution border is different. But in fact they are the same. They also add color to the border, but because our TD and th default has a default color, and we do not give them to add a style to cover the default black lines, and led to the situation in Firefox, in fact, this situation in Google also has, but not obvious, Its resolution of the black default lines are covered by our color above, if you look closely or you will find a black sidebar appears, this time we only need to give th and TD color style can be

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

(Google) (Firefox)

Seven, from the above, look carefully, in fact, will still find that something is wrong, Google seems to be outside the box deeper, this is actually because, we began to add a border=1 table above the reason, because itself to table added a default black line style, is what we said above, TH and TD and Table have default black edges, so if you need to solve this problem completely, so that the border can be displayed properly, 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> content </td><td> content </td><td> content </ Td><td> content </td><td> content </td></tr>        <tr><td> content </td><td > Content </td><td> content </td><td> content </td><td> content </td></tr>        <tr ><td> content </td><td> content </td><td> content </td><td> content </td><td> content </td></tr>        <tr><td> content </td><td> content </td><td> content </td>< Td> content </td><td> content </td></tr>    </table>

To summarize:

Properties of table in HTML:

Border= "1": Add a 1-pixel black border to the entire table (including tables and each cell)

It is equivalent to the CSS: table,table tr th, table tr td {BORDER:1PX solid #0094ff;}

cellpadding= "0": the cell margin equals 0, the default value is 1px,

It is equivalent to the following in CSS: {padding:0;}

cellspacing= "0": Cell spacing equals 0, the default value is 2px,

It is equivalent to: border-collapse:collapse (border merge), but not identical, cellspacing only spacing, and border-collapse merges adjacent edges into one edge. It also avoids the problem of overlapping edges in cellspacing. So here is not advocating the use of HTML attributes to set the table border when the cellspacing is set to 0, if you want him to be equal to 0, more advocating the use of CSS style properties of the method to set the table border, and use border-collapse:collapse to merge edges, Instead of setting cellspacing to 0, this causes the overlapping edges to be bold.

In summary, there are two ways to add a border to a table:

1, HTML properties, inline Add, border default is black

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

, here you can see what I just said the overlapping edge of the bold problem, and the following way is obviously not the case

2, CSS style, you can customize your favorite color, size, style:

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

With this summary, I've found that many times I've misused a lot of the table borders, and in fact, using the first method without using the second method, the two ways of mixing together will come up with a lot of questions that I said earlier.

html-on how to correctly add a frame to a table