html制作课程表行与列的合并

课表截图

html源代码

2. lang="en">
4. charset="UTF-8" />
5. name="viewport" content=" />
7. rel="stylesheet" href="style/table.css">
10. class="lesson">
12. 实验小学课程表
16. colspan="2">
17. 周一
18. 周二
19. 周三
20. 周四
21. 周五
26. rowspan="4">上午
27. 1
28. 英语
29. 数学
30. 语文
31. 语文
32. 数学
36. 2
37. 英语
38. 数学
39. 语文
40. 语文
41. 数学
45. 3
46. 英语
47. 数学
48. 语文
49. 语文
50. 数学
54. 4
55. 英语
56. 数学
57. 语文
58. 语文
59. 数学
62. class="rest">
63. colspan="7">午间休息
67. rowspan="3">下午
68. 5
69. 英语
70. 数学
71. 语文
72. 语文
73. 数学
77. 6
78. 英语
79. 数学
80. 语文
81. 语文
82. 数学
86. 7
87. 课外活动:
88. colspan="4">各班自行安排

样式表源代码

1. /* 商品信息表 */
2. .product {
3. border-collapse: collapse;
4. width: 30em;
5. margin: auto;
6. text-align: center;
7. }
8. .product caption {
9. font-size: 1.2rem;
10. margin-bottom: 0.5em;
11. }
12. .product thead tr,
13. .product tr:hover {
14. background-color: lightcyan;
15. cursor: pointer;
16. }
18. .product td,
19. .product th {
20. border: 1px solid #000;
21. padding: 5px;
22. }
24. .page {
25. text-align: center;
26. }
27. .page a {
28. text-decoration: none;
29. color: #666;
30. padding: 2px 5px;
31. border: 1px solid #000;
32. }
33. .page a.active,
34. .page a:hover {
35. background-color: lightcyan;
36. }
38. /* --------------------------------------- */
40. /* 课程表: 行与列的合并 */
41. .lesson {
42. border-collapse: collapse;
43. width: 40em;
44. text-align: center;
45. margin: auto;
46. }
48. .lesson caption {
49. font-size: 1.2rem;
50. margin: 1em;
51. }
52. .lesson thead {
53. background-color: lightcyan;
54. }
55. .lesson th,
56. .lesson td {
57. border: 1px solid;
58. padding: 0.5em;
59. }
60. .lesson .rest {
61. background-color: #efefef;
62. }
63. .lesson td[rowspan="4"],
64. .lesson td[rowspan="3"] {
65. background-color: rgb(186, 245, 213);
66. }