CSS学习笔记：表格

表是一种很特别的布局，它本身就能确定其他元素的元素大小，例如，可以让一行中的所有单元格都有相同的高度，而不论每个单元格中可能包含多少内容。还可以让一列中的单元格都有相同的宽度。

表格式化

表的视觉编排

CSS对于表元素和内部表元素有很分明的界限。

• 内部表元素生成矩形框，这些框有内容、内边距和边框，但没有外边距。
  因此，不能通过指定外边距来定义单元格之间的间隔。
  如果试图对单元格、行或其他任何内部表元素应用外边距，浏览器会将其忽略。

表编排规则

表格单元是矩形，不过不必都是相同的大小。
给定表格列中的所有表格单元宽度相等，一个表格行中的所有表格单元高度相等。
不过，一个表格行的高度可能与另一个表格行的高度不同。类似的，表格列也可能有不同的宽度。

表显示值

display中与表相关的值如下：

• table：这个元素的作用就像< table>元素，它定义了一个块级table。
• inline-table：定义了一个行内级表
• table-row：这个元素的作用就像< tr> 一样.
• table-row-group：这个元素的作用就像< tbody> 一样。
• table-header-group：这个元素的作用就像< thead> 一样
• table-footer-group：这个元素的作用就像< tfoot> 一样.
• table-column：这个元素的作用就像< col> 一样，描述了一个单元格的列
• table-column-group：这个元素的作用就像< colgroup> 一样
• table-cell：这个元素的作用就像< td> 一样。
• table-caption：这个元素的作用的就像< caption> 一样。定义了一个表的总标题。

另外，CSS中列和列组只能接收4种样式：

• border：只有当border-collapse属性值为collapse时才能为列和列组设值边框。边框的合并算法见后。
• background
• width：设置了列或列组的最小宽度，列中单元格的内容可能要求列更宽。
• visibility：如果一个列或列组的visibility属性为collapse，则该列中所有单元格都不显示。另外，表的总宽度会减去已合并列的宽度。
  如果对列或列组将visibility声明为任何非collapse值，都会被忽略。

表标题

HTML < caption> 元素 展示一个表格的标题， 它常常作为 < table> 的第一个子元素出现，同时显示在表格内容的最前面.
利用属性caption-side，可以控制标题显示的位置。

caption-side属性，应用于display值为table-cation的元素。

• top：默认值，标题显示在表的上方
• bottom：标题显示在表的下方。

另外，为caption元素应用样式非常类似于块级元素，它们可以有内边距、边框、背景等。

表单元格边框

CSS中实际上有两种截然不同的边框模型。
border-collapse 就是用来决定表格的边框是分开的还是合并的，应用于display值为table或inline-table的元素。

• separate：在分隔模式下，相邻的单元格都拥有独立的边框。
• collapse：在合并模式下，相邻单元格共享边框。

分隔单元格边框

采用这种模型，每个单元格都与其他单元格分开一定距离，而且单元格的边框彼此不会合并。
边框之间的距离是通过border-spacing属性来确定的。

border-spacing元素也是应用于display值为table或inline-table的元素，只在边框分隔模式下有效。

/* border-spacing: length */
border-spacing: 2px;

/* border-spacing: horizontal vertical */
border-spacing: 1% 2em;

为这个属性指定一个值的话，这个值描述了单元格之间的水平和垂直距离的一个值。
如果指定两个值的话，则第一个值指定水平间隔，第二个值指定垂直间隔。

border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的边框间距（border-spacing）和相应的内边距之和。

table{
  baorder-collapse:seperate;
  border-spacing:3px 5px;
  padding:10px;
  border:2px solid black;
}
td{
  border:1px solid gray
}

可以看到，在表主体的外围，水平方向的距离是padding+水平方向的border-spacing=10+3 = 13px，类似的，垂直方向的距离是15px。

还要注意，如果要声明一个border-spacing值，这会应用于表本身，而不是单个的单元格。如果为td元素声明border-spacing会被忽略。

在分隔边框模型中，不能为行、行组、列和列组设置边框。设置了也会被忽略。

处理空单元格

empty-cells属性用来设置空单元格（没有内容）的显示方式。

• show：会画出空单元格的边框和背景，就好像这些表单元格有内容一样
• hide：不会画出空单元格的任何部分，就好像这个单元格被设置为visibility：hidden。

如果一个单元格包含内容，则不能认为是空的。这里的内容不仅包括文本、图像、表单元素等等，还包括实体，和除回车、换行、tab和空格符以外的其他空白符。
如果一行中所有单元格都为空，而且empty-cells值都是hide，则整行将处理为好像这个行元素设置为display：none。

合并单元格边框

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

• display值为table或inline-table的元素不能有任何内边距，不过他们可以有外边距。因此，表的外围边框与其最外单元格的边界之间不会有任何间隔。
• 边框可以应用到单元格、行、行组、列和列组。
• 单元格边框之间绝对不会有任何间隔。如果边框相邻，就会互相合并。
• 一旦合并，单元格之间的边框会在单元格间的假想表格线上居中。

边框合并

• 如果某个合并边框的border-style为hidden，它会优先于其他所有合并边框，这个位置上的所有边框都会隐藏。
• 如果某个合并边框的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。
  因此，如果一个单元格和一个列的边框合并，会采用单元格的边框颜色。

表大小

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

宽度

table-layout 定义了表格布局算法：

• auto：自动布局，默认值
• fixed：固定布局

尽管这两个模型针对一个特定表布局可能有不同的结果，但最显著的差异就是速度。使用固定宽度表布局时，相对于自动宽度模型，用户代理可以更快速地计算出表的布局。

固定布局

固定布局模型的速度之所以快，主要原因是布局不依赖于表单元格的内容。其布局是根据该表以及表中列和单元格的width决定的。
固定布局模型的工作包括以下简单步骤：

• width属性值不是auto的所有列元素会根据width值设置该列的宽度。
• 如果一个列的宽度是auto，但是这一列首行的单元格width不是auto，那么就根据该单元格的宽度设置此列的宽度
• 在以上两步中，如果列的宽度仍为auto，会自动确定其大小，使其宽度尽可能相等。

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

这种方法的速度很快，因为所有列宽度都由表的第一行定义。某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。这意味着为单元格指定的width值都会被忽略。如果一个单元格的内容无法放下，则该单元格的overflow值将决定单元格内容是剪裁还是生成一个滚动条。

自动布局

大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
为什么自动布局比较慢，因为在用户代理查看完表的所有内容之前都无法确定表的内容。比如说最后一行一个单元格中有一个400像素宽的图像，就会要求它上面所有单元格（同列中的单元格）都是400像素宽。
因此，必须计算每个单元格的宽度。

高度

最容易的一种情况是，直接由height显式设置高度。
如果height是auto，则其高度是由表中所有行的行高再加上所有边框和单元格间隔的总和。

对齐

水平对齐是最简单的，要让一个单元格中的内容对齐，可以使用text-align属性。实际上，单元格会处理为一个块级框，其中所有内容都根据text-align值对齐。

要将一个表单元格中的内容垂直对齐，可以使用vertical-align属性。只不过它应用到表单元格的时候对齐的位置有些变化：

• top：单元格内容的顶端与其行顶端对齐
• bottom：单元格内容的底端与其行底端对齐
• middle：单元格内容的中间与其行中间对齐