ASCII码 ASCII码

HTML入门学习之表格制作课程表实战练习

发布于:2022-03-19 11:39:13  栏目:技术文档

课程表效果

五(4)班课程表

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>新迎二小五(4)班课表</title>
  8. </head>
  9. <body>
  10. <table border="1" width="800" height="500">
  11. <!-- 表格标题 -->
  12. <caption style="font-weight: 800;font-size:40px;text-align:center;">
  13. 五年级4班 课表
  14. <br/>
  15. </caption>
  16. <!-- 表格标题 -->
  17. <!-- thead>tr>td{item}*6 -->
  18. <thead>
  19. <tr>
  20. <td style="font-weight: 800;text-align: center;">时间</td>
  21. <td style="font-weight: 800;text-align: center;">星期一</td>
  22. <td style="font-weight: 800;text-align: center;">星期二</td>
  23. <td style="font-weight: 800;text-align: center;">星期三</td>
  24. <td style="font-weight: 800;text-align: center;">星期四</td>
  25. <td style="font-weight: 800;text-align: center;">星期五</td>
  26. </tr>
  27. </thead>
  28. <!-- 表格主体 -->
  29. <tbody>
  30. <tr>
  31. <td rowspan="4" style="text-align: center;">上午</td>
  32. <td style="text-align: center;">语文<br/>马国琼</td>
  33. <td style="text-align: center;">数学<br/>孙俊</td>
  34. <td style="text-align: center;">数学<br/>孙俊</td>
  35. <td style="text-align: center;">信息技术<br/>赵圆圆</td>
  36. <td style="text-align: center;">语文<br/>马国琼</td>
  37. </tr>
  38. <tr>
  39. <td style="text-align: center;">数学<br/>孙俊</td>
  40. <td style="text-align: center;">语文<br/>马国琼</td>
  41. <td style="text-align: center;">语文<br/>马国琼</td>
  42. <td style="text-align: center;">语文<br/>马国琼</td>
  43. <td style="text-align: center;">数学<br/>孙俊</td>
  44. </tr>
  45. <tr>
  46. <td style="text-align: center;">科学<br/>王晓树</td>
  47. <td style="text-align: center;">研究性学习<br/>马国琼</td>
  48. <td style="text-align: center;">语文<br/>马国琼</td>
  49. <td style="text-align: center;">数学<br/>孙俊</td>
  50. <td style="text-align: center;">法治与民族<br/>马国琼</td>
  51. </tr>
  52. <tr>
  53. <td style="text-align: center;">音乐<br/>杨怀颖</td>
  54. <td style="text-align: center;">健康与保健<br/>孙俊</td>
  55. <td style="text-align: center;">科学<br/>王晓树</td>
  56. <td style="text-align: center;">体育<br/>钱金菊</td>
  57. <td style="text-align: center;">英语<br/>王梅</td>
  58. </tr>
  59. <tr>
  60. <td colspan="6" style="text-align: center;">中午休息</td>
  61. </tr>
  62. <tr>
  63. <td rowspan="2" style="text-align: center;">下午</td>
  64. <td style="text-align: center;">英语<br/>王梅</td>
  65. <td style="text-align: center;">信息技术<br/>赵圆圆</td>
  66. <td style="text-align: center;">体育<br/>钱金菊</td>
  67. <td style="text-align: center;">科学<br/>王晓树</td>
  68. <td style="text-align: center;">体育<br/>钱金菊</td>
  69. </tr>
  70. <tr>
  71. <td style="text-align: center;">书法<br/>马国琼</td>
  72. <td style="text-align: center;">美术<br/>雷晓华</td>
  73. <td style="text-align: center;">美术<br/>雷晓华</td>
  74. <td style="text-align: center;">法治与民族<br/>马国琼</td>
  75. <td style="text-align: center;">音乐<br/>杨怀颖</td>
  76. </tr>
  77. <tr>
  78. <td style="text-align: center;">备注</td>
  79. <td colspan="5" style="text-align: center;">下午15:30 至 17:20为延时服务时间,学生根据爱好选择课程</td>
  80. </tr>
  81. </tbody>
  82. </table>
  83. </body>
  84. </html>
相关推荐
阅读 +