10.1 控制表格

表格是网页上最常见的元素。在传统的网页设计中表格除了显示数据外，还常常被用采作为整个页面布局的手段。在Web标准逐渐深入设计领域以后，表格逐渐不再承担布局的任务，但是表格仍然都在网页设计中发挥着重要的作用。

本章继续挖掘 CSS的强大功能，让普普通通的表格也表现出精彩的一面。

表格作为传统的HTML元素，一直受到网页设计者们的青睬。使用表格米表示数据、制作词查表等应用在网络中屡见不鲜。同时因为表格框架的简单、明了，使用没有边框的表格来排版，也受到很多设计者的喜爱。本节主要介绍CSS控制表格的方法，包括表格的颜色、标题、边框和背景等。

一、表格中的标记

在最初HTML设计时，表格（<table>标记）仅仅是用于存放各种数据的，例如收支表、成绩单等都适于用表格来组织数据形式。因此表格有很多与数据相关的标记，十分方便。 lodidance.com

最常用的3个与表格相关的标记是<table>、<tr>和<td>。例如，一个最简单的表格如下，这是一个3行3列的简单表格。

其中，<table>用于定义整个表格，<tr>定义一行，<td>定义一个单元格。此外，还有两个标记也是比较常用的，尤其使用CSS可以灵活设置表格样式以后，这两个标记就更常用到。

(1) <caption>标记，它的作用跟它的名称一样，就是用于定义表格的大标题，该标记可以出现在<table>与</table>之间的任意位置，不过通常习惯放在表格的第1行，即紧接着<table>标记。设计者同样可以使用一个普通的行来显示表格的标题，但<caption>标记无论是对于好的编码习惯，还是搜索引擎而言，都更有优势。

 (2) <th>标记，它是“table header”的缩写，即表头的意思。在表格中主要用于行或者列的名称，行和列都可以使用各自的名称。实际上<th>和<td>是很相似的，主要是可以分别对它们进行设置样式。

下面是一个用到上面5个标记的表格实例，代码如下。实例文件位于网页学习网CSS教程资源中的“第10章\01\medal-begin.htm”。

这个页面的显示效果如图1所示。

图1 基本的表格样式

二、表格的边框

本案例中，仍然使用上面奖牌榜的数据，通过CSS来对表格样式进行设置。首先在原来的代码中删除使用的HTML属性，然后为table设置一个类别“ranking”，并进行如下设置。实例文件位于本书光盘的“第10章\01\medal.htm”。

此时效果如图1所示。晟外面的粗线框是整个表格边框，里面每个单元格都有自己的边框，tb和td可以分别设置各自的边框样式，例如这里th为l像素的实线．1d为I像素的虚线。

可以看到此时每个单元格之间都有一个的空隙，那么有没有办法消除这个缝隙，并设置1像素宽的分割线呢？

1.设置单元格的逸框

CSS提供了两种完全不同的方法来设置单元格的边框。一种用于在独立的单元格中设置分离的边框，另一种适合设置从表格一端到另一端的连续边框，在默认情况下，使用上面讲到的“分离边框”，也就是在上面的表格中看到的效果，相邻的单元格有各自的边框。

而如果在上面的例子中，在“.ranking”的设置中增加一个属性设置：

其他不做任何改变，效果将变成如图2所示的样子，可以看到相邻单元格之间原来的两条边框重合为一条边框了。

图2 表格框线的重合模式

2.相邻边框的合并

在图2中，我们又会发现一个问题，每个单元格都可以设置各自的边框颜色、样式和宽度等属性，那么相邻边框在合并时将以谁为准呢？例如在上面的例子中可以看到th的实线和td的虚线合并的时候，浏览器选择了th的实线。那么这里的规则是什么样的呢？

在CSS 2的规范中的定义如下。

(1) 如果边框的"border-sLyle”设置为“hidden”，那么它的优先级高于任何其他相冲突的边框。任何边框只要有该设置，其他的边框的设置就都将无效。

