文章目录

系列文章

• CSS基础
• 基础选择器
• 结点选择器
• 伪类和伪元素
• 结构的特殊性
• 结构的继承和层叠
• 数值
• 长度单位和URL
• 字体
• 文本
• 基本布局(块级元素)
• 基本布局(行内元素)
• 内边距、边框和外边距
• 颜色和背景
• 浮动
• 定位
• 表布局
• 列表与生成内容
• 用户界面样式

表格式化

在CSS中，内部表元素生成矩形框，这些框有内容、内边距和边框，但是没有外边距。

表的编排规则为：

• 每个行框包含一行表格单元。有多少个行元素，表中就包含多少表格行。
• 一个行组包含多少个行框，该行组框就包含多少个表格单元。
• 列框包含一列或多列表格单元。所有列框都按其出现的顺序依次相邻放置，第一个列框在左侧。
• 列组中包含多少个列框，该列组框中就包含多少个表格单元。
• 每个跨行或跨列的单元格是一个矩形框，其宽度和高度分别为一个或多个单元格，框的顶行在作为该单元格父元素的行中，框必须尽可能向左但不能覆盖任何其他单元格框，还必须在同一行上所有之前单元格的右边。
• 单元格框不能超出表或行组的最后一个行框，否则单元格必须缩小。

表的显示值有：

除了已经介绍过的值，其余值的含义如下：

table

定义了一个生成块框的矩形块，相应的HTML元素是 <table>

inline-table

定义一个行内级表，类似于 inline-block

table-row

指定了一个元素是一个单元格的行，相应的HTML元素是 <tr>

table-row-group

指定一个元素是一个或多个行的组，相应的HTML元素是 <tbody>

table-header-group

类似上面，只是视觉格式化略有不同。相应的HTML元素是 <thead>

table-footer-group

类似上面，只是脚注行组总是在其它行之后显示。相应的HTML元素是 <tfoot>

table-column

描述了一个单元格的列，主要用于帮助显示，相应的HTML元素是 <col>

table-column-group

描述了一个元素是一个或多个列的组，有助于定义列组元素的显示，相应的HTML元素是 <colgroup>

table-cell

指定了一个元素显示表中的单个单元格，相应的HTML元素是 <th> 和 <td>

table-caption

描述了一个表的总标题，一个表中只能有一个该样式的元素

CSS表模型的定义是“以行为主”。列是从单元格布局中推导出的。

CSS中列组只能接受以下4种属性：

border

为列组设置边框。后文会提到。

background

只有单元格及其行有透明背景时，列或列组的背景才可见。后文会提到。

width

定义了列或列组的最小宽度，单元格的内容可能要求列更宽。

visibilty

当值为 collapse 时该列或列组中所有的单元格都不显示

匿名表对象

标记语言中可能未包含足够的元素，以至于无法按照CSS的定义充分显示表。

CSS中表的结构大致为：

当该结构中缺少了一些对象时，会创建相应的匿名对象，摆放在正确的位置，填充缺失的结构。

表层

为了显示表，CSS定义了6个表层，如下所示：

所有表层都是默认透明的，因此当上层元素都没有背景时，下层元素的背景将可见。

表标题

可以将标题置于表的上方或下方：

表标题格式化的效果类似块框，但 run-in 元素不会进入它。

表单元格边框

有两种不同的边框模型可供选择：

接下来会解释这两种模型。

分隔单元格边框

separate 模型下，表中的每一个单元格都与其它单元格分开一定距离，而且单元格的边框彼此不会合并。

这种模型下可以自定义单元格分开的距离：

第一个长度指定水平间隔，第二个可省略的长度指定垂直间隔。

---

这种模型下还可以处理空单元格：

show 值会画出空单元格的边框和背景，而 hide 值会则不会画出该单元格的任何部分。

合并单元格边框

以下规则使合并单元格边框与分隔单元格边框有所区别：

• table 或 inline-table 元素不能有任何内边距，因此表的外围边框与最外单元格边界之间不会有任何距离。
• 边框可以应用到单元格、行、行组、列和列组。表元素本身通常有边框。
• 单元格边框之间绝对不会有任何间隔。
• 如果边框相邻，就会合并，单元格之间的边框会在单元格间的假象表格线上居中。

