漂亮表格

http://peaklui.iteye.com/blog/381589

上面表格的代码:

Html代码

1. <styletype="text/css">
2. caption{
3. padding:005px0;
4. font:italic30px"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;
5. text-align:center;
6. }
8. /*
10. TableCloth
11. byAlenGrakalic,broughttoyoubycssglobe.com
13. *//*generalstyles*/
14. table,td{
15. font:100%Arial,Helvetica,sans-serif;
16. }
18. table{
19. width:100%;
20. border-collapse:collapse;
21. margin:1em0;
22. }
24. th,td{
25. text-align:left;
26. padding:.5em;
27. border:1pxsolid#fff;
28. }
30. th{
31. background:#328aa4url(tr_back.gif)repeat-x;
32. color:#fff;
33. }
35. td{
36. background:#e5f1f4;
37. }
39. /*tableclothstyles*/
40. tr.eventd{
41. background:#e5f1f4;
42. }
44. tr.oddtd{
45. background:#f8fbfc;
46. }
48. th.over,tr.eventh.over,tr.oddth.over{
49. background:#4a98af;
50. }
52. th.down,tr.eventh.down,tr.oddth.down{
53. background:#bce774;
54. }
56. th.selected,tr.eventh.selected,tr.oddth.selected{
58. }
60. td.over,tr.eventd.over,tr.oddtd.over{
61. background:#ecfbd4;
62. }
64. td.down,tr.eventd.down,tr.oddtd.down{
65. background:#bce774;
66. color:#fff;
67. }
69. td.selected,tr.eventd.selected,tr.oddtd.selected{
70. background:#bce774;
71. color:#555;
72. }
74. /*usethisifyouwanttoapplydifferentstyleingtoemptytablecells*/
75. td.empty,tr.oddtd.empty,tr.eventd.empty{
76. background:#fff;
77. }
78. </style>
80. <table>
81. <caption>caption</caption>
82. <tr>
83. <th>...</th>
84. <th>...</th>
85. <th>...</th>
86. <th>...</th>
87. <th>...</th>
88. <th>...</th>
89. </tr>
92. <tr>
93. <td>...</td>
94. <td>...</td>
95. <td>...</td>
96. <td>...</td>
97. <td>...</td>
98. <td>...</td>
99. </tr>
102. <tr>
103. <td>...</td>
104. <td>...</td>
105. <td>...</td>
106. <td>...</td>
107. <td>...</td>
108. <td>...</td>
109. </tr>
111. <tr>
112. <td>...</td>
113. <td>...</td>
114. <td>...</td>
115. <td>...</td>
116. <td>...</td>
117. <td>...</td>
118. </tr>
120. <tr>
121. <td>...</td>
122. <td>...</td>
123. <td>...</td>
124. <td>...</td>
125. <td>...</td>
126. <td>...</td>
127. </tr>
128. </table>