Go CSS how to set HTML table table border style

Original address: http://www.divcss5.com/wenji/w503.shtml

Set CSS style borders on table in several cases:
1. Set the border only for table
2. Set the frame for TD
3. Set table border for table and TD skills
4. Set the background for table and TD to achieve perfect table border

The following DIVCSS5 to the above several implementation of the HTML table border style to explain and case demonstration. For the sake of observation, divcss5 all the case table is 1px solid line red border For example, table width is 400px, table is three column three row, the above four case table extra layer add a div box, respectively css named ". Table-a", ". Table-b", ". Table-c ",". Table-d ".

One, only the table table label set border-TOP

Setting the border (border) style only on the table label will give the table a border at the outermost table and no border style inside the table.

The case details are as follows:

1. Corresponding CSS code

1. <style>
2. . table-a table{border:1px Solid #F00}
3. /* CSS Comments: Set the red border style only for table labels */
4. </style>

2. Corresponding HTML code Fragment

2. <div class="table-a">
4. <table width="border=" 0 " cellspacing=" 0 " cellpadding=" 0 ">
6. <tr>
8. <TD Width="</"> Station name TD>
10. <TD Width="181"> URL </td>
12. <TD Width="</"> Description td>
14. </tr>
16. <tr>
18. <TD>DIVCSS5</td>
20. <TD>www.divcss5.com</td>
22. <TD>css Learn </td>
24. </tr>
26. <tr>
28. <TD>CSS5</td>
30. <TD>www.css5.com.cn</td>
32. <TD>css Cut Chart </td>
34. </tr>
36. </table>
38. </div>

3. Case

CSS set border case for table-set border only for table labels

4. Online Demo
View case

Second, set the border to TD-TOP

Set the Border Style for table table TD, the TD in the Table object will implement the border style, but the middle part TD will result in the appearance of the bilateral box.

The detailed case tutorials are as follows:

1. Corresponding CSS code

1. <style>
2. . table-b table td{border:1px Solid #F00}
3. /* CSS Comments: Set the Red Border style for table TD labels only */
4. </style>

2. Corresponding HTML Source Code Fragment

2. <div class="Table-b">
4. <table width="border=" 0 " cellspacing=" 0 " cellpadding=" 0 " >
6. <tr>
8. <TD Width="</"> Station name TD>
10. <TD Width="181"> URL </td>
12. <TD Width="</"> Description td>
14. </tr>
16. <tr>
18. <TD>DIVCSS5</td>
20. <TD>www.divcss5.com</td>
22. <TD>css Learn </td>
24. </tr>
26. <tr>
28. <TD>CSS5</td>
30. <TD>www.css5.com.cn</td>
32. <TD>css Cut Chart </td>
34. </tr>
36. </table>

3. Case

A bilateral box style case appears in the middle after setting a border on TD

4. Online Demo
View case

Three, table and TD skills to set the form border-TOP

As the 2nd, only the Table object TD set a single border style, the middle part TD and TD labels will appear in the bilateral box phenomenon.

Workaround: set the two-edge border on the TD, and set the two-edge border style for table.

Explanation: The TD set the left and the top border, so TD and TD adjacent to only a single border style, so that the table will appear on the right and bottom of no border, this time we set the table right and bottom of the box to resolve the display of the right side and the lower TD left no border.

1. Corresponding CSS code:

1. <style>
2. . table-c table{border-right:1px solid #F00; border-bottom:1px Solid #F00}
3. . table-c table td{border-left:1px solid #F00; border-top:1px Solid #F00}
4. /*
5. CSS Comments:
6. Set the left and top border only on table TD;
7. Set right and bottom boxes on table;
8. For the sake of convenience, we will explain the CSS comments to the line layout
9. */
10. </style>

2. Corresponding HTML source code fragment:

2. <div class="table-c">
4. <table width="border=" 0 " cellspacing=" 0 " cellpadding=" 0 ">
6. <tr>
8. <TD Width="</"> Station name TD>
10. <TD Width="181"> URL </td>
12. <TD Width="</"> Description td>
14. </tr>
16. <tr>
18. <TD>DIVCSS5</td>
20. <TD>www.divcss5.com</td>
22. <TD>css Learn </td>
24. </tr>
26. <tr>
28. <TD>CSS5</td>
30. <TD>www.css5.com.cn</td>
32. <TD>css Cut Chart </td>
34. </tr>
36. </table>

3. Table Border Implementation case

CSS perfectly implements HTML table border style

4. Online Demo
View case

This method is recommended to set the table table border style.

Four, set the background for table and TD, achieve perfect table border-TOP

1. Basic Settings

1), first set table CSS background is red

2), set the spacing between table cells to 1
Using the DW software assistance to set the table cell spacing of 1, specific DW software visualization procedures, a brief description, first (view mode) when the table is selected, the corresponding DW software editing window at the bottom of the "Properties" panel will appear the corresponding Table table property settings, we fill the "Interval" as "1". At this point we will see the Table tab with the cellspacing value "1" (cellspacing= "1").

Setting spacing between table cells with DW software

Or

Directly to the <table> tag within the cellspacing= "1" can Be, get:

1. <table width="border=" 0 " cellspacing=" 1 " cellpadding=" 0 ">

3), set table TD background is white

2. CSS code:

1. <style>
2. . table-d table{background: #F00}
3. . table-d table td{background: #FFF}
4. /*
5. CSS comments: Set table Background to red, TD background White */
6. </style>

3. Corresponding HTML source code:

2. <div class="table-d">
4. <table width="border=" 0 " cellspacing=" 1 " cellpadding=" 0 ">
6. <tr>
8. <TD Width="</"> Station name TD>
10. <TD Width="181"> URL </td>
12. <TD Width="</"> Description td>
14. </tr>
16. <tr>
18. <TD>DIVCSS5</td>
20. <TD>www.divcss5.com</td>
22. <TD>css Learn </td>
24. </tr>
26. <tr>
28. <TD>CSS5</td>
30. <TD>www.css5.com.cn</td>
32. <TD>css Cut Chart </td>
34. </tr>
36. </table>
38. </div>

4. Table Border case

Set the table background color to implement border styles

CSS table Border Implementation Summary-TOP

There are four ways to implement table border Style method, the third and fourth methods are recommended to solve the table border style. I hope DIVCSS5 to summarize the HTML table border Layout method for everyone to help and can master, usually need flexible use.

Go CSS how to set HTML table table border style