博客列表 >用表格知识制作一个课程表

用表格知识制作一个课程表

飞天001
飞天001原创
2023年03月11日 22:09:10674浏览

通过对表格的知识学习,了解到有关表格的几个复合标签和合并属性,通过对这些复合标签和合并属性的应用制作出一个课程表。

复合标签:

<table><caption><thead><tbody><tfood><tr><td><th>

合并属性:

属性 用途
rowspan 垂直行的合并(垂直方向把多行合并成一行)
colspan 水平列的合并(水平方向把多列合并成一列)
  • 利用这些表格的复合标签制作课程表代码如下:

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>表格-课程表</title>
    8. </head>
    9. <body>
    10. <table border="1" width="800" cellspacing="0" cellpadding="8">
    11. <caption><h3>课程表</h3></caption>
    12. <thead align="center">
    13. <th colspan="7">**小学四年级二班课程表</th>
    14. <tr bgcolor="#cccccc">
    15. <td colspan="2">时间</td>
    16. <td>星期一</td>
    17. <td>星期二</td>
    18. <td>星期三</td>
    19. <td>星期四</td>
    20. <td>星期五</td>
    21. </tr>
    22. </thead>
    23. <tbody align="center">
    24. <tr>
    25. <td rowspan="6">上午</td>
    26. <td>8:00-8:40</td>
    27. <td>晨读</td>
    28. <td>晨读</td>
    29. <td>晨读</td>
    30. <td>晨读</td>
    31. <td>晨读</td>
    32. </tr>
    33. <tr>
    34. <td>8:40-9:20</td>
    35. <td>数学</td>
    36. <td>体育与健康</td>
    37. <td>艺术</td>
    38. <td>语文</td>
    39. <td>语文</td>
    40. </tr>
    41. <tr>
    42. <td>9:30-10:10</td>
    43. <td>语文</td>
    44. <td>英语</td>
    45. <td>数学</td>
    46. <td>体育与健康</td>
    47. <td>道德与法治</td>
    48. </tr>
    49. <tr>
    50. <td>10:10-10:45</td>
    51. <td colspan="5" align="center">大课间</td>
    52. </tr>
    53. <tr>
    54. <td>10:45-11:25</td>
    55. <td>艺术</td>
    56. <td>地方课程</td>
    57. <td>英语</td>
    58. <td>数学</td>
    59. <td>数学</td>
    60. </tr>
    61. <tr>
    62. <td>11:35-12:20</td>
    63. <td>英语</td>
    64. <td>语文</td>
    65. <td>体育与健康</td>
    66. <td>劳动</td>
    67. <td>书法</td>
    68. </tr>
    69. <tr>
    70. <td>中午</td>
    71. <td>12:20-13:50</td>
    72. <td colspan="5" align="center">午餐、午会、广播、眼操</td>
    73. </tr>
    74. <tr>
    75. <td rowspan="2">下午</td>
    76. <td>14:00-14:40</td>
    77. <td>艺术</td>
    78. <td>道德与法治</td>
    79. <td>语文</td>
    80. <td>信息技术</td>
    81. <td>班会</td>
    82. </tr>
    83. <tr>
    84. <td>14:50-15:30</td>
    85. <td>科学</td>
    86. <td>科学</td>
    87. <td>艺术</td>
    88. <td>体育与健康</td>
    89. <td>综合实践</td>
    90. </tr>
    91. <tr>
    92. <td rowspan="3">延时</td>
    93. <td>15:30-16:10</td>
    94. <td>数学</td>
    95. <td>语文</td>
    96. <td>语文</td>
    97. <td>语文</td>
    98. <td>数学</td>
    99. </tr>
    100. <tr>
    101. <td>16:10-16:50</td>
    102. <td>语文</td>
    103. <td>语文</td>
    104. <td>语文</td>
    105. <td>语文</td>
    106. <td>数学</td>
    107. </tr>
    108. <tr>
    109. <td>16:50-17:30</td>
    110. <td>数学</td>
    111. <td>英文</td>
    112. <td>数学</td>
    113. <td>语文</td>
    114. <td>英语</td>
    115. </tr>
    116. <tfoot align="center">
    117. <tr>
    118. <td>备注</td>
    119. <td colspan="6" align="center">备注内容</td>
    120. </tr>
    121. </tfoot>
    122. </tbody>
    123. </table>
    124. </body>
    125. </html>

执行效果如下:

参考链接:
亿图脑图链接:https://www.edrawsoft.cn/viewer/public/s/4ec75210557659

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议