Table布局

提示

在我看来栅格布局跟 table 有相似的点，但是栅格布局比较友好，只是 div 进行各种处理。table 布局是在父元素使用 display:table; 子元素使用 display:table-row或 display:table-cell; 子元素会默认自动平均划分父元素的空间。

特点：如果设置其中一个子元素 table-cell 为固定宽度，那么其余子级容器会自动平分宽度沾满父级容器。优点：兼容性好，容易上手，做表格是100%正确。缺点：

比其他 html 标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。渲染不友好，阻碍浏览器渲染引擎的渲染顺序，等内容全部加载完成在显示表格，会延迟页面的生成速度，让用户等待时间更久。灵活性差，一旦设计确定会变死，后期很难通过 CSS 改变新的面貌，且不能自适应。不利于搜索引擎抓取信息，直接影响到网站的排名。这里使用简单的 table 布局例子：

alt text

html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>table布局</title>
		<style>
			.box {
				width: 600px;
				height: 100px;
				display: table;
			}
			
			.a,
			.b,
			.c,
			.d {
				display: table-cell;
			}
			
			.a {
				background: blueviolet;
			}
			
			.b {
				background: aqua;
			}
			
			.c {
				background: palevioletred;
			}
			
			.d {
				background: hotpink;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
			<div class="d"></div>
		</div>
	</body>

</html>

Table布局 ​

Table布局