HTML - rowspan 属性



HTML rowspan 属性指定表格或网格中单元格或网格单元格所跨越的行数。

如果一行跨越两行,则表示它将占用表格中的两行。这类似于 Excel 等电子表格程序中的合并单元格。它允许单个表格单元格跨越多个单元格或行的高度。

语法

<th|td rowspan="2 | 3 | 4, …" >

应用于

以下列出的元素允许使用 HTML rowspan 属性。

元素 描述
<th> HTML <th> 标签指定 HTML 表格的表头单元格。
<td> HTML <td> 标签指定 HTML 表格的数据单元格。

HTML rowspan 属性示例

以下示例将说明 HTML rowspan 属性,以及我们应该在哪里以及如何使用此属性!

使用 rowspan 属性合并表头单元格

输出窗口显示一个表格,通过合并第一列的三个行单元格来创建。

<!DOCTYPE html>
<html>

<head>
   <title>The td rowspan attribute</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <h1>The th rowspan attribute</h1>
   <table>
      <tr>
         <th rowspan="3">tutorialspoint</th>
         <th>Employee</th>
         <th>Designation</th>
      </tr>
      <tr>
         <td>Aman Kumar</td>
         <td>technical content writer</td>
      </tr>
      <tr>
         <td>Vivek Kumar</td>
         <td>Developer</td>
      </tr>
   </table>
</body>

</html>

使用 rowspan 属性合并表格数据单元格

输出窗口显示一个表格,通过合并最后一列的第二行和第三行单元格来创建。

<!DOCTYPE html>
<html>

<head>
   <title>The td rowspan attribute</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <h1>The td rowspan attribute</h1>
   <table>
      <tr>
         <th>Company</th>
         <th>Location</th>
         <th>Founder</th>
      </tr>
      <tr>
         <td>tutorialspoint</td>
         <td>hyderabad</td>
         <td rowspan="2">MD.Mohtashim</td>
      </tr>
      <tr>
         <td>tutorix</td>
         <td>Noida</td>
      </tr>
   </table>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
rowspan
html_attributes_reference.htm
广告