WEB基础之：CSS表格布局 Table Layout

表格布局 Table Layout

• • 1. 表格式化
  • • 1.1 表编排规则
    • 1.2. 表显示值
    • • 1.2.1 列
    • 1.3 匿名表对象
    • • 1.3.1 对象插入规则
    • 1.4 表层
    • 1.5 表标题
  • 2. 表单元格边框
  • • 2.1 合并或分隔单元格边框
    • 2.2 边框间隔
    • 2.3 处理空单元格
    • 2.4 合并单元格边框
    • • 2.4.1 合并单元格边框规则
  • 3. 表大小
  • • 3.1 宽度
    • 3.2 高度
    • 3.3 对齐
    • • 3.3.1 行内元素的值
      • 3.3.2 表格单元格的值

1. 表格式化

1.1 表编排规则

1. 每个行框包含一行表格单元。表中的所有行框按其在源文档中出现的顺序从上到下地填充表。因此有多少个行元素，表中就包含多少表格行。
2. 一个行组包含多少个行框，该行组框就包含多少个表格单元。
3. 列框包含一列或多列表格单元。所有列框都按其出现的顺序依次相邻放置。对于从左向右读的语言，第一列框放大左边。
4. 列组中包含多少个列框，该列组框中就包含多少个表格单元。
5. 由文档语言来定义这种跨行或跨列的单元格是一个矩形框，其宽度和高度分别为一个或多个单元格。
6. 单元格框不能超出表或行组的最后一个行框。如果表结构可能造成这种情况，单元格则必须缩小，使之能放在包含它的表或行组中。

1.2. 表显示值

• <display-outside>: block | inline | run-in
• <display-inside>: flow | flow-root | table | flex | grid | ruby
• <display-listitem> : list-item&&<display-outside>?&&[ flow | flow-root ]?
• <display-internal>: table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
• <display-box> : contents | none
• <display-legacy>: inline-block | inline-list-item | inine-table | inline-flex | inline-grid

inine-table： 指定一个元素定义了一个行内级表。
table-row： 指定一个元素是一个单元格的行。相应的THML元素是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-caption： 定义一个表的总标题。

1.2.1 列

在CSS中列和列组只能接受4种样式：border, background, width, visibility。

border： 只有当border-collapse属性值为collapse时才能为列和列组设置边框。
background： 只有当单元格及其行有透明背景时，列或列组的背景才可见。
width： 定义了列或列组的最小宽度。
visibility： 如果一个列或列组的visibility为collapse，则该列(或列组)中所有单元格都不显示。从合并列跨到其他列的单元格会被剪裁。

1.3 匿名表对象

如以下标记，定义了一个包含两个单元格的单行表，不过从结构上讲，并没有定义行的元素(tr)。

<table>
  <td>Name:</td>
  <td><input type="text" /></td>
</table>

CSS将遗漏的组件作为匿名对象插入，

<table>
  <!--anonymous table-row object begins-->
  <td>Name:</td>
  <td><input type="text" /></td>
  <!--anonymous table-row object ends-->
</table>

1.3.1 对象插入规则

1. 如果一个table-cell元素的父元素不是table-row元素，则会在该table-cell元素及其父元素之间插入一个匿名table-row对象。所插入的这个对象将包含该table-cell元素的所有连续兄弟。
2. 如果一个table-row元素的父元素不是table, inline-table,table-row-group元素，则会在该table-row元素及其父元素之间插入一个匿名table元素。所插入的这个对象将包含该table-row元素的所有连续兄弟。
3. 如果一个table-column元素的父元素不是table, inline-table,table-column-group元素，则会在该table-column元素及其父元素之间插入一个匿名table元素。
4. 如果一个table-column-group, table-header-group,table-footer-group,table-column-group, table-caption元素的父元素不是table元素。则会在该元素及其父元素之间插入一个匿名table元素。
5. 如果一个table, inline-table元素的子元素不是table-row-group,table-header-group,table-footer-group,table-row,table-caption元素，则在该table元素与其子元素之间插入一个匿名table-row对象，这个匿名对象将包含该子元素的所有不是table-row-group,table-header-group,table-footer-group,table-row,table-caption元素的连续兄弟。
6. 如果一个table-row-group,table-header-group,table-footer-group元素的子元素不是table-row元素，则在该元素及其子元素之间插入一个匿名table-row对象。这个匿名对象将包含该子元素的所有本身非table-row对象的连续兄弟。
7. 如果一个table-row元素的子元素不是table-cell元素。则在该元素和其子元素之间插入一个匿名table-cell对象。这个匿名对象将包含该子元素的所有本身非table-cell对象的连续兄弟。

