zoukankan      html  css  js  c++  java
  • 表格

    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>
     
  • 相关阅读:
    思念
    空白
    curl json string with variable All In One
    virtual scroll list All In One
    corejs & RegExp error All In One
    socket.io All In One
    vue camelCase vs PascalCase vs kebabcase All In One
    element ui 表单校验,非必填字段校验 All In One
    github 定时任务 UTC 时间不准确 bug All In One
    input range & color picker All In One
  • 原文地址:https://www.cnblogs.com/CafeMing/p/6274405.html
Copyright © 2011-2022 走看看