React：Table 那些事（2）—— 解读 W3C 规范

想实现一个 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

它们有什么联系、区别？

看看规范里面咋说...

• 呈现表格关系的数据，应选用 table、tr、td 等 HTML 元素；
• 仅实现表格结构布局，应选用 display: table、display: table-row 等 CSS 样式；
• HTML 原生提供 table、tr、td 等元素用于描述表格型数据关系；但在其他语言中（例如：XML，它没有tr、td等元素）就只能借助 CSS 属性来描述表格；

图：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 种属性

• border：边框（只有当 border-collapse 为 collapse 才可用）；
• background：背景；
• width：指定列的最小宽度；
• visibility：collapse，不渲染列；

—— 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}

特点：

• 与自动布局算法相比，布局速度更快（浏览器接收到第一行后就可以显示表格）。
• 水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

表格宽度特性：

• 与普通块级元素不同，当 margin=0、width=auto 时，table 不会自动充满包含块空间。（注意：当表格宽度确定后，适用于块级元素的其他特性，同样也适用于表格）

图：Table 宽度特性

列宽计算规则：

• 若“列元素（col、colgroup）”指定了宽度，则采用此宽度；
• 若“列元素”未指定宽度，但第一行中的单元格指定了宽度，则采用此宽度；
• 所有没法确定宽度的列，平分剩余的空间；
• tableWidth = max(tableWidth, sum(columnWidth))
• 若 tableWidth > sum(columnWidth)，多出来的空间，平分到所有列上；

—— 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 模型规则简单

• 所有单元格的边框都是独立的；
• table 可以配置 padding 内边距；
• 可通过{ border-spacing: x, y} 配置单元格边框间距；
• row、row-group、col、col-group 元素上配置边框无效；

—— https://www.w3.org/TR/CSS22/tables.html#separated-borders

图：separate边框模型示例

7.2. collapse 模式；

collapse 模式就有点复杂了

• table 不可以设置 padding 内边距；
• row、row-group、col、col-group 元素可以正常应用边框；
• 单元格边框之间不会有任何间隔（相邻边框会合并：“最有意思”的边框会胜出）；
• 边框一旦合并，单元格之间的边框会在单元格间的假想表格线上居中。

—— 《CSS 权威指南》

—— https://www.w3.org/TR/CSS22/tables.html#collapsing-borders

最有意思的边框啥意思？

边框怎么合并？

若两个或多个边框相邻，合并规则为：

• border-style:hidden，优先级最高，这个位置上的所有边框都隐藏；
• 若宽度不同，宽的边框 > 窄的边框；
• 若宽度相同，则看边框样式：double > solid > dashed > dotted > ridge > outset > groove；
• 若宽度、样式都相同，则看层级关系：cell > row > row-group > col > col-group > table
• border-style:none，优先级最低，这个位置上不会画出该边框；

来看最后一个例子

图：collapse 边框模型示例

先想想会出现啥效果？

公布答案

参考：

https://www.w3.org/TR/CSS22/tables.html 《CSS 权威指南》