CSS表格

news2025/11/1 6:20:16

标准的表格结构

table标签：定义表格
caption标签：定义表格标题，这个标题会居中显示在表格上，一个表格只能定义一个标题
th标签：定义表格的表头，通常成粗体居中表示
tr标签：定义表格的一行
td标签：定义表格的一个单元格
thead标签：定义表头
tbidy标签：定义表格主体部分。
tfoot标签：定义表格页脚（脚注）
col标签：针对一个或多个列的属性值，只能table或colgroup标签中使用
colgroup标签：表格列的分组，可以对表格的列组进行格式化，只能在table中使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table ,th,td{
				border: 1px solid #000;
				width: 400px;
			}
			tbody tr td{
				text-align: center;
			}
			colgroup .a1{
				background-color: aqua;
			}
			colgroup .a2{
				background-color: red;
			}
			colgroup .a3{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<table>
			<colgroup >
				<col class="a1">
				<col class="a2">
				<col class="a3">
			</colgroup>
			<thead>
				<caption>学习成绩表</caption>
				<th>数学</th>
				<th>语文</th>
				<th>英语</th>
			</thead>
			<tbody>
				<tr>
					<td>90</td>
					<td>100</td>
					<td>30</td>
				</tr><tr>
					<td>90</td>
					<td>100</td>
					<td>30</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>总分：</td>
					<td></td>
					<td>220</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

在这里插入图片描述

表格标签的一些属性

colspan：规定单元格可以横跨的列数
rowspan：规定表头单元格可以横跨的行数
headers：规定与表头单元格或单元格相连的一个或多个单元格
span：规定列组应该横跨的列数
其他属性HTML5已弃用不建议使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		table,tr,th,td{
			border: 1px solid #000;
		}
		table{
			width: 400px;
			line-height:10px;
			font-size:10px
		}
		td{
			text-align:center;
		}
		</style>
	</head>
	<body>
		<table>
			<caption>人员信息表</caption>
			<tr>
				<th rowspan="2">姓名</th>
				<th rowspan="2">年龄</th>
				<th id="gender" colspan="2">性别</th>
			</tr>
			<tr>
				<th headers="gender">男</th>
				<th headers="gender">女</th>
			</tr>
			<tr>
				<td>付东流</td>
				<td>26</td>
				<td>✔️</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

定义细线表格

在表格中每个单元格都有一个独立的空间，因此在设定边框线时显示的是不连贯的线条。
要想使之紧密连接在一起需要使用border-collapse属性来合并单元格，他的值有：
collapse：合并单元格
separate：默认值，每个单元格都有独立的边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table,tr,td{
				border: 1px solid #000;
				width: 200px;
				height: 50px;
			}
			table{
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

单元格空隙

border-spacing：属性定义单元格的空隙，该属性可以分离单元格间距。
他的两个值表示行间距与列间距。也可以定义一个值，行间距与列间距都是这个值
注意：表格的单元格间距不能与合并单元格一起使用，这样会不显示效果。并且这个属性不能使用margin代替。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table,tr,td{
				border: 1px solid #000;
				width: 200px;
				height: 50px;
			}
			table{
				/* border-collapse: collapse; */
				border-spacing: 10px 10px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</table>
	</body>
</html>

隐藏单元格

单元格边框处于分离状态时可以使用empty-cells属性设置是否隐藏空白单元格，
他的值是show（展示），hide（不展示）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table,tr,td{
				border: 1px solid #000;
				width: 200px;
				height: 50px;
			}
			table{
				/* border-collapse: collapse; */
				border-spacing: 10px 10px;
				empty-cells: hide;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>