课程表效果

五(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>
  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.               <td style="text-align: center;">数学<br/>孙俊</td>
  45.           </tr>
  46.           <tr>
  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.               <td style="text-align: center;">数学<br/>孙俊</td>
  52.               <td style="text-align: center;">法治与民族<br/>马国琼</td>
  53.           </tr>
  54.           <tr>
  56.               <td style="text-align: center;">音乐<br/>杨怀颖</td>
  57.               <td style="text-align: center;">健康与保健<br/>孙俊</td>
  58.               <td style="text-align: center;">科学<br/>王晓树</td>
  59.               <td style="text-align: center;">体育<br/>钱金菊</td>
  60.               <td style="text-align: center;">英语<br/>王梅</td>
  61.           </tr>
  62.           <tr>
  63.               <td colspan="6" style="text-align: center;">中午休息</td>
  64.           </tr>
  65.           <tr>
  66.               <td rowspan="2" style="text-align: center;">下午</td>
  67.               <td style="text-align: center;">英语<br/>王梅</td>
  68.               <td style="text-align: center;">信息技术<br/>赵圆圆</td>
  69.               <td style="text-align: center;">体育<br/>钱金菊</td>
  70.               <td style="text-align: center;">科学<br/>王晓树</td>
  71.               <td style="text-align: center;">体育<br/>钱金菊</td>
  72.           </tr>
  73.           <tr>
  75.               <td style="text-align: center;">书法<br/>马国琼</td>
  76.               <td style="text-align: center;">美术<br/>雷晓华</td>
  77.               <td style="text-align: center;">美术<br/>雷晓华</td>
  78.               <td style="text-align: center;">法治与民族<br/>马国琼</td>
  79.               <td style="text-align: center;">音乐<br/>杨怀颖</td>
  80.           </tr>
  81.           <tr>
  82.               <td style="text-align: center;">备注</td>
  83.               <td colspan="5" style="text-align: center;">下午15:30 至 17:20为延时服务时间，学生根据爱好选择课程</td>
  84.           </tr>
  86.       </tbody>
  88.     </table>
  89.   </body>
  90. </html>