1017作业：表格实战

实现一个课程表，使用了行和列的合并操作。

代码

css

  <style>
    #time-table, th, td{
      border: solid gray 2px;
      text-align: center;
    }
    #time-table p {
      margin: 2px;
    }
    tfoot th, tfoot td {
      border: none;
    }
  </style>

html

 <table id="time-table">
   <caption><h2>课程表</h2></caption>
   <thead>
    <tr>
      <th colspan="2">节次\星期</th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </tr>
   </thead>
   <tbody>
    <tr>
      <td colspan="7" style="background-color: lightgray;">
        <p style="margin: 2;">早自习</p>
        <p style="margin: 2;">07:00 - 07:50</p>
      </td>
    </tr>
    <tr>
      <th rowspan="4">上午</th>
      <th>
        <p>第一节</p>
        <p>08:00 - 08:40</p>
      </th>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>化学</td>
      <td>物理</td>
    </tr>
    <tr>
      <th>
        <p>第二节</p>
        <p>08:50 - 09:30</p>
      </th>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>化学</td>
      <td>物理</td>
    </tr>
    <tr>
      <th>
        <p>第三节</p>
        <p>09:40 - 10:20</p>
      </th>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>化学</td>
      <td>物理</td>
    </tr>
    <tr>
      <th>
        <p>第四节</p>
        <p>10:30 - 11:20</p>
      </th>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>化学</td>
      <td>物理</td>
    </tr>
    <tr>
      <td colspan="7" style="background-color: lightgray;">
        <p>午休</p>
        <p>12:00 - 14:00</p>
      </td>
    </tr>
    <tr>
      <th rowspan="3">上午</th>
      <th>
        <p>第五节</p>
        <p>14:00 - 14:40</p>
      </th>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>化学</td>
      <td>物理</td>
    </tr>
    <tr>
      <th>
        <p>第六节</p>
        <p>14:50 - 15:30</p>
      </th>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>化学</td>
      <td>物理</td>
    </tr>
    <tr>
      <th>
        <p>第七节</p>
        <p>15:40 - 16:40</p>
      </th>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>化学</td>
      <td>物理</td>
    </tr>
    <td colspan="7" style="background-color: lightgray;">
      <p>晚自习</p>
      <p>19:00 - 21:50</p>
    </td>
  </tr>
   </tbody>
   <tfoot>
    <tr>
      <!-- 水平方向合并/列合并 : colspan  -->
      <th colspan="2">课程表有效期:</th>
      <td colspan="5">2022年10月1日-2023年5月1日</td>
    </tr>
  </tfoot>
 </table>

效果