想实现一个 Table 组件
必然是离不开
table、tbody、tr、td ...
这些基本元素
以及
这些基本元素的CSS特性
最正确、最优雅组合它们的姿势
都写在 W3C 规范里
后续内容均参考自
https://www.w3.org/TR/CSS22/tables.html
上车!看一波规范!
1. {display: table} 是什么鬼?
HTML 中使用一套标签描述表格
table、tr、td、col ...
相信大家都熟悉
然而 CSS 里面也有一套对应的
display: table、display: tabel-row ...
图:HTML元素与CSS样式的对应关系
—— https://www.w3.org/TR/CSS22/sample.html
它们有什么联系、区别?
看看规范里面咋说...
图:XML 中用 CSS 描述表格数据
— https://www.w3.org/TR/CSS22/tables.html,17.1 节
2. Table 可由哪些部分组成?
直接给大家看个表就懂了
图:与 Table 相关的 HTML元素、CSS属性
注:这里面 col、colgroup 可能比较生僻,但用处很大
再看一个应用示例
图:antd 的 Table 组件 UI
图:antd 的 Table 组件 HTML 结构
— https://www.w3.org/TR/CSS22/tables.html, 17.2 节
3. Table 的 Column
col 与 colgroup
可以对 “列” 施加 4 种属性
—— https://www.w3.org/TR/CSS22/tables.html#columns, 17.3 节
图:col 使用示例
4. Table 的 Caption
<caption></caption>
是用做 table 标题的 HTML 元素
还可以控制位置
—— https://www.w3.org/TR/CSS22/tables.html, 17.4节
图:caption 使用示例
注:由于 <caption> 能力有限,一般很少使用它,开源表格都是用 div 模拟标题;
5. Table 是有层次的
正确理解 Table 的分层
才能合理地给 Table 各部分加背景色
—— https://www.w3.org/TR/CSS22/tables.html#table-layers, 17.5.1 节
图:Table 分层背景示例
6. Table 的固定布局算法
{table-layout: fixed}
特点:
表格宽度特性:
图:Table 宽度特性
列宽计算规则:
—— https://www.w3.org/TR/CSS22/tables.html#fixed-table-layout
图:table-layout:fixed 布局特性
Table 还有一种自动布局模式
{table-layout: auto}
由于 CSS 规范并没有完整定义
就不在这里分析了
—— https://www.w3.org/TR/CSS22/tables.html#auto-table-layout
7. Table 的边框
Table 的边框也有两种模型
{ border-collapse: collapse; }
{ border-collapse: separate; }
7.1. separate 模式;
separate 模型规则简单
—— https://www.w3.org/TR/CSS22/tables.html#separated-borders
图:separate边框模型示例
7.2. collapse 模式;
collapse 模式就有点复杂了
—— 《CSS 权威指南》
—— https://www.w3.org/TR/CSS22/tables.html#collapsing-borders
最有意思的边框啥意思?
边框怎么合并?
若两个或多个边框相邻,合并规则为:
来看最后一个例子
图:collapse 边框模型示例
先想想会出现啥效果?
公布答案
参考:
https://www.w3.org/TR/CSS22/tables.html 《CSS 权威指南》