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

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>