HTML <td> rowspan 属性

在 HTML 表格中，<td> 元素用于表示表格中的单元格。其中，rowspan 属性用于指定单元格横跨的行数。通过合理地使用rowspan属性，我们可以实现更加灵活多样的表格布局。

基本语法

rowspan 属性可以在<td>元素中使用，其基本语法如下：

// www.javascriptcn.com code example
<table>
  <tr>
    <td rowspan="2">单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
  </tr>
</table>

在上面的示例中，第一个单元格横跨了两行，因此第二行只有两个单元格。

示例代码

让我们通过一个更加具体的示例来演示rowspan属性的使用：

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

在上面的示例中，张三的姓名单元格横跨了两行，使得表格更加清晰易读。

注意事项

在使用rowspan属性时，需要注意以下几点：

1. rowspan属性的值必须为正整数。
2. 被跨行的单元格只能在其所在行的最后一个单元格中使用rowspan属性。
3. 被跨行的单元格的内容会覆盖其所在行其他单元格的内容。

总结

通过合理地使用rowspan属性，我们可以实现更加灵活多样的表格布局。在实际开发中，我们可以根据需求灵活运用rowspan属性，使表格更加美观易读。希望本篇文章对你有所帮助！