HTML - colspan 属性_HTML 菜鸟教程

HTML colspan 属性用于定义与其他单元格相比，单元格应跨越或扩展多少个表列。

此属性的值必须是非负整数。它的默认值为 1，如果我们为此属性分配一个大于 1000 的值，则将其视为假值，并将设置为默认值 1。

如果为其赋值为负值，它将将其视为假值，并自动为其设置默认值 1。

语法

<tag colspan = "value"></tag>

其中，该值可以是范围 1 到 1000 之间的任何非负整数。

适用于

下面列出的元素允许使用 HTML colspan 属性

元素	描述
<th>	定义了 HTML 表格中的标题单元格。
<td>	定义了 HTML 表格中的标准单元格

HTML colspan 属性的示例

以下代码演示了 colspan 属性的用法

带有第 Tag 的 Colspan 属性

在以下示例中，我们使用 colspan 属性来跨越表的标题单元格。

<!DOCTYPE html>
<html lang="en">

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

<body>
	 <!--HTML 'colspan' attribute-->
	 <p>Example of HTML 'colspan' attribute</p>
	 <h2>Students Table</h2>
	 <table>
			<tr>
				 <th colspan="2">Name</th>
				 <th>Roll No</th>
				 <th>Gender</th>
			</tr>
			<tr>
				 <th>First Name</th>
				 <th>Last Name</th>
			</tr>
			<tr>
				 <td>Revathi</td>
				 <td>Satya</td>
				 <td>1</td>
				 <td>Female</td>
			</tr>
			<tr>
				 <td>Aman</td>
				 <td>Kumar</td>
				 <td>2</td>
				 <td>Male</td>
			</tr>
	 </table>
</body>

</html>

带有 td 标签的 Colspan 属性

考虑到另一种情况，我们将使用带有 td 标签的 colspan 属性。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML 'colspan' attribute</title>
	 <style>
			table,
			th,
			td {
				 border: 1px solid black;
				 width: 30%;
			}
	 </style>
</head>

<body>
	 <!--HTML 'colspan' attribute-->
	 <p>Example of the HTML 'colspan' attribute</p>
	 <h2>Grocery Bill</h2>
	 <table>
			<tr>
				 <th>Name</th>
				 <th>Price</th>
				 <th>GST</th>
			</tr>
			<tr>
				 <td>Bread</td>
				 <td>50</td>
				 <td>5</td>
			</tr>
			<tr>
				 <td>Eggs</td>
				 <td>180</td>
				 <td>10</td>
			</tr>
			<tr>
				 <!--colspan with value 2-->
				 <td colspan="2">Total price(without GST): 230</td>
				 <td>Total GST: 15</td>
			</tr>
			<tr>
				 <!--colspan with value 3-->
				 <td colspan="3">Total paid price(including GST): 245</td>
			</tr>
	 </table>
</body>

</html>

支持的浏览器

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

<< HTML - cols 属性 HTML - content 属性 >>