HTML <th> rowspan 属性

在 HTML 表格中，<th> 元素用于定义表格的标题行，通常位于表格的顶部或左侧。rowspan 属性可以用来合并单元格，使得一个单元格跨越多行。

语法

rowspan 属性是 <th> 元素的一个属性，用于指定单元格跨越的行数。语法如下：

<th rowspan="number">

其中 number 是一个正整数，表示单元格应该跨越的行数。如果不指定 rowspan 属性，默认值为 1，即单元格不跨越行。

示例

假设我们有一个简单的表格如下：

// www.javascriptcn.com code example
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

如果我们想要将第一列的标题行合并为一个单元格，可以使用 rowspan 属性：

// www.javascriptcn.com code example
<table border="1">
  <tr>
    <th rowspan="2">姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

在上面的示例中，<th> 元素的 rowspan 属性被设置为 2，使得 "姓名" 单元格跨越了两行。

注意事项

• 使用 rowspan 属性时，要确保被合并的单元格在每一行中都存在，否则会导致表格结构混乱。
• 尽量避免过度合并单元格，以免影响表格的可读性和可访问性。

通过使用 rowspan 属性，我们可以轻松地在 HTML 表格中创建复杂的布局，提高页面的可视化效果和用户体验。