如何用table表格标签制作课程表和用ul>li>a或ul>li>a>img实现文本、图片的超链接

利用table标签制作课程表

    <style>
      table {
        width: 800px;
        border-collapse: collapse;
      }
      caption {
        padding: 15px 15px;
        font-size: 24px;
        font-weight: bold;
      }
      th,
      td {
        border: 1px solid #000;
        width: 100px;
        height: 25px;
        text-align: center;
      }
    </style>
    <table>
      <caption>
        课程表
      </caption>
      <thead>
        <tr>
          <th colspan="3">时间</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>第一节</td>
          <td>8:30-9:10</td>
          <td rowspan="2">语文</td>
          <td rowspan="2">数学</td>
          <td rowspan="2">英语</td>
          <td rowspan="2">英语</td>
          <td rowspan="2">语文</td>
        </tr>
        <tr>
          <td>第二节</td>
          <td>9:20-10:00</td>
        </tr>
        <tr>
          <td>第三节</td>
          <td>10:15-10:55</td>
          <td rowspan="2">英语</td>
          <td rowspan="2">语文</td>
          <td rowspan="2">语文</td>
          <td rowspan="2">数学</td>
          <td rowspan="2">政治</td>
        </tr>
        <tr>
          <td>第四节</td>
          <td>11:00-11:45</td>
        </tr>
        <tr>
            <td colspan="8"></td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>第五节</td>
            <td>13:15-13:55</td>
            <td rowspan="2">数学</td>
            <td rowspan="2">英语</td>
            <td rowspan="2">地理</td>
            <td rowspan="2">化学</td>
            <td rowspan="2">数学</td>
          </tr>
          <tr>
            <td>第六节</td>
            <td>14:05-14:45</td>
          </tr>
          <tr>
            <td>第七节</td>
            <td>15:00-15:40</td>
            <td rowspan="2">化学</td>
            <td rowspan="2">生物</td>
            <td rowspan="2">数学</td>
            <td rowspan="2">语文</td>
            <td rowspan="2">英语</td>
          </tr>
          <tr>
            <td>第八节</td>
            <td>15:50-16:30</td>
          </tr>
          <tr>
            <td colspan="8"></td>
        </tr>
        <tr>
          <td rowspan="2">晚上</td>
          <td>第九节</td>
          <td>19:00-19:40</td>
          <td rowspan="2">生物</td>
          <td rowspan="2">物理</td>
          <td rowspan="2">历史</td>
          <td rowspan="2">政治</td>
          <td rowspan="2">体育</td>
        </tr>
        <tr>
          <td>第十节</td>
          <td>19:50-20:30</td>
        </tr>
      </tbody>
    </table>

    重点：colspan 横向合并；rowspan纵向合并，    border-collapse: collapse；合并表格边线！

ul>li>a>img实现导航超链接

    .num>ul>li>a>img     快速生成一个图片超链接

    <div class="num">
        <ul>
            <li><a href=""><img src="" alt=""></a></li>
        </ul>
    </div>

   li*4>a{栏目$@0}      快速生成四组<li>标签包裹<a>标签的文本超链接，并从0开始递增

    <li><a href="">栏目0</a></li>
    <li><a href="">栏目1</a></li>
    <li><a href="">栏目2</a></li>
    <li><a href="">栏目3</a></li>

实例

    <div class="num">
        <ul>
            <li><a href="https://www.php.cn"><img src="https://www.php.cn/static/images/new/logo.png" alt="PHP中文网"></a></li>
            <li><a href="https://www.php.cn">栏目1</a></li>
            <li><a href="https://www.php.cn">栏目2</a></li>
            <li><a href="https://www.php.cn">栏目3</a></li>
            <li><a href="https://www.php.cn">栏目4</a></li>
        </ul>
    </div>