漂亮的table样式

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


 

 

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
ts小陈

发表评论(请规范评论)--评论需审核

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

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