HTML - span 属性_HTML 菜鸟教程

HTML span 属性用于指定 <col> 或 <colgroup> 元素应跨越的列数。

span 属性用于跨越列，当我们将 CSS 属性应用于 <col> 或 <colgroup> 元素时，span 将允许我们将相同的 CSS 属性应用于多列。

语法


 <tag span="2">

适用对象

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

元素	描述
<colgroup>	HTML <colgroup> 标签用于描述表中一列或多列的集合，以便进行格式设置。
<col>	HTML <col> 标签用于提供有关列的信息。

HTML span 属性的示例

以下示例将说明 HTML span 属性，我们应该在何处以及如何使用此属性！

在 <colgroup> 元素上实现背景色

在以下示例中，我们将使用 span 属性通过使用 <colgroup> 一次选择列来设置前三列的背景颜色。


<!DOCTYPE html>
<html>

<head>
			<!-- Used to set the border on the table -->
			<style>
				 table,
				 th,
				 td {
						border: 1px solid gray;
				 }
			</style>
</head>

<body>
			<h3>HRML span Attribute</h3>
			<table>
				 <colgroup span="3" 
									 style="background:green">
				 </colgroup>
				 <tr>
						<th>Course</th>
						<th>Enroll Date</th>
						<th>Status</th>
						<th>Certificate</th>
				 </tr>
				 <tr>
						<td>HTML</td>
						<td>30th May</td>
						<td>Learning</td>
						<td>Not Issued</td>
				 </tr>
				 <tr>
						<td>CSS</td>
						<td>31st May</td>
						<td>Learning</td>
						<td>Not Issued</td>
				 </tr>
			</table>
</body>

</html>

在 <col> 元素上实现背景色

在以下示例中，我们将使用 span 属性通过使用 <col> 单独选择列来设置前两列的背景颜色。


<!DOCTYPE html>
<html>

<head>
			<!-- Used to set the border on the table -->
			<style>
				 table,
				 th,
				 td {
						border: 1px solid gray;
				 }
			</style>
</head>

<body>
			<h3>HRML span Attribute</h3>
			<table>
				 <colgroup> 
						<col span="2" style="background-color:green"> 
						<col style="background-color:yellow">
				</colgroup>
				 <tr>
						<th>Course</th>
						<th>Enroll Date</th>
						<th>Status</th>
						<th>Certificate</th>
				 </tr>
				 <tr>
						<td>HTML</td>
						<td>30th May</td>
						<td>Learning</td>
						<td>Not Issued</td>
				 </tr>
				 <tr>
						<td>CSS</td>
						<td>31st May</td>
						<td>Learning</td>
						<td>Not Issued</td>
				 </tr>
			</table>
</body>

</html>

支持的浏览器

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

<< HTML - src 属性 HTML - srcdoc 属性 >>