table
基于标记
在Web网站的古早时代，由于css技术尚未成熟，网站开发者普遍借用
标记来实现视觉上的多行多列布局，如下：
Export
HTML
Result
1
2
3
4
5
6
7
8
<table border="1px">
<tr> <td>姓名：</td> <td>年龄：</td> <td>性别：</td> </tr>
<tr> <td>张三</td> <td>21</td> <td>男</td> </tr>
<tr> <td>李四</td> <td>32</td> <td>男</td> </tr>
<tr> <td>王五</td> <td>54</td> <td>男</td> </tr>
</table>
表格的废弃与重回
表格这一概念，实际上包含了两层含义
- 作为语义：它表示一组关系型的数据或内容
- 作为视觉布局：它表示一组呈多行多列排列的样式
在古早年代，错误地将作为语义标记的
用于视觉呈现。尤其当布局较为复杂时，使得表格的嵌套十分复杂，给html文档增加了大量语义无关的标记，对于搜索引擎之类的Web客户端十分不友好。因此，现代Web前端技术规范都禁止使用而随着css的逐渐成熟，表格布局被独立出来，开发者又开始重新尝试使用表格布局技术
基于 table layout 特性
Export
HTML
Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.box{
width: 600px;
height: 100px;
display: table;
}
.left,.right{ display: table-cell; }
.left{background: yellowgreen; }
.right{background: skyblue; }
</style>
扩展阅读
- 传统表格布局 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
关键点：结构与样式的分离