ASCII码 ASCII码

HTML表格的实际应用

发布于：2022-07-05 13:57:27  栏目：技术文档
  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>0704</title>
  8. </head>
  9. <body>
  11. <!-- 这行代码是为了让表格线之间没有间隙  -->
  12. <style>
  13.     table{
  14. border-collapse:collapse
  15. }
  16. </style>
  18. <table width="600" border="1" align="center" style="text-align:center">
  19.     <caption>2020年第一学期课程表</caption>
  20.     <thead>
  21.         <tr>
  22.             <th>时间</th>
  23.             <th>课时</th>
  24.             <th>节数</th>
  25.             <th>周一</th>
  26.             <th>周二</th>
  27.             <th>周三</th>
  28.             <th>周四</th>
  29.             <th>周五</th>
  30.             <th>周六</th>
  32.         </tr>
  33.     </thead>
  34.     <tbody>
  35.         <tr>
  36.             <td rowspan="4" bgcolor="yellow">上午</td>
  37.             <td>45分钟</td>
  38.             <td>第一节</td>
  39.             <td>自习</td>
  40.             <td>自习</td>
  41.             <td>自习</td>
  42.             <td>自习</td>
  43.             <td>自习</td>
  44.             <td>自习</td>
  45.         </tr>
  46.         <tr>
  48.             <td>45分钟</td>
  49.             <td>第二节</td>
  50.             <td>自习</td>
  51.             <td>自习</td>
  52.             <td>自习</td>
  53.             <td>自习</td>
  54.             <td>自习</td>
  55.             <td>自习</td>
  56.         </tr>
  57.         <tr>
  59.             <td>45分钟</td>
  60.             <td>第三节</td>
  61.             <td>自习</td>
  62.             <td>自习</td>
  63.             <td>自习</td>
  64.             <td>自习</td>
  65.             <td>自习</td>
  66.             <td>自习</td>
  67.         </tr>
  68.         <tr>
  70.             <td>45分钟</td>
  71.             <td>第四节</td>
  72.             <td>自习</td>
  73.             <td>自习</td>
  74.             <td>自习</td>
  75.             <td>自习</td>
  76.             <td>自习</td>
  77.             <td>自习</td>
  78.         </tr>
  79.         <tr>
  80.             <td colspan="9" bgcolor="yellow">午休</td>
  82.         </tr>
  83.         <tr>
  84.             <td rowspan="2" bgcolor="yellow">下午</td>
  85.             <td>45分钟</td>
  86.             <td>第一节</td>
  87.             <td>自习</td>
  88.             <td>自习</td>
  89.             <td>自习</td>
  90.             <td>自习</td>
  91.             <td>自习</td>
  92.             <td>自习</td>
  93.         </tr>
  94.         <tr>
  96.             <td>45分钟</td>
  97.             <td>第二节</td>
  98.             <td>自习</td>
  99.             <td>自习</td>
  100.             <td>自习</td>
  101.             <td>自习</td>
  102.             <td>自习</td>
  103.             <td>自习</td>
  104.         </tr>
  105.         <tr>
  106.             <td colspan="9" bgcolor="yellow">值日生打扫卫生</td>
  108.         </tr>
  109.     </tbody>
  110. </table>
  112. </body>
  113. </html>

代码实现效果展示

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行