HTML的span属性怎么用？

HTML的span属性用于定义<col>、<colgroup>元素应该跨越的列数；在默认情况下，它只能影响一列。下面本篇文章就来给大家介绍一下HTML span属性，希望对大家有所帮助。

语法：

<element span="number">

示例1：在<col>元素中使用span属性

<col> 标签为表格中一个或多个列定义属性值。如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		<h2>HTML col span属性</h2>

		<table border="1">
			<colgroup>
				<col span="2" style="background-color:pink">
				<col style="background-color:plum">
			</colgroup>
			<tr>
				<th>Name</th>
				<th>Branch</th>
				<th>Expenses</th>
			</tr>

			<tr>
				<td>BITTU</td>
				<td>CSE</td>
				<td>2500.00</td>
			</tr>

			<tr>
				<td>RAKESH</td>
				<td>ECE</td>
				<td>1400.00</td>
			</tr>
		</table>
	</body>
</html>

效果图：

2a589158a380ddec11b582bc0e249ca.png-600

示例2：在<colgroup>元素中使用span属性

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			table {
				color: white;
				background: pink;
			}
			
			td {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<h2>HTML colgroup span属性</h2>

		<table>
			<colgroup span="2" style="background-color:green"></colgroup>
			<tr>
				<th>S.No</th>
				<th>Title</th>
				<th>id</th>
			</tr>
			<tr>
				<td>No.1</td>
				<td>hello world!</td>
				<th>id_1</th>
			</tr>
			<tr>
				<td>No.2</td>
				<td>hello world!</td>
				<th>id_2</th>
			</tr>
		</table>
	</body>
</html>

效果图：

00cb484cfa9d32b3316e20092699427.png-600