1.4 表层

如图：列表样式在行样式的下面，因此行背景会覆盖列背景。

1.5 表标题

caption-side 属性设置表格标题的位置。

属性值	描述
top	默认值。标题会出现在表格的上方。
bottom	标题会出现在表格的下方。
inherit	规定应该从父元素继承 caption-side 属性的值。

caption-side: top; 
caption-side: bottom; 

2. 表单元格边框

2.1 合并或分隔单元格边框

**border-collapse**属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

属性值	描述
separate	默认值。模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing来确定的。不会忽略 border-spacing 和 empty-cells 属性。
collapse	表格中相邻单元格共享边框。在这种模式下，CSS属性border-style 的值 inset 表现为槽，值 outset 表现为脊。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

2.2 边框间隔

border-spacing 属性指定相邻单元格边框之间的距离（只适用于边框分离模式）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

属性值	描述
length horizontal vertical	length描述单元格之间的水平和垂直距离的一个length值。它只在单值语法下使用。 horizontal描述相邻两列的单元格之间的水平距离的一个length值。它只在双值语法下使用。 vertical描述相邻两行的单元格之间的垂直距离的一个length值。它只在双值语法下使用。
inherit	从父元素继承 border-spacing 属性的值。

2.3 处理空单元格

empty-cells 属性定义了用户端 user agent 应该怎么来渲染表格 <table>中没有可见内容的单元格的边框和背景。

属性值	描述
show	边框和背景正常渲染。与普通元素一样。默认。
hide	边框和背景被隐藏。
inherit	从父元素继承 empty-cells 属性的值。

2.4 合并单元格边框

• “display”值为“table”或“inline-table”的元素在“border-collapse”为“collapse”时不能有任何内边距，但可以有外边距。因此，在collapse模型中，表的外围的边框与其最外层单元格的边框之间不会有任何间隔。
• 边框可以应用到单元格、行、行组、列和列组。与往常一样，表元素本身有一个边框。
• 在collapse模型中，单元边框之间绝对不会有任何间隔。实际上，如果边框相邻就会相互合并，使得实际上只画其中一个合并边框。
• 一旦合并，单元格之间的边框会在单元格间的假想表格线上居中。

2.4.1 合并单元格边框规则

• 如果某个合并边框的border-style为hidden，它会优先于所有其他合并边框。这个位置上的所有边框都隐藏。
• 如果某个合并边框的border-style为none，它的优先级最低。这个位置上不会画出该边框，除非所有其他合并边框的border-style值都是none。
• 如果至少有一个合并边框的border-style值不是none，而且所有合并边框的border-style值都不是hidden，则窄边框不敌更宽的边框。
• 如果多个合并边框有相同的宽度，则会考虑边框样式，并采用以下顺序(从最优先到最不优先)：double、solid、dashed、dotted、ridge、outset、groove、inset。
• 如果合并边框的样式和宽度都一样，但是颜色不同，则按下表烦序使用元素的颜色(从最优先到最不优先)：cell、row、row group、column、column group, table。
• 如果合并边框来自相同类型的元素，如两个有相同样式和宽度但不同颜色的行边框，则颜色取最上最左边框的颜色。

3. 表大小

关于确定表的宽度，有两种不同的方 法：固定宽度布局和自动宽度布局。不论使用何种宽度算法，高度都会自动计算。

3.1 宽度

属性值	描述
auto	默认。表格及单元格的宽度取决于其包含的内容。
fixed	表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

固定布局模型的工作步骤

