《CSS权威指南》读书笔记7

第十一章 表布局

---

一.表格式化

1.表的视觉编排

CSS中，内部表元素生成矩形框，这些框有内容，内边距和边框，但是没有外边距。因此，不能通过指定外边距来定义单元格之间的间隔。

---

1)表编排规则

表格单元是矩形，不过不必都是相同的大小。

---

2)表显示值

---

①以行为主

②列
虽然单元格在文档源中是行元素的后代，但它们可能同时属于两个上下文（行和列）。不过，CSS中行和列组只能接受4种样式：border，background，width，visibility

---

3)匿名表对象

对象插入规则：363页左右

---

4)表层

*列样式在行样式的下面，所以行背景会覆盖列背景。而且，默认所有元素背景是透明的。

---

5)表标题

举例：

cpation继承了table的color值white，但caption有自己的背景。caption的宽度基于table的内容宽度。一般的，caption类似块级元素，如果要改变caption中文本的水平对齐，可以使用属性text-align。

---

二.表单元格边框

---

1.分隔单元格边框

1)边框间隔

---

2)处理空单元格

单元格的内容包括文本，图像，表单元素等，还包括不可分空间实体（&nbsp；）和除了CR（回车）、LF（换行）、tab和空格符以外的所有其他空白符。如果一行中的所有单元格都为空，而且empty-cells值都是hide，则整行将处理为好像这个行元素设为display：none

---

2.合并单元格边框

---

1)合并边框布局

---

---

2)边框合并

---

三.表大小

1.宽度

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

---

1)固定布局

此法快速，因为布局不依赖与表单元格的内容，其布局是根据该表以及表中列和单元格的width值决定的。

步骤如图：

---

举例：

说明：第一列宽度200px，第二列75px，则三四两列宽度均为61px（(400-200-75-1*3)/2）

---

2)自动布局

大多数用户代理中，只要表的width设置为auto就会触发使用这个模型，不论table-layout是什么。

具体步骤：


如果一个列的width为百分数值，这个百分数值要根据表的宽度来算，即使它并不知道表的宽度，所以百分数值必须要保存起来。
再真正得出表的宽度：

---

2.高度

最容易的方法，直接由height属性显式设置高度。如果height设置为auto，其高度是表中所有行的行高再加上所有边框和单元格间隔的总和。
不过仍有未解决问题，只能尽量避免设置高度。

---

3.对齐

1)水平对齐

text-align

---

2)垂直对齐

vertical-align