文章目录

1. 1. 表布局
   1. 1.1. 表的格式化
      1. 1.1.1. 表的编排规则
      2. 1.1.2. 表显示值
      3. 1.1.3. CSS 中的列和列组
      4. 1.1.4. 匿名表对象
      5. 1.1.5. 表层
      6. 1.1.6. 表标题
   2. 1.2. 表单元格边框
      1. 1.2.1. 分隔单元格边框 separate
      2. 1.2.2. 合并单元格边框 collapse
   3. 1.3. 确定表及其内部元素的高度和宽度
      1. 1.3.1. 表的宽度计算
      2. 1.3.2. 表的高度计算
      3. 1.3.3. 对齐
   4. 1.4. 小结
   5. 1.5. 明白了…

鉴于之前开发时，老能碰到一些“出乎意料”的事情，即：按照自我意愿，给 table 的某些元素设置的某些属性，但最后却发现-样式不生效！！！
1、给 col 设置 font-size、color 等，不生效！…平时给它设置最多的是 width，宽度正常…
2、给 tr 设置 padding，不生效！ …但偏偏ie7生效了…（在尝试后发现，给 td 设置 padding 是可以的）
3、ie7 下，tr 的 border 不生效！…而其他主流浏览器（ie8+，chrome，ff）border 正常…
4、有时，对到底该不该用 table 内心很纠结！…怕用了后显得自己很low，但不用有时自己又得很繁琐地去折腾 div 和 span…
5、早就听说什么 table 布局很慢，所以有时会主动排斥它！…但对深信“存在即合理”的我来说，就这么不用了又觉得缺点啥…

以上是自己目前对 table 的疑惑。但都从事fe开发一年半了，总觉得再不把看起来很简单的 table 搞清楚了，都不好意思给别人说自己是搞前端开发的。于是在今年大目标的驱使下，table 布局是我今年攻克的第二个基础点（第一个是 location ）。嗯，后续会有很多类似这种规模的小问题被整理涌现出来，目的就是要填补自己的fe知识盲点。

先直观地认识下 Table，以下是与 table 相关的表元素们：

<table>
	<colgroup>
		<col class="col1"></col>
		<col class="col2"></col>
	</colgroup>
	<thead>
		<tr>
			<th>TH1</th>
			<th>TH2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11</td>
			<td>12</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>This is the foot</td>
			<td></td>
		</tr>
	</tfoot>
	<caption>This is the table Title</caption>
</table>

表布局

介绍 CSS 中表本身如何布局。包括三点：

1. 表在视觉上如何组装（表的格式化）
2. 绘制单元格边框的两种方式（单元格的边框显示）
3. 确定表及其内部元素的高度和宽度的机制（计算表的宽度+高度计算、内容对齐）

表的格式化

表格式化（table formating）即表中的元素相互之间的关系。了解表的格式化，有助于理解如何最佳地设置表样式。
CSS 对于表元素和内部表元素有很分明的界限：
1、表元素：（约等于块元素）
2、内部表元素：会生成矩形框，它们只有 content padding border，但是没有 margin。除了总标题外。

表的编排规则

表的编排规则：表格行、表格列、表格单元（矩形框 td th）

1. 每个行框包含一行单元表格。表中所有行框按照它在文档中出现的顺序从上到下填充表（表的标题行框 和 脚注行框例外，分别出现在表最前面和最后面）。所以，有多少个行元素，就有多少表格行
2. 行组包含多少个行框，该行组框就包含多少个表格单元
3. 列框包含一列｜多列表格单元。按顺序依次相邻放置。从左－右读、右－左读的语言。
4. 列组包含多少个列框，该列组框就包含多个表格单元
5. 单元格的跨多行｜跨多列，CSS并未对此做出定义，而是有文档语言来定义这种跨行｜跨列的。
6. 单元格框不能超出表｜行组的最后一个行框。

表显示值

CSS 表模型是面向行的（row primacy），以行为主。

CSS 中的列和列组

CSS 中 col 和 col-group 只能接受 4 种样式：且有一些只能应用与列上下文的特殊规则时

1. width：定义了列和列组的最小宽度。列｜列组中单元格的内容可能要求更宽。
2. background：只有当 td｜th｜tr 有透明背景的时候，col 和 col-group 的背景色才可见。
3. border：只有当 border-collapse: collapse 时才能设置 col col-group 的边框
4. visibility：如果列｜列组的 visibility=collapse 则该列｜列组中所有单元格都不显示。
   此时，跨列的会被裁剪；表的总宽度会减去已被合并的宽度。［木有生效？］

匿名表对象

如果标记语言中没有包含足够的元素，以至于无法按照 CSS 的定义充分显示表。
CSS 定义了一组机制，将“遗漏”的组建作为匿名对象插入。
其中 CSS 表模型中可能出现 7 种不同的匿名对象插入。

表层

为了完成表的显示，CSS 定义了6个不同的“层”，对应表的各个方面的样式都在其各自的层上进行绘制（这更多的只是个逻辑过程）。且层级越高，样式的优先级也最高。
6、td th 单元格
5、tr 行
4、thead tbody tfoot 行组
3、col 列
2、col-group 列组
1、table 表

