Use CSS to set Table Styles.

Although it is not very nice to find one, it is complicated to set up: color shading-emphasize the text color 6

Results In word:

[Style analysis ]:

In word, you can set the table format, mainly to set the border and shading. You can right-click the entire table or some cells → table properties → border and shading, open the "border and shading" dialog box for setting or viewing. A simple analysis is as follows:

1. All cells in the header

1. Top border: none;

2. Left Border: none;

3. Right Border: none;

4. Bottom Frame: color #4bacc6, 3 lbs, single solid line (the lbs in the webpage is not easy to set, replaced by 3px );

Ii. All content rows

Shading color: # fef4ec;

3. All odd rows of content

Shading color: # fbcaa2;

4. All cells in the content

Left Border: white, 0.5, single solid line (the lbs in the webpage is not easy to set and replaced with 1px );

5. Last Row of content

Bottom Frame: color # b65608, 0.5 lbs, single solid line (the lbs in the webpage is not easy to set, replace with 1px );

6. All cells in the last column of the content

Bottom Border: color # b65608, 0.5 lbs, single solid line (LBS in Web pages is not easy to set, replace with 1px );

7. All cells in the first column of the content:

Shading color: # b65608;

Left Border: color # b65608, 0.5 lbs, single solid line (LBS in webpages are not easy to set, replace with 1px );

Text color: white;

[HTML content and structure]:

<Div style = "width: 600px; "> <Table class =" table-11 "> <thead> <tr> <TH> column0 </Th> <TH> column1 </Th> <TH> column2 </ th> <TH> column4 </Th> <TH> column5 </Th> </tr> </thead> <tbody> <tr> <TD> ABC </TD> <TD> ABC </TD> </tr> <TD> ABC </TD> </tr> <TD> ABC </TD> <TD> ABC </TD> </tr> <TD> ABC </TD> <TD> ABC </TD> <TD> ABC </TD> </tr> <TD> ABC </TD> <TD> ABC </TD> <TD> ABC </TD> </tr> <TD> ABC </TD> <TD> ABC </TD> <TD> ABC </TD> </tr> </tbody> </table>

[Style sheet ]:

. Table-11 {width: 100%; Table-layout: auto; * border-collapse: collapse;/* use */border-Spacing: 0;} for IE ;} /* Title line */. table-11 th {}/* content all rows */. table-11 tbody tr {Background: # fef4ec;}/* All the even rows of the content (the odd number is odd and the even number is even )*/. table-11 tbody TR: Nth-child (ODD) {Background: # fbcaa2;}/* Rows hovering over the mouse (excluding the header and end of the table )*/. table-11 tbody TR: hover {Background: # FFFF00;}/* All cells */. table-11 th, TD {}/* all cells in the header */. table-11 thead tr Th {border-top: none; border-left: none; border-Right: none; border-bottom: solid 3px #4bacc6 ;} /* All cells in the content */. table-11 tbody tr TD {border-left: solid 1px white;}/* all cells in the first row of content */. table-11 tbody TR: First-Child TD {/* If the background color is set, the mouse hover effect will be lost */}/* all cells in the last row */. table-11 tbody TR: Last-Child TD {/* If the background color is set, the mouse hover effect will be lost */border-bottom: solid 1px # b65608 ;} /* All cells at the end of the table */. table-11 tfoot tr TD {}/* all cells in the first column */. table-11 th: First-child, TD: First-child {}/* all cells in the first column of content */. table-11 tbody TD: First-child {Background: # b65608; border-left: solid 1px # b65608; color: White ;}. table-11 tbody TD: Last-child {border-Right: solid 1px # b65608;}/* all cells in the last column */. table-11 th: Last-child, TD: Last-child {}

[Effect ]:

This article mainly provides some ideas, detailed analysis and settings are not very appropriate, there are better ideas and settings, but I hope you will not give me any further advice ......

 

[Reference website ]:

Http://www.csspop.com/view/657

Http://wenku.baidu.com/view/dc21ccf90242a8956bece408.html