第十一章 表布局

第十一章 表布局

<table> 定义一个表
<th> 表头
<tr> 表行
<td> 单元格（具体数据）

<tbody>内容主体
<thead> 表头
<tfoot> 表尾
<caption> 总标题

1.表格式化

表的视觉编排：
内部表元素生成矩形框，可以有内边距和和边框，但不能有外边距，如果设置，会被忽略。
编排规则：
1.没一个行框包含一行单元格。因此，有多少个行元素<tr>，表正就会有多少个表格行。
2.列框包含一列或多列表格单元。
3.尽管单元格可以横跨多行或多列，不过CSS对此并没有作出明确定义，而是由文档语言定义。每个跨行或跨列的单元格都是个矩形框。
4.单元格框不能超出表或行组的最后一个行框。如果可能造成这种情况，单元格会自动缩小，使之包含在表或行组中。
5.每个单元格都是矩形，但没有必要都是相同大小。每列单元格等宽，每行单元格等高；不同列单元格不一定等宽，不同行单元格不一定等高。

表显示值：
在HTML中，tr td 等元素已经处理成表元素，而在XML中，用户代理没办法识别是否是表元素，所以需要使用display属性指定。
display
值：none inline block inline-block run-in
   list-item table inline-table table-row-grounp table-header-group
   table-footer-group table-row table-column-group table-column
   table-cell table-caption inherit

初始值：inline
应用于：所有元素
继承性：无
说明：
table：指定元素为块级元素，生成块级框，相当于HTML中的<table>
inline-table：行内表。最接近的非表值为inline-block，最接近的表元素是table
table-row：一个元素或一行单元格，相当于tr。
table-row-group：一个元素，或一行或多行单元格，相当于tbody
table-header-group：与table-row-group相似，只是视觉格式化方面有所不同，总是出现在所有行或行组之前。相当于thead。
table-footer-group：与table-header-group相似，总是出现在所有行或行组之后。相当于tfoot。
table-column：描述了一个单元格的列。按CSS的术语来讲，有这个display值的元素并不显示，就像display为none一样。之所以存在这个值，
主要是为了帮助定义列中单元格的表示。相当于<col>。？？
table-column-group：声明一个元素或一个或多个列组。类似于table-column，也不显示，只是有助于列组中的单元格表示。相当于<colgroup>。
table-cell：单元格，<td> <th>都是table-cell元素类型。
table-caption：表的总标题，相当于<caption>。在一个表或行内表中不要声明多个display为table-caption的元素。


以行为主：
CSS将表定义为“以行为主”的模型，假设创作者会在创建表时显式声明行，而列只是从单元格行的布局推导出来的概念。

列：
尽管CSS表模型面向行，列在表布局中仍有相当重要的地位。虽然单元格在文档源中是行的后代，但它可以有两个上下文：行和列。
不过CSS表中的列和列组只能接受4种样式：border background width visibility。
border：只有当border-collapse为collapse时才能为列和列组设置边框。这种情况下，列和列组的边框会参与单元格边框的合并算法。
background：只有单元格和其行的背景透明或没有时，列和列组的背景才可见。
width：定义了列和列组的最下宽度。其中单元格的宽度可能要更宽。
visibility：只有列或列组的visibility设置为collapse时，该列或列组的单元格才不显示。设置为其他任何值都会被忽略。

匿名对象：
<table>
  <td>name:</td>
  <td><input type="text" /></td>
</table>
如果未包含足够的元素，以至于CSS无法充分表示完整的表，CSS会将“遗漏”的组建作为匿名对象插入。规则如下：
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， 同上。
4.如果一个table-row-group table-column-group table-header-group table-footer-group的父元素不是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-footer-group table-header-group元素的子元素不是table-row元素。则会在该元素和其子元素间
插入一个匿名的table-row元素对象。包含该元素的所有本身非table-row元素的连续兄弟元素。
7.如果一个table-row元素的的子元素不是table-cell元素。则在该元素和其子元素间插入一个匿名的table-cell元素对象。
这个匿名元素会包含所有自身非table-cell元素的连续兄弟元素，即使是匿名文本也会包含其中，作为一个table-cell。

表层：
单元格 > 行 > 行组 > 列 > 列组 > 表
列样式在行样式下面，所以行样式背景会覆盖列背景。
默认地，所有元素背景都是透明的。因此，table元素的背景只是“透过”内部元素的背景可见。

