表格元素的标签实践

表格

1.概念

table 是一个复合元素，无法使用单一元素来表示，需要用多个元素来表示；

1.<table>  表格容器;
2.<caption>    表格标题(可选元素);
3. <tr> 表格中的行;
4. <td>  \<th>  表格中的列，td与th的差别，th自带居中和加粗属性，一般用于表头;
        <!-- <thead>/<tbody>/<tfoot> -->
5.合并行 colspan
6.合并列 rowspan

2.课程表 实践

<table border="1" width="400">
  <caption>
    初中课程表
  </caption>
  <!-- 第1行 -->
  <tr>
    <td></td>
    <td></td>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
  </tr>
  <!-- 第2行 -->
  <tr>
    <!-- 从第2行第1列开始,合并5列 -->
    <!-- 垂直方向 rowspan-->
    <!-- 将合并属性必须添加到第一个td中,并使用第1个td中的数据 -->
    <td rowspan="5">上午</td>
    <!-- colspan  -->
    <!-- 从第2行第2列开始,合并6列 -->
    <!-- 水平方向 colspan-->
    <!-- 将合并属性必须添加到第一个td中,并使用第1个td中的数据 -->
    <td colspan="6">早读 7:30~8:10</td>
    <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
  </tr>
  <!-- 第3行 -->
  <tr>
    <!-- <td></td> -->
    <td>一 8:20~9:00</td>
    <td>语文</td>
    <td>数学</td>
    <td>语文</td>
    <td>英语</td>
    <td>数学</td>
  </tr>
  <!-- 第4行 -->
  <tr>
    <!-- <td></td> -->
    <td>二 9:10~9:50</td>
    <td>英语</td>
    <td>语文</td>
    <td>英语</td>
    <td>物理</td>
    <td>英语</td>
  </tr>
  <!-- 第5行 -->
  <tr>
    <!-- <td></td> -->
    <td>三 10:20~11:00</td>
    <td>数学</td>
    <td>英语</td>
    <td>物理</td>
    <td>数学</td>
    <td>政治</td>
  </tr>
  <!-- 第6行 -->
  <tr>
    <!-- <td></td> -->
    <td>四 11:10~11:50</td>
    <td>政治</td>
    <td>物理</td>
    <td>数学</td>
    <td>政治</td>
    <td>历史</td>
  </tr>
  <!-- 第7行 -->
  <tr>
    <!-- 从第7行第1列开始,合并5列 -->
    <!-- 重直方向 rowspan-->
    <!-- 将合并属性必须添加到第一个td中,并使用第1个td中的数据 -->
    -->
    <td rowspan="5">下午</td>
    <!-- 从第2行第1列开始,合并6行 -->
    <!-- 水平方向 colspan-->
    <!-- 将合并属性必须添加到第一个td中,并使用第1个td中的数据 -->
    <td colspan="6">午读 2:30~3:10</td>
    <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
  </tr>
  <!-- 第8行 -->
  <tr>
    <!-- <td></td> -->
    <td>一 3:20~4:00</td>
    <td>物理</td>
    <td>生物</td>
    <td>阅读</td>
    <td>语文</td>
    <td>美术</td>
  </tr>
  <!-- 第9行 -->
  <tr>
    <!-- <td></td> -->
    <td>二 4:10~4:50</td>
    <td>音乐</td>
    <td>历史</td>
    <td>微机</td>
    <td>语文</td>
    <td>历史</td>
  </tr>
  <!-- 第10行 -->
  <tr>
    <!-- <td></td> -->
    <td>三 5:00~5:40</td>
    <td>地理</td>
    <td>体育</td>
    <td>地理</td>
    <td>生物</td>
    <td>体育</td>
  </tr>
  <!-- 第11行 -->
  <tr>
    <!-- <td></td> -->
    <td>四 5:50~6:30</td>
    <td>英语考试</td>
    <td>数学</td>
    <td>英语</td>
    <td>数学</td>
    <td>数学考试</td>
  </tr>
</table>

完成后

2023.1.16