CSS规范对表布局的公式为：row width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 + ... + padding-rightn + (0.5 * border-widthn)

• 如果某个合并边框的 border-style 为 hidden ，它会优先于所有其他合并边框。这个位置上的所有边框都隐藏。
• 如果某个合并边框的 border-style 为默认值 none ，它的优先级最低。这个位置上不会画出该边框。
• 如果合并边框的 border-style 值至少有一个不是 none ，且所有都不是 hidden ，则显示更宽的边框。有相同的宽度时，按边框样式的优先级递减为：double 、solid 、dashed 、dotted 、ridge 、outset 、groove 、inset 。
• 如果合并边框的样式和宽度都一样，但是颜色不同，则按以下优先级递减顺序使用元素的颜色：cell 、row 、row group 、column 、column group 、table 。
• 因此，如果一个单元格和一个列的边框合并，会倾向使用单元格的边框颜色（与样式、宽度）。如果合并边框来自相同类型的元素，则颜色取最上最左边框的颜色。

表大小

宽度

有两种不同方法可以得出表的宽度：

固定布局模型的步骤：

• width 属性值不是 auto 的所有列元素会根据 width 值设置该列的宽度。
• 如果一个列的宽度为 auto 且表首行中位于该列的单元格 width 不是 auto ，则根据该单元格宽度设置此列的宽度。如果这个单元格跨多列，则宽度在这些列上平均分配。
• 在以上两步之后，如果列的宽度仍为 auto ，会自动确定其大小，使其宽度尽可能相等。

此时，表的宽度设置为表的 width 值或列宽度之和（取其中较大者）。如果表宽度大于其列宽总和，将二者之差除以列数，再把得到的这个宽度增加到每一列上。

自动布局模型的步骤：

1. 对于一列中的各个单元格，计算最小和最大单元格宽度。
   1. 确定显示内容所需的最小宽度，单元格的 width 值大于它就正常使用，是 auto 就用最小内容宽度。
   2. 没有明确指出的情况下确定完全显示内容而且不包括换行符所需的宽度，为最大单元格宽度。
2. 对于各一列，计算最小和最大列宽。
   1. 列的最小宽度由该列中所有单元格的最小单元格宽度的最大值确定。当该列指定的 width 值大于列中所有最小单元格宽度时为该值。
   2. 取该列中所有单元格的最大单元格宽度的最大值为最大宽度，当列指定的 width 值大于该列中的所有最大单元格宽度时为该值。
3. 单元格跨多列时，最小列宽之和必须等于其最小单元格宽度，最大列宽之和必须等于其最大宽度。用户代理会把列宽之和与单元格宽度的差距在所跨的列上平均分配。

接着便可以真正得出表的宽度：

• 将计算的非 auto 表宽度值与所有列宽再加上所有边框，与单元格间隔和，较大的为表的最终宽度。表的计算宽度值大于列宽、边框和单元格间隔之和时，相等增加列的宽度以刚好将表完全填充。
• 将计算的 auto 表宽度值，通过将列宽、边框和单元格间隔相加来确定表的最终宽度。

表的宽度只能恰好显示其内容，而不能有多余。

高度

height 是表的最小高度。

auto 表高度是表中所有行的行高再加上所有边框和单元格间隔的总和。
用户代理计算各单元格内容的最小和最大高度，得出行的最小和最大高度，再得出各行的高度应当是多少，将它们加在一起来确定表的高度。

对齐

单元格内所有的内容都可以使用 text-align 对齐。

vertical-align 的对齐方式为：

• top ：单元格顶端与其行顶端对齐；若跨行则与其所跨的第一行顶端对齐
• bottom ：同理，只不过为底端
• middle ：同理，只不过为中间
• baseline ：同理，只不过为基线

对一行中的单元格内容对齐的详细过程如下：

1. 基线对齐时确定该行的基线，根据它放置基线对齐单元格的内容
2. 放置所有顶端对齐单元格的内容。已放置内容单元格的最低底端确定临时高度
3. 行高增加到可以包含居中对齐或底端对齐中最高的单元格
4. 放置所有余下单元格的内容。增加内容的高度比行高小的单元格内边距，使之适应行高