表标题 caption-side：
<table>
  <caption>....</caption>
  ...
</table>
值：top bottom
初始值：top
应用于：display为table-caption的元素
继承性：有
说明：
1.在html中，无论<caption>标签出现在表内部何位置，始终会在表的抬头显示。
2.CSS2中还有left和right值可以使用，不过由于缺乏广泛支持，已经在CSS2.1中废除。
3.caption元素继承table的color和background
4.caption元素的外边距会和table元素的外边距合并。
5.table元素是caption元素的包含块，caption元素的宽度基于table元素的宽度。
6.caption元素应用样式时非常类似于块级元素，可以有margin padding boder background 和 text-align属性设置。


2.表单元格和边框

边框的合并和分离 border-collapse
值：collapse seperate inherit
初始值：seperate
应用于：display为table或inline-table的元素
继承性：有
说明：
在CSS2中默认为collapse

seperate：
单元格边框相互挨着，但保持区别，可以通过border-spacing设置之间的距离
值：<length><lenght>? inherit
初始值：0
应用于：display为table或inline-table的元素
继承性：有
计算值：2个绝对长度
说明：
1.除非boder-collapse为seperate，否则会忽略该属性
2.如果只给定一个值，水平和垂直方向都使用这个值；如果是2个值，分别应用于水平和垂直方向。
3.行，列与整个表间可以有padding。

处理空单元格（没有内容的单元格） empty-cells
值：show hide inherit
初始值：show
应用于：display为table-cell的元素
继承性：有
说明：
1.除非border-collapse为seperate，否则忽略此设置。
2.show：绘制出空白单元格的边框和背景，就像有内容一样。
3.hide：不绘制出单元格的任何样式，与visibility为hidden的效果一样。
注意：empty-cells这一属性还为得到IE的充分支持。

合并单元格边框：collapse
与分离单元格边框模型相比，合并单元格边框模型略复杂
1.display为table或inline-table的元素不能有任何padding，不过可以有margin。
因此，表的外围边框和外围单元格之间不会有任何距离。
2.边框可以应用到单元格，行，行组，列和列组。表本身都有一个边框。
3.单元格之间不能有任何间隔。如果相邻，就会合并，类似于外边距的合并，“较大”的胜出。
而对于单元格边框的合并，是“最有意思”的胜出。
4.一旦单元格边框合并，获胜的那个边框就会在表格间假象的表格线上居中。

合并时获胜的规则：
1.如果某个单元格的border-style为hidden，则这个边框胜出，即这个位置上所有边框都胜出。
2.如果某个单元格的border-style为none，则它的优先级最低，即这个位置上显示相邻单元格的边框。
3.如果一个不是none， 且都不是hidden，宽度较大的胜出。
如果宽度一样，则考虑样式，doubel > solid > dahsed > dotted > ridge > outset > groove > inset。
4.如果样式和宽度都相同，只是颜色不同，则按下列顺序取色：cell > row > row group > column > column group > table。

3.表大小
分为2类：固定宽度布局和自动宽度布局

宽度：
由于有2种不同的方法可以得到表的宽度，所以必须先声明应用和种。
table-layout
值：auto fixed inherit
初始值：auto
应用于：display为table或inline-table的元素
继承性：有
说明：
相对于自动宽度布局，固定宽度布局可以让用户代理更快地计算出表的布局，效率更高。

固定布局：
之所以快，是因为布局不依赖单元格内容，而是列和单元格width，步骤：
1.width属性值不为auto的所有元素会根据width值设置该列宽度。
2.如果一列宽度为auto（不过，该列首行单元格的width不为auto）则根据该列宽度设置此列宽度。
如果此单元格很跨多列，则这些列均分宽度。
3.如果以上2个步骤之后，列的宽度仍然为auto，则自动确定其宽度，尽可能使各列宽度相等。

此时，表的宽度将设置为width或各列宽度之和（取较大者）。如果表的设置宽度大于各列宽度之和，
则将二者之差均分到各列上。

第一行各单元格宽度确定后，后面行中各单元格的宽度也就随之确定。如果它们的内容不能完全显示，则可通过设置overflow实现不同效果。


对齐：
水平：text-align left center right
垂直：vertical-align top middle bottom baseline