Web编程入门经典 第8章 更多层叠样式表

? class属性值为code的

注意：

不同的浏览器对利用CSS赋予表样式的支持并不完整。例如，虽然可以为标题设置border特性，但无法为其设置height特性，所以应当在尽可能多的浏览器中试验示例。

应该注意两列之间的间隔（间隔在表头与单元格之间非常明显）。默认情况下，在表中每一个单元格之间都会创建一个边框，以便在每个单元格之间创建少量空间，从而防止无法指定规则来创建这种必要的间隔。但是，可以使用border-spacing特性来删除间隔，下一节将介绍该特性。

8.4.1 表的特性

很多特性仅与表相关，表8-10中列举了这些特性。其中，border-style特性可以附带一些特殊的值。当学习边框方面的知识时，了解如何通过使用border-collapse特性控制的两种模型之一来显示边框会非常有帮助。

表8-10

特 性

border-collapse

持自己的样式

目 的

该特性指示浏览器是应当控制相互接触的相邻边框的外观，还是让每个单元格维

border-spacing caption-side empty-cells table-layout

指定表的单元格之间应该具有的宽度 指定标题应当显示在表的哪一边 指定单元格为空时是是否应当显示边框

该特性允许浏览器加速表的布局，方式是浏览器使用遇到的第一个宽度特性作为列的剩余部分的宽度（而不是必须加载整个表后才显示它）

8.4.2 border-collapse特性

border-collapse特性指定浏览器是应当显示每一个边框——即使两个相邻单元格具有不同的边框特性——还是应当基于一组内置的复杂规则来自动决定显示哪一个边框。表8-11给出了border-collapse特性的两个可选值。 表8-11

值

collapse separate

目 的

水平边框将折叠，垂直边框则互相邻接（关于CSS规范中不同边框规则的冲突解决方法存在一些复杂的规则，但是应当试验它们以了解其工作原理） 遵守独立的规则，并且可使用一些不同的特性来进一步控制外观

下面的示例中存在两个表，第一个表的border-collapse特性的值为collapse，第二个表的border-collapse特性的值为separate，并且这两个表都包含分别具有虚线和实线边框的相邻单元格：

table.one {border-collapse:collapse;} table.two {border-collapse:separate;} td.a {border-style:dotted; padding:10px;}

td.b {border-style:solid; padding:10px;}

border-width:3px; border-width:3px;

border-color:#000000; border-color:#333333;

图8-14给出了该示例的显示效果，对于collapse值，浏览器显示的边框互相拆叠，从而实线边框的优先级高于虚线边框。当然，如果边框都是实线，显示的效果就不会很奇怪，但是该示例很好地演示了collapse值所带来的效果（事实上，您很可能不希望让内部线比外部线粗——因此这可能正是您所需的效果）。