HTML表格的跨行与跨列：《红楼梦》人物与小学课表示例

news2024/11/24 16:27:37

在HTML中，表格不仅可以按常规行和列排列数据，还可以通过跨行（rowspan）和跨列（colspan）属性来合并单元格，以适应更复杂的数据展示需求。以下是跨行与跨列属性的介绍，以及两个示例：《红楼梦》人物表格和小学周一到周日的课表。

跨行与跨列属性

`rowspan`

属性值：n（无单位）
作用：一个单元格横跨多行，n表示合并的行数。

`colspan`

属性值：m（无单位）
作用：一个单元格横跨多列，m表示合并的列数。

《红楼梦》人物表格示例

假设我们创建一个《红楼梦》人物表格，其中贾宝玉的人物特点需要占用两列的空间。

<table border="1">
  <tr>
    <th>人物</th>
    <th>身份</th>
    <th>特点</th>
    <th>别称</th>
  </tr>
  <tr>
    <td>贾宝玉</td>
    <td rowspan="2">贾府公子</td> <!-- 跨行示例 -->
    <td colspan="2">多情善感，不拘小节</td> <!-- 跨列示例 -->
  </tr>
  <tr>
    <td>林黛玉</td>
    <!-- 由于贾宝玉的身份已经跨行到这一行，这里不需要再次填写 -->
  </tr>
</table>

在这里插入图片描述

小学周一到周日的课表

现在，我们使用跨行和跨列来创建一个小学的一周课表。假设周一和周二上午都是语文课，周三下午是体育课，占用两节课的时间。

 <table border="1">
        <tr>
          <th>时间/星期</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
          <th>周日</th>
        </tr>
        <tr>
          <th>上午</th>
          <td colspan="2">语文</td> <!-- 跨列示例：周一和周二上午都是语文课 -->
          <td>数学</td>
          <td>英语</td>
          <td>科学</td>
          <td>美术</td>
          <td>体育</td>
        </tr>
        <tr>
          <th>下午</th>
          <td>数学</td>
          <td>英语</td>
          <td rowspan="2">体育</td> <!-- 跨行示例：周三下午体育课占用两节课 -->
          <td>计算机</td>
          <td>音乐</td>
          <td>自习</td>
          <td>自习</td>
        </tr>
        <tr>
          <th>下午第二节</th>
          <td>英语</td>
          <td>数学</td>
          <!-- 周三下午的体育课已经跨行到这一节，这里不需要再次填写 -->
          <td>阅读</td>
          <td>体育</td>
          <td>音乐</td>
          <td>美术</td>
        </tr>
      </table>