表格

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title></title>
  6. <style>
  7. table{
  8. border-collapse: collapse;
  9. }
  10. th,td{
  11. padding:0;
  12. }
  13. table{
  14. margin:0auto;
  15. width:500px;
  16. }
  17. th,td{
  18. border:1px solid pink;
  19. font:20px/50px"微软雅黑";
  20. text-align: center;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <!--
  26. 表格标签
  27. table 表格
  28. thead 表格头
  29. tbody 表格主体
  30. tr 表格行
  31. th 表格头里的单元格(默认加粗并且居中)
  32. td 表格主体里的单元格
  33. tfoot 表格底部
  34. 表格的默认样式
  35. table{border-collapse:collapse;} 单元格之间的间隙
  36. th,td{padding:0}
  37. rowspan 合并行(竖着合并)
  38. colspan 合并列(横着合并)
  39. -->
  40. <tablecellspacing="0">
  41. <thead>
  42. <tr>
  43. <th></th>
  44. <th>星期一</th>
  45. <th>星期二</th>
  46. <th>星期三</th>
  47. <th>星期四</th>
  48. <th>星期五</th>
  49. </tr>
  50. </thead>
  51. <tbody>
  52. <tr>
  53. <tdrowspan="4"> 上午</td><!--这里代表的是并列4行,最终呈竖向-->
  54. <td>语文 </td>
  55. <td>数学</td>
  56. <td>英文</td>
  57. <td>生物</td>
  58. <td>化学</td>
  59. </tr>
  60. <tr>
  61. <td>语文 </td>
  62. <td>数学</td>
  63. <td>英文</td>
  64. <td>生物</td>
  65. <td>化学</td>
  66. </tr>
  67. <tr>
  68. <td>语文 </td>
  69. <td>数学</td>
  70. <td>英文</td>
  71. <td>生物</td>
  72. <td>化学</td>
  73. </tr>
  74. <tr>
  75. <td>语文 </td>
  76. <td>数学</td>
  77. <td>英文</td>
  78. <td>生物</td>
  79. <td>化学</td>
  80. </tr>
  81. <tr>
  82. <tdrowspan="2"> 下午</td>
  83. <td>语文 </td>
  84. <td>数学</td>
  85. <td>英文</td>
  86. <td>生物</td>
  87. <td>化学</td>
  88. </tr>
  89. <tr>
  90. <td>语文 </td>
  91. <td>数学</td>
  92. <td>英文</td>
  93. <td>生物</td>
  94. <td>化学</td>
  95. </tr>
  96. <tr>
  97. <tdcolspan="6">夜自习</td><!--这里表示并列6列,最终呈行显示-->
  98. </tr>
  99. </tbody>
  100. </table>
  101. </body>
  102. </html>
 
原文地址:https://www.cnblogs.com/CafeMing/p/6274405.html