031_CSS表格

最新推荐文章于 2025-06-29 11:09:31 发布

原创最新推荐文章于 2025-06-29 11:09:31 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

1. CSS表格属性可以帮助您极大地改善表格的外观。

2. CSS表格属性

3. 表格边框

3.1. 如需在CSS中设置表格边框, 请使用border属性。

3.2. 下面的例子为table、th以及td设置了蓝色边框:

table, th, td {
	border: 1px solid blue;
}

3.3. 请注意, 上例中的表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。

4. 表格边框合并

4.1. border-collapse属性设置表格的边框是否被合并为一个单一的边框, 还是象在标准的html中那样分开显示。

4.2. 默认值

4.3. 可能的值

4.4. 例子

4.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>边框合并</title>
		<meta charset="utf-8" />

		<style type="text/css">
			table, td, th {
				border: 1px solid black;
			}
			#collapse {
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<table>
			<caption>未合并边框的表格</caption>
			<tr>
				<th>如需在CSS中设置表格边框, 请使用border属性。</th>
				<th>表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。</th>
			</tr>
			<tr>
				<td>border-collapse属性设置表格的边框是否被合并为一个单一的边框</td>
				<td>separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。</td>
			</tr>
			<tr>
				<td>collapse如果可能, 边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。</td>
				<td>如果没有规定!DOCTYPE, 则 border-collapse可能产生意想不到的结果。</td>
			</tr>
		</table>
		<br />
		<table id="collapse">
			<caption>合并边框的表格</caption>
			<tr>
				<th>如需在CSS中设置表格边框, 请使用border属性。</th>
				<th>表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。</th>
			</tr>
			<tr>
				<td>border-collapse属性设置表格的边框是否被合并为一个单一的边框</td>
				<td>separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。</td>
			</tr>
			<tr>
				<td>collapse如果可能, 边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。</td>
				<td>如果没有规定!DOCTYPE, 则 border-collapse可能产生意想不到的结果。</td>
			</tr>
		</table>
	</body>
</html>

4.4.2. 效果图

5. 相邻单元格的边框间的距离

5.1. border-spacing属性设置相邻单元格的边框间的距离(仅用于"边框分离"模式)。

5.2. 在指定的两个长度值中, 第一个是水平间隔, 第二个是垂直间隔。

5.3. 默认值

5.4. 可能的值

5.5. 例子

5.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>相邻单元格的边框间的距离</title>
		<meta charset="utf-8" />

		<style type="text/css">
			table, td {
				border: 1px solid black;
			}
			table {
				border-collapse: separate;
				border-spacing: 10px 50px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>border-spacing属性设置相邻单元格的边框间的距离(仅用于"边框分离"模式)。</td>
				<td>在指定的两个长度值中, 第一个是水平间隔, 第二个是垂直间隔。</td>
			</tr>
			<tr>
				<td>除非border-collapse被设置为separate, 否则将忽略这个属性。</td>
				<td>不允许使用负值。</td>
			</tr>
		</table>
	</body>
</html>

5.5.2. 效果图

6. 设置表格标题的位置

6.1. caption-side属性设置表格标题的位置。

6.2. 表标题显示为好像它是表之前(或之后)的一个块级元素。

6.3. 默认值

6.4. 可能的值

7. 表格空单元格显示和隐藏

7.1. empty-cells属性设置是否显示表格中的空单元格(仅用于"分离边框"模式)。

7.2. 除非border-collapse设置为separate, 否则将忽略这个属性。

7.3. 默认值

7.4. 可能的值

7.5. 例子

7.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>表格标题的位置和单元格显示和隐藏</title>
		<meta charset="utf-8" />

		<style type="text/css">
			table, td {
				border: 1px solid blue;
			}
			#t1 {
				caption-side: bottom;
			}
			#t2 {
				empty-cells: hide;
			}
		</style>
	</head>
	<body>
		<table id="t1">
			<caption>标题在下, 显示空单元格</caption>
			<tr>
				<td>caption-side属性设置表格标题的位置。</td>
				<td>表标题显示为好像它是表之前(或之后)的一个块级元素。</td>
			</tr>
			<tr>
				<td>empty-cells属性设置是否显示表格中的空单元格(仅用于"分离边框"模式)。</td>
				<td></td>
			</tr>
		</table>
		<br />
		<table id="t2">
			<caption>标题在上, 隐藏空单元格</caption>
			<tr>
				<td>caption-side属性设置表格标题的位置。</td>
				<td>表标题显示为好像它是表之前(或之后)的一个块级元素。</td>
			</tr>
			<tr>
				<td></td>
				<td>empty-cells除非border-collapse设置为separate, 否则将忽略这个属性。</td>
			</tr>
		</table>
	</body>
</html>

7.5.2. 效果图