《HTML+CSS》视频15 表格、空表格隔开父子外边距、解决高度塌陷

这篇博客探讨了HTML中的表格使用，包括表格元素的定义、边框合并以及如何使用CSS进行样式调整。重点讲述了如何解决父子元素外边距重叠问题，提出了使用空表格和CSS伪类的方法。此外，还讲解了如何解决高度塌陷问题，提供了解决方案的最终版本。

表格

在html中，使用table标签中来创建表格

在table标签中，使用tr来表示表格中的一行

在tr中使用td来创建一个单元格

在tr中使用th可以给单元格加表头

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<th>Header1</th>
				<th>Header2</th>
				<th>Header3</th>
			
			</tr>
			<tr>
				<td>Data1</td>
				<td>Data2</td>
				<td>Data3</td>
			</tr>
			<tr>
				<td>Data4</td>
				<td colspan="2">Data5</td>
			</tr>
		</table>	                              
	</body>
</html>

在这里插入图片描述

在td标签中使用colspan属性，可以横向合并单元格：

<td colspan="2">Data5</td>

rowspan可以纵向合并单元格。

<td> rowspan="2">Data3</td>

table是一个块元素，可以设置宽度。

border="" cellspacing="" cellpadding=""

代码中的border、cellspacing、cellpadding等可以设置边框、间隔等

也可以在CSS中设置：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				border: 2px solid orange;
				border-spacing: 10px;
			}
			td{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Header1</th>
				<th>Header2</th>
				<th>Header3</th>
			
			</tr>
			<tr>
				<td>Data1</td>
				<td>Data2</td>
				<td>Data3</td>
			</tr>
			<tr>
				<td>Data4</td>
				<td colspan="2">Data5</td>
			</tr>
		</table>	                              
	</body>
</html>

在这里插入图片描述
用border-spacing可以设置table和td边框之间的距离。
使用border-collapse可以使table和td两者之间的边框合并

border-collapse:collapse;

边框合并之后，则border-spacing自动失效。

隔行变色
可以使用伪元素对tr标签进行设置：

tr:nth-child(odd){
background-color:#bfa;
}

鼠标移入变色
还可以使用hover使鼠标移入的时候，那一行变色。

在HTML中，为表格提供了三个标签：

thead 表头
tbody 表格主体
tfoot 表格底部

这三个标签可以区分表格的不同部分，他们都是表格的子标签，tr需要写在这些内容中间，thead永远在最上边，tfoot永远在底部。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				border-collapse:collapse;
			}
			td,th{
				border: 1px solid black;
			}
			tr:nth-child(odd){
				background-color: aquamarine;
			}
			tr:hover{
				background-color: gold;
			}
			th{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>Header1</th>
					<th>Header2</th>
					<th>Header3</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td></td>
					<td>合计</td>
					<td>100</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>Data1</td>
					<td>Data2</td>
					<td>Data3</td>
				</tr>
				<tr>
					<td>Data1</td>
					<td>Data2</td>
					<td>Data3</td>
				</tr>
				<tr>
					<td>Data1</td>
					<td>Data2</td>
					<td>Data3</td>
				</tr>
				<tr>
					<td>Data4</td>
					<td colspan="2">Data5</td>
				</tr>
			</tbody>
		</table>	                              
	</body>
</html>

在这里插入图片描述

如果表格中没有写tbody，浏览器会在表格中自动添加tbody，并且将所有的tr都放入tbody中。此时，table不是tr的父元素，tbody才是。

表格是可以嵌套的，可以在td中再放入一个表格，在很久很久以前，是用表格进行布局的，但是因为难以维护，且不利于搜索引擎检索，所以已经被css淘汰了。

解决父子元素外边距重叠

使用空的table可以隔离父子元素的外边距重叠。

<div class="box1">
	<table></table>
	<div class="box2"></div>
</div>

也可以通过CSS，使用before伪类，并且将display设置为table，即可以将父子元素的外边距隔开。

.box1:before{
	content:"";
	display:table;
}

解决高度塌陷

原来的解决方案是使用after伪类：

.clearfix:after{
	content:"";
	display:block;
	/*清楚两边塌陷元素的影响*/
	clear:both;
}
...
<div class="box1 clearfix">
	<div class="box2"></div>
</div>

也可以将上面的display中的值改成block。

最终版本

所以我们可以综合两种方法，写出一段同时具备两种功能的代码：

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
	clear:both;
}
/*兼容IE6*/
.clearfix{zoom:1;}