欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

写一个美丽的课程表

程序员文章站 2022-05-21 23:23:57
...

今天我们来看一个简单的table标签实现的课程表

首先主要用到的标签元素有一下几个
table-表格主题、caption-表格名称、tr-行、td-列、thead-表头（tr>th(表头中用来表示列的标签)）tbody-表主体、tfoot-表页脚

然后我们看一下，我们最终要呈现的样子

写一个美丽的课程表

实现代码如下：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>课程表</title>
    8. 

  8.     <style>
    9. 

  9.       .am {
    10. 

  10.         background-color: aquamarine;
    11. 

  11.       }
    12. 

  12.       .innoon {
    13. 

  13.         background-color: #db9cbc;
    14. 

  14.       }
    15. 

  15.       .pm {
    16. 

  16.         background-color: rgb(231, 228, 51);
    17. 

  17.       }
    18. 

  18.       .remarks {
    19. 

  19.         background-color: rgb(148, 185, 241);
    20. 

  20.       }
    21. 

  21.       td {
    22. 

  22.         text-align: center;
    23. 

  23.       }
    24. 

  24.     </style>
    25. 

  25.   </head>
    26. 

  26.   <body>
    27. 

  27.     <!-- table + caption + thead + tbody + tfoot -->
    28. 

  28.     <table border="1" width="500">
    29. 

  29.       <caption>山东省小学统一课程表</caption>
    30. 

  30.       <thead>
    31. 

  31.         <tr>
    32. 

  32.           <th>日期</th>
    33. 

  33.           <th>星期一</th>
    34. 

  34.           <th>星期二</th>
    35. 

  35.           <th>星期三</th>
    36. 

  36.           <th>星期四</th>
    37. 

  37.           <th>星期五</th>
    38. 

  38.         </tr>
    39. 

  39.       </thead>
    40. 

  40.       <tbody>
    41. 

  41.         <tr class="am">
    42. 

  42.           <td rowspan="4">上午</td>
    43. 

  43.           <td>数学</td>
    44. 

  44.           <td>语文</td>
    45. 

  45.           <td>英语</td>
    46. 

  46.           <td>数学</td>
    47. 

  47.           <td>体育</td>
    48. 

  48.         </tr>
    49. 

  49.         <tr class="am">
    50. 

  50.           <td>语文</td>
    51. 

  51.           <td>数学</td>
    52. 

  52.           <td>科学</td>
    53. 

  53.           <td>音乐</td>
    54. 

  54.           <td>美术</td>
    55. 

  55.         </tr>
    56. 

  56.         <tr class="am">
    57. 

  57.           <td>音乐</td>
    58. 

  58.           <td>美术</td>
    59. 

  59.           <td>数学</td>
    60. 

  60.           <td>数学</td>
    61. 

  61.           <td>数学</td>
    62. 

  62.         </tr>
    63. 

  63.         <tr class="am">
    64. 

  64.           <td>英语</td>
    65. 

  65.           <td>数学</td>
    66. 

  66.           <td>科学</td>
    67. 

  67.           <td>数学</td>
    68. 

  68.           <td>数学</td>
    69. 

  69.         </tr>
    70. 

  70.         <tr class="innoon">
    71. 

  71.           <td colspan="6">中午休息</td>
    72. 

  72.         </tr>
    73. 

  73.         <tr class="pm">
    74. 

  74.           <td rowspan="3">下午</td>
    75. 

  75.           <td>体育</td>
    76. 

  76.           <td>体育</td>
    77. 

  77.           <td>数学</td>
    78. 

  78.           <td>数学</td>
    79. 

  79.           <td>语文</td>
    80. 

  80.         </tr>
    81. 

  81.         <tr class="pm">
    82. 

  82.           <td>语文</td>
    83. 

  83.           <td>数学</td>
    84. 

  84.           <td>音乐</td>
    85. 

  85.           <td>体育</td>
    86. 

  86.           <td>数学</td>
    87. 

  87.         </tr>
    88. 

  88.         <tr class="pm">
    89. 

  89.           <td>科学</td>
    90. 

  90.           <td>数学</td>
    91. 

  91.           <td>数学</td>
    92. 

  92.           <td>数学</td>
    93. 

  93.           <td>音乐</td>
    94. 

  94.         </tr>
    95. 

  95.         <tfoot>
    96. 

  96.             <tr class="remarks">
    97. 

  97.                 <td>备注 : </td>
    98. 

  98.                 <td colspan="5">课程安排仅供参考</td>
    99. 

  99.             </tr>
    100. 

  100.         </tfoot>
    101. 

  101.       </tbody>
    102. 

  102.     </table>
    103. 

  103.   </body>
    104. 

  104. </html>
    105.

这样一个漂亮的课程表就完成了！
你学废了吗^-^

上一篇： 表单初体验

下一篇： 正则表达式 - php括号内正则问题？

推荐阅读