表标题

caption-side: top | bottom 标题显示在表的上方还是下方

表单元格边框

CSS 中，有两种截然不同的边框模型：
1、分隔边框模型：单元格相互之间是分隔的
2、合并边框模型：单元格之间没有可见的间隔，单元格的边框会相互合并
border-collapse: collapse | separate | inherit
应用对象：table inline-table

分隔单元格边框 separate

1. border-collapse: separate; //声明是分隔单元格边框模型
2. border-spacing: 2px 10px; //设置单元格边框之间的间隔 ［有生效前提］
3. empty-cells: show | hide | inherit ［对象 table-cell，有前提］［ie没支持，算了，忽略先］

说明：
分隔边框模型中，不能给 tr tbody col colgroup 设置 border（td 可以）。

合并单元格边框 collapse

当 border-collapse: collapse 时，会有以下规则：
1、table | inline-table 不能有 padding、可以有 margin
2、border 可用于 td tr tbody col col-group，table本身也会有border
3、table-cell 的边框之间肯定没有间隔，而且会合并成一个
4、一旦合并，table-cell 之间的边框会在单元格间的假象线的中间位置。［是假想的线］
说明：
表的边框看起来是等宽的。所有的。
或许，表的外边框已经超出了表的宽度 － 有一半落在了之外，不过模型就是这么定义的。
边框的合并：是有优先级的，谁低谁高-谁会盖谁

确定表及其内部元素的高度和宽度

如何确定表及其内部元素的大小
1、表的宽度：固定宽度布局、自动宽度布局 ［最显著的差异：速度。前者更快］
2、表的高度：自定计算

表的宽度计算

table-layout: auto | fixed | inherit
对象：table inline-table

1. 表的宽度：固定布局
   固定布局模型的速度之所以快，主要因为：布局不依赖于表单元格的内容。所有列的宽度都由表的第一行定义。
   说明：
   （1）首行后所有的单元格不会改变列宽，这意味为这些 table-cell 指定的 width 值都会被忽略。如果一个 table-cell 放不下内容，裁剪 or 生成滚动条取决于 overflow。
   （2）其布局是依据：表＋列＋单元格 width 值决定的
   （3）使用固定宽度布局模型时，没必要非得为表指定一个显示宽度（当然，指定了 width 确实会由帮助）

2. 表的宽度计算：自动布局
   这正是 HTML 表使用多年的模型
   自动布局比较慢，是因为：在用户代理查看完表的所有内容之前，无法确定表的布局。每得到一个新单元格时，有可能触发新的一轮的宽度计算。只有完成最后一步，用户代理才算真正建立了表的布局。

表的高度计算

确定表的宽度，花的功夫大了点。但是，高度的计算，相当简单。
不过浏览器的开发人员可不这么认为。［哈哈，因为高度的计算交给用户代理去做了～］
在 2006 年发布的 CSS2.1 草案中，将表的 height 看作是表框的最小高度。［而不是说只要指定了 height 就貌似不用计算了］

对齐

1、水平对齐 text-align:
2、垂直对齐 vertical-align: top | bottom | middle | baseline
说明：
（1）相对于单元格和行的高度，定义单元格中内容的对齐要容易得多～
（2）与垂直对齐行内内容是一样的，但应用到 table-cell 时值稍有变化。会忽略 text-top text-bottom sub super

小结

1. 虽然表布局使用起来很简单，但这种布局的机制相当复杂［或许也正是不应该滥用table布局的原因］
2. 由于 HTML 表构造的历史渊源，CSS 表模型也是以行为中心的。
3. 不过，它确实能提供列布局，还能应用有限的列样式。［？？此处不知。。］
4. CSS提供了一些新特性来控制单元格对齐和表宽度，现在已有更多的工具已更漂亮的方式表示表。［新特性，比如奇偶行的样式控制］
5. 可以向任意元素应用和表相关的display值（传说当年除了ie，它还不支持）

明白了…

1. tr、td 不能设置 margin：是因为对于内部表元素，就没有 margin。见 1.表的格式化
2. col 不能设置其他 CSS：是因为 col 和 col-group 只能接受4种样式，而且还有特殊前提。见 1.3 CSS中的列和列组
3. 有时样式的设置和生效莫名其妙：是因为table内部自己的元素也是有优先级的。见 1.5 表层
4. 分隔单元格边框时：不能给 tr tbody col colgroup 设置 border。见 2.1 分隔单元格边框
5. table 不能设置 padding：是因为公用样式里 table 被设置了 border-collapse: collapse。见 2.2 合并单元格边框
6. table 之所以很方便，有一点就是：tr一行保证不折行、边框灵活-collapse时；一行内容等高、一列内容等宽。
7. table 的宽度、高度的计算
8. table 的对齐

回想场景：
1、separate 可以应用于剧集的，1-2-3-4-5 等［对齐和留白、内容自适应还］
2、collapse 中国好声音的那个页签［当内容过长时起码不会折行、边框］