1. width属性值不是auto的所有列元素会根据width值设置该列的宽度。
2. 如果一个列的宽度为auto，不过表首行中位于该列的单元格width不是auto，则根据该单元格宽度设置此列的宽度。如果这个单元格跨多列，则宽度在这些列上平均分配。
3. 在以上两步之后，如果列的宽度仍为auto，会自动确定其大小，使其宽度尽可能相等。
4. 此时，表的宽度设置为表的width值或列宽度之和(取其中较大者)。如果表宽度大于其列宽总和，将二者之差除以列数，再把得到的这个宽度增加到每一列上。

自动布局模型的工作步骤：

1. 对于一列中的各个单元格，计算最小和最大单元格宽度。
   a. 确定显示内容所需的最小宽度。要记住，内容可以流入多行，不过不能超出单元格框。如果单元格的width值大于最小可能宽度，则把最小单元格宽度设置为该width值。如果单元格的width值为auto，最小单元格宽度则设置为最小内容宽度。
   b. 对于最大宽度，要确定完全显示内容而且不包括换行符所需的宽度（除非明确要求，例如指出可以有<br>元素），这个值就是最
   大单元格宽度。
2. 对于各一列，计算最小和最大列宽。
   a. 列的最小宽度由该列中所有单元格的最小单元格宽度的最大值确定。如果为该列指定的width值大于列中所有最小单元格宽度，最小列宽则设置为这个width 值。
   b. 要计算最大宽度，取该列中所有单元格的最大单元格宽度的最大值。如果已经为列指定了一个width值，而且大于该列中的所有最大单元格宽度，最大列宽则设置为该width值。这两种行为改写了传统的HTML表行为，对于HTML 表，会强制列扩展为与其最宽的单元格同宽。
3. 如果一个单元格跨多列，最小列宽之和必须等于这个跨列单元格的最小单元格宽度。类似地，最大列宽之和必须等于跨列单元格的最大宽度。如果列宽之和与单元格宽度有差距，用户代理会把这个差距在所跨的列上平均分配。

另外用户代理必须考虑到一个问题：如果一个列的width值为百分数值，这个百分数要相对于表的宽度计算，即使它还不知道这个宽度是多少！，它必须把这个百分数保存起来，在算法的下一部分使用。

此时，用户代理已经确定了各列可能是多宽或多窄。有了这个信息，可以再真正得出表的宽度。这个过程如下:

1. 如果表的计算宽度值不是auto，将这个计算表宽度值与所有列宽再加上所有边框和单元格间隔之和相比较（设置为百分数宽度的列往往在此时计算具体宽度）。二者中较大的一个就是表的最终宽度。如果表的计算宽度值大于列宽、边框和单元格间隔之和，所有列的宽度都会增加一个相等的量，使得刚好将表完全填充。
2. 如果表的计算宽度值为auto，通过将列宽、边框和单元格间隔相加来确定表的最终宽度。这说明表的宽度只能恰好显示其容，而不能有多余，这类似于传统的HTML表。设置为百分数宽度的列会以这个百分数作为一个限制，不过用户代理有可能并不满足这个限制。

3.2 高度

如果表的高度是auto，其高度则是表中所有行的行高再加上所有边框和单元格间隔的总和。实际中应当尽可能避免设置高度。

3.3 对齐

3.3.1 行内元素的值

相对父元素的值

属性值	描述
baseline	使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如<textarea>，这意味着这些元素使用此值的表现因浏览器而异。
sub	使元素的基线与父元素的下标基线对齐。
super	使元素的基线与父元素的上标基线对齐。
text-top	使元素的顶部与父元素的字体顶部对齐。
text-bottom	使元素的底部与父元素的字体底部对齐。
middle	使元素的中部与父元素的基线加上父元素x-height的一半对齐。
<length>	使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
<percentage>	使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数。

相对行的值

属性值	描述
top	使元素及其后代元素的顶部与整行的顶部对齐。
bottom	使元素及其后代元素的底部与整行的底部对齐。
	没有基线的元素，使用外边距的下边缘替代。

3.3.2 表格单元格的值

可以是负数。

属性值	描述
baseline (以及 sub, super, text-top, text-bottom,<length>, <percentage>)	使单元格的基线，与该行中所有以基线对齐的其它单元格的基线对齐。
top	使单元格内边距的上边缘与该行顶部对齐。
middle	使单元格内边距盒模型在该行内居中对齐。
bottom	使单元格内边距的下边缘与该行底部对齐。