10.1 控制表格 / 憋错料

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

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

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

一、表格中的标记

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

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

折叠展开XML/HTML 代码复制内容到剪贴板

<table>
<tr>
<td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td>
</tr>
</table>

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

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

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

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

折叠展开XML/HTML 代码复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>奖牌榜</title>
<style type="text/css">
.ranking{
font: 14px 宋体;
border:2px orange solid;
text-align:center;
border-spacing:10px;
}
.ranking td{
border:1px orange dashed;
}
.ranking th{
border:1px orange solid;
}
</style>
</head>
<body>
<table class="ranking">
<tr>
<th>年份</th> <th>金牌</th> <th>银牌</th> <th>铜牌</th> <th>总计</th>
</tr>
<caption>中国健儿奥运奖牌榜</caption>
<tr>
<th>2004</th> <td>32</td> <td>17</td> <td>14</td> <td>63</td>
</tr>
<tr>
<th>2000</th> <td>28</td> <td>16</td> <td>15</td><td >59</td>
</tr>
<tr>
<th>1996</th> <td>16</td> <td>22</td> <td>12</td> <td>50</td>
</tr>
<tr>
<th>1992</th> <td>16</td> <td>22</td> <td>16</td> <td>54</td>
</tr>
<tr>
<th>1988</th> <td>5</td> <td>11</td> <td>12</td><td >28</td>
</tr>
<tr>
<th>1984</th> <td>15</td> <td>8</td> <td>9</td> <td>32</td>
</tr>
</table>
</body>
</html>

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

图1 基本的表格样式

分析：这个实例中，没有使用任何CSS样式，而是使用了HTML中规定的设置表格的一些属性，例如在上面的代码中有如下一行：

折叠展开XML/HTML 代码复制内容到剪贴板

<table border="2" cellpadding="10" cellspacing="10" bgcolor="#eeeeee">

这里border属性用于袭格边框．bgcolor用于设定背景色，cellpadding和cellspacing的作用请参照http://www.lodidance.com/html/jc/501.html。

在CSS被广泛使用之前，大都使用上述这些属性来设置表格的样式，但是控制能力非常弱，而使用CSS以后，就可以更精确灵活地控制表格的外观了。

二、表格的边框

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

折叠展开CSS 代码复制内容到剪贴板

<style type="text/css">
.ranking{
font: 14px 宋体;
border:2px orange solid;
text-align:center;
border-spacing:10px;
}
.ranking td{
border:1px orange dashed;
}
.ranking th{
border:1px orange solid;
}
</style>

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

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

经验：有比较丰富网页制作经验的人知道，在不使用CSS时，要制作“1像素分割线表格”，是很需要一些“技巧”的，仅仅通过将cellspacing和border设置为1．并不能真正得到单元格之间的分隔线为1像素，因为相邻单元格各有一条边框，即使都设置为1像素，且它们之问的距离为0，它们并在一起时也会宥2像素宽。为此，聪明的设计师想出了一个变通的办法。

把整个表格的背景色设置为希望的边框颜色，给每个单元格设置另一颜色作为单元格的背景色，然后把边框粗细设置为0，cellspacing设置为1，这样在cellspacing的地方露出来的背景色看起来就产生了1像素粗细的边框分隔线的效果。必须承认想出这个办法的设计师确实智商很高。

然而这毕竟是一个hack的办珐，并不是HTML规范本身的真正用意。而使用CSS，就可以名正言顺地制作出真正的“1像素分割线表格”了。

1.设置单元格的逸框

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

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

折叠展开CSS 代码复制内容到剪贴板

border-collapse: collapse;

其他不做任何改变，效果将变成如图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规范。

折叠展开XML/HTML 代码复制内容到剪贴板

<HTML>
<HEAD>
<STYLE>
TABLE{border-collapse: collapse;
border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
TD { border: 1px solid red;
padding: lem;
}
TD.solid-blue { border: 5px dashed blue; }
TD.solid-green { border: 5px solid green; }
</STYLE>
</HEAD>
<BODY>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
<TD> 1
<TD> 2
<TD> 3
<TR id="row2">
<TD> 4
<TD class="solid-blue" > 5
<TD class="solid-green"> 6
</TR>
<TR id="row3">
<TD> 7
<TD> 8
<TD> 9
</TR>
<TR id="row4">
<TD> 10
<TD> 11
<TD> 12
<TR id="row5">
<TD> 13
<TD> 14
<Td> 15
</TR>
</TABLE>
</BODY>
</HTML>

在图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”中增加一条样式设置：

折叠展开CSS 代码复制内容到剪贴板

border-spacing:10px;

在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>设置不同的样式，如果使用下面这个标记：

折叠展开XML/HTML 代码复制内容到剪贴板

tbody th{ ....... }

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

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

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

折叠展开XML/HTML 代码复制内容到剪贴板

<table>
<col></col><col></col><col class="special"></col>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
……以下省略……

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

注意：由于一个单元格既属于某一行，又属于某一列，因此很可能行列各自的CSS设置都会涉及该单元格，这时以谁的设置为准，就要根据 CSS的优先级来确定，如果有些规则非常复杂，制作的时侯就要实际试验一下。但是需要特别谨慎。

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

编辑：网页学习网

本文地址:http://www.lodidance.com/css/jc/733.html

10.1 控制表格

时间： 2024-10-02 05:24:03

10.1 控制表格

10.1 控制表格的相关文章

AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载

CSS控制表格嵌套

利用JavaScript控制表格的合并

PHP 10 : 流程控制

Cellpadding 和 Cellspacing 属性来控制表格边框间距

美丽的表格样式(使用CSS样式表控制表格样式)

漂亮的表格样式(使用CSS样式表控制表格样式)

提升操作效率！Windows 10 快捷键汇总表格

精准控制表格列表(table-layout:fixed)