(2 )如果边框的属性中有“none”，那么它的优先级是最低的。只有在该边重合的所有元素的边框属性都是“none”时，该边框才会被省略。

(3) 如果重合的边框中没有被设置为“hidden”的，并且至少有一个不是“none”，那么重合的边框中粗的优先于细的。如果几个边框的“border-width”相同，那么样式的优先次序由高到低依次为“double”、“solid”、“dashed”、“dotted”、“ridge”、“outset”、“groove”、“inset”。

(4) 如果边框样式的其他设置均相同，只是颜色上有区别，那么单元格的样式最优先，然后依次是行、行组、列、列组的样式，最后是表格的样式。

不过IE浏览器还没有完全执行上面这个规范的规定。在CSS 2的规范中，给出了一个明确的演示。下面的代码来自于CSS 2规范。

在图3中，中间图为在Firefox中的实际显示效果，右图为在IE 6（IE 7/8与IE 6相同）中的显示效果。可以看到，Firefox的显示效果严格符合CSS 2规范，而IE浏览器则没有完全遵守CSS 2规范。

图3 重合模式下表格框线的优先级别

3.边框的分离

讲完边框的合并之后，再来补充说明一个边框分离的问题。前面讲到过，在使用HTML属性格式化表格时可以通过使用cellpadding来设置单元格内容和边框之间的距离，以及使用cellspacing设置相邻单元格边框之间的距离。

要用CSS实现cellpadding的作用，只要对td使用padding就可以了；而要用CSS实现cellspacing的作用时，对单元格使用margin是无效的，需要对table使用另一个专门的属性”border-spacing”来代替它。例如，在上面的代码的奖牌榜页面中，在“.ranking”中增加一条样式设置：

在Firefox中的效果可以正常显示。

遗憾的是，IE 6和IE 7/8都不支持这个属性，因此如果希望精确地控制相邻边框之间的距离，又能够适用于各种浏览器．目前还只能使用HTML的cellspacing属性来实现，它是目前关于表格的所有HTML属性中惟一还需要用到的属性。 lodidance.com

三、表格宽度的确定

CSS提供了两种确定表格以及内部单元格宽度的方式。一种与表格内部的内容相关，称为“自动方式”；一种与内容无关，称为“固定方式”。

使用了自动方式时，实际宽度可能并不是“width”属性的设置值，因为它会根据单元格中的内容多少进行调整。而在固定方式下。表格的水平布局不依赖于单元格的内容，而明确地由“width”属性指定。如果取值为“auto”就意味着使用“自动方式”进行表格的布局。

在两种模式下，各自如何计算布局宽度是一个比较复杂的逻辑过程。对于一般用户来说，不需要精确地掌握它，但是知道有这两种方式是很有用的。

在无论各列中的内容有多少，都要严格保证按照指定的宽度显示时，可以使用“固定方式”。例如在后面的“日历”排版中，就用到了固定方式。反之，对各列宽度没有严格要求时，用“自动方式”可以更有效地利用页面空间。

如果要使用固定方式，就需要对表格设置它的“table-layout”属性。将它设置为“fixed”即为固定方式；设置为“auto”时则为自动方式。浏览器默认使用自动方式。

四、其他与表格相关的标记

除了前面介绍的标记之外，HTML中还有3个标记<thead>、<tbody>和<tfoot>，它们用来定义表格的不同部分，如图4所示。

图4 表格的HTML结构示意
 

要使用CSS来格式化表格时，通过这3个标记可以更方便地选择要设置样式的单元格。例如，对在<thead>，<tbody>和<tfoot>中的<th>设置不同的样式，如果使用下面这个标记：

将只对<tbody>中的内容产生作用，这样就不用再额外声明类别了。

在HTML中，单元格是存在于“行”中的，因此如果要对整列设置样式，就不像设置行那么方便，这时可以使用<col>标记。

例如，一个3行3列的表格，如果要将第3列的背景色设置为灰色，可以使用如下代码：

每一对“<col></col>”标记对应于表格中的一列．对需要单独设置的列设置一个类别，然后设置该类别的CSS即可。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表