HTML的span属性使用方法 C/C++

admin 2019-7-15 173

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

示例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

注:<colgroup> 标签只能在 table 元素中使用。

浏览器支持

● Google Chrome

● Internet Explorer

● Firefox

● Apple Safari

● Opera

以上就是HTML的span属性怎么用?的详细内容


少客联盟- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与少客联盟立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者admin少客联盟享有帖子相关版权。
3、少客联盟管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者admin少客联盟的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。
8、官方反馈邮箱:chinasuc@chinasuc.cn


上一篇:HTML 样式
下一篇:HTML 文本格式化
Whatever is worth doing is worth doing well. juvenile hacker league
最新回复 (0)
    • 少客联盟
      2
        登录 注册 QQ登录(停用)
返回