HTML - rowspan 属性_HTML 菜鸟教程

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">QikepuCom</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>QikepuCom</td>
				 <td>hyderabad</td>
				 <td rowspan="2">MD.Mohtashim</td>
			</tr>
			<tr>
				 <td>tutorix</td>
				 <td>Noida</td>
			</tr>
	 </table>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - rows 属性 HTML - sandbox 属性 >>