漂亮的table样式

2021年2月5日14:32:38 发表评论
微信搜一搜 ts小陈
  1. <html>
  3.                <head>
  4.                               <meta http-equiv="Content-Type" content="text/html; charset=gb2312" utf-8 " />
  5. <title>坏狼安全网-漂亮CSS Tables</title>
  6. </head>
  7. <style type="text/css ">
  8. body {
  9. font: normal 11px auto "Trebuchet MS ", Verdana, Arial, Helvetica, sans-serif;
  10. color: #4f6b72;
  11. background: #E6EAE9;
  12. }
  13. a {
  14. color: #c75f3e;
  15. }
  16. #mytable {
  17. width: 700px;
  18. padding: 0;
  19. margin: 0;
  20. }
  21. caption {
  22. padding: 0 0 5px 0;
  23. width: 700px;
  24. font: italic 11px "Trebuchet MS ", Verdana, Arial, Helvetica, sans-serif;
  25. text-align: right;
  26. }
  27. th {
  28. font: bold 11px "Trebuchet MS ", Verdana, Arial, Helvetica, sans-serif;
  29. color: #4f6b72;
  30. border-right: 1px solid #C1DAD7;
  31. border-bottom: 1px solid #C1DAD7;
  32. border-top: 1px solid #C1DAD7;
  33. letter-spacing: 2px;
  34. text-transform: uppercase;
  35. text-align: left;
  36. padding: 6px 6px 6px 12px;
  37. background: #CAE8EA no-repeat;
  38. }
  39. th.nobg {
  40. border-top: 0;
  41. border-left: 0;
  42. border-right: 1px solid #C1DAD7;
  43. background: none;
  44. }
  45. td {
  46. border-right: 1px solid #C1DAD7;
  47. border-bottom: 1px solid #C1DAD7;
  48. background: #fff;
  49. font-size:11px;
  50. padding: 6px 6px 6px 12px;
  51. color: #4f6b72;
  52. }
  53. td.alt {
  54. background: #F5FAFA;
  55. color: #797268;
  56. }
  57. th.spec {
  58. border-left: 1px solid #C1DAD7;
  59. border-top: 0;
  60. background: #fff no-repeat;
  61. font: bold 10px "Trebuchet MS ", Verdana, Arial, Helvetica, sans-serif;
  62. }
  63. th.specalt {
  64. border-left: 1px solid #C1DAD7;
  65. border-top: 0;
  66. background: #f5fafa no-repeat;
  67. font: bold 10px "Trebuchet MS ", Verdana, Arial, Helvetica, sans-serif;
  68. color: #797268;
  69. }
  70. /*---------for IE 5.x bug*/
  71. html>body td{ font-size:11px;}
  72. body,td,th {
  73. font-family: 宋体, Arial;
  74. font-size: 12px;
  75. }
  76. </style>
  77. <body>
  78. <table id="mytable " cellspacing="0 ">
  79. <caption> </caption>
  80. <tr>
  81. <th scope="col ">姓名</th>
  82. <th scope="col ">年龄</th>
  83. <th scope="col ">电话</th>
  84. <th scope="col ">居住地点</th>
  85. </tr>
  86. <tr>
  87. <td class="row ">badwolf</td>
  88. <td class="row ">100</td>
  89. <td class="row ">010-110</td>
  90. <td class="row ">中国北京</td>
  91. </tr>
  92. </table>
  93. </body>
  94. </html>

漂亮的table样式
 

 

 

小陈号卡
ts小陈

发表评论（不允许含有网址！）

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容