表格布局

元信息

目标：理解布局的本义（网页元素之间的相对关系）与表格布局这段"古代史"——语义标记被借去做视觉布局的教训，以及样式与结构分离后 display:table 让表格布局特性回归
关键概念：布局、表格布局、语义与表现分离、display:table
关联阶段：cp2
常见误区：以为"禁止表格布局"连 display:table 也一并禁用（被废弃的是拿 table 语义标记做布局，表格布局特性本身已回归 CSS）；以为布局指元素的长相（布局指元素间的相对位置关系）

布局 layout

布局指的是网页元素之间的相对关系。在Web的古早时代，由于css技术尚未成熟，网站开发者普遍借用内置的盒子类型来实现视觉上的多行多列布局，比如：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

如果需要获得更复杂的布局，一般采用table 里面嵌入table的方式

表格的废弃与重回

表格这一概念，实际上包含了两层含义

作为语义：它表示一组关系型的数据或内容
作为视觉布局：它表示一组呈多行多列排列的样式

在古早年代，错误地将作为语义标记的用于视觉呈现。尤其当布局较为复杂时，使得表格的嵌套十分复杂，给html文档增加了大量语义无关的标记，对于搜索引擎之类的Web客户端十分不友好。因此，现代Web前端技术规范都禁止使用用于布局。

而随着css的逐渐成熟，表格布局与表格元素分离（样式与结构的分离），开发者又开始重新尝试使用表格布局技术

基于 table layout 特性

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

扩展阅读

传统表格布局 https://blog.csdn.net/weixin_43758938/article/details/100702870
传统表格布局 https://blog.csdn.net/zhanlong11/article/details/105824031
现代表格布局 https://blog.csdn.net/qq_39877681/article/details/109737777

表格布局 ​

元信息 ​

布局 layout ​

表格的废弃与重回 ​

基于 table layout 特性 ​

扩展阅读 ​

表格布局

元信息

布局 layout

表格的废弃与重回

基于 table layout 特性

扩展阅读