首页 > 代码库 > 10.1 控制表格

10.1 控制表格

2024-07-08 21:17:50   228人阅读

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

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

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

一、表格中的标记

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

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

折叠XML/HTML 代码复制内容到剪贴板
  1. <table>  
  2.   <tr>  
  3.     <td> </td>  <td> </td>  <td> </td>  
  4.   </tr>  
  5.   <tr>  
  6.     <td> </td>  <td> </td>  <td> </td>  
  7.   </tr>  
  8.   <tr>  
  9.     <td> </td>  <td> </td>  <td> </td>  
  10.   </tr>  
  11. </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 代码复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>奖牌榜</title>  
  7.   
  8. <style type="text/css">  
  9. .ranking{   
  10.     font: 14px 宋体;   
  11.     border:2px orange solid;   
  12.     text-align:center;   
  13.     border-spacing:10px;   
  14. }   
  15.   
  16. .ranking td{   
  17.     border:1px orange dashed;   
  18. }   
  19.   
  20. .ranking th{   
  21.     border:1px orange solid;   
  22. }   
  23.   
  24. </style>  
  25.   
  26. </head>  
  27.   
  28. <body>  
  29.   
  30. <table class="ranking">  
  31.     <tr>  
  32.         <th>年份</th> <th>金牌</th> <th>银牌</th> <th>铜牌</th> <th>总计</th>  
  33.     </tr>  
  34.     <caption>中国健儿奥运奖牌榜</caption>  
  35.     <tr>  
  36.         <th>2004</th> <td>32</td> <td>17</td> <td>14</td> <td>63</td>  
  37.     </tr>  
  38.     <tr>  
  39.         <th>2000</th> <td>28</td> <td>16</td> <td>15</td><td >59</td>  
  40.     </tr>  
  41.     <tr>  
  42.         <th>1996</th> <td>16</td> <td>22</td> <td>12</td> <td>50</td>  
  43.     </tr>  
  44.     <tr>  
  45.         <th>1992</th> <td>16</td> <td>22</td> <td>16</td> <td>54</td>  
  46.     </tr>  
  47.     <tr>  
  48.         <th>1988</th> <td>5</td> <td>11</td> <td>12</td><td >28</td>  
  49.     </tr>  
  50.     <tr>  
  51.         <th>1984</th> <td>15</td> <td>8</td> <td>9</td> <td>32</td>  
  52.     </tr>  
  53. </table>  
  54.   
  55. </body>  
  56.   
  57. </html>

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

图1 基本的表格样式
图1 基本的表格样式

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

折叠XML/HTML 代码复制内容到剪贴板
  1. <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 代码复制内容到剪贴板
  1. <style type="text/css">   
  2. .ranking{   
  3.     font: 14px 宋体;   
  4.     border:2px orange solid;   
  5.     text-align:center;   
  6.     border-spacing:10px;   
  7. }   
  8.   
  9. .ranking td{   
  10.     border:1px orange dashed;   
  11. }   
  12.   
  13. .ranking th{   
  14.     border:1px orange solid;   
  15. }   
  16.   
  17. </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 代码复制内容到剪贴板
  1. border-collapse: collapse;

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

图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 代码复制内容到剪贴板
  1. <HTML>  
  2. <HEAD>  
  3. <STYLE>  
  4.  TABLE{border-collapse: collapse;   
  5.           border: 5px solid yellow; }   
  6.   *#col1 { border: 3px solid black; }   
  7.   TD   { border: 1px solid red;   
  8.          padding: lem;   
  9.   }   
  10.   TD.solid-blue  { border: 5px dashed blue; }   
  11.   TD.solid-green { border: 5px solid green; }   
  12. </STYLE>  
  13. </HEAD>  
  14. <BODY>  
  15. <TABLE>  
  16. <COL id="col1"><COL id="col2"><COL id="col3">  
  17. <TR id="row1">  
  18.    <TD> 1   
  19.    <TD> 2   
  20.    <TD> 3   
  21. <TR id="row2">  
  22.    <TD> 4   
  23.    <TD class="solid-blue" > 5   
  24.    <TD class="solid-green"> 6   
  25. </TR>  
  26. <TR id="row3">  
  27.    <TD> 7   
  28.    <TD> 8   
  29.    <TD> 9   
  30. </TR>  
  31. <TR id="row4">  
  32.     <TD> 10   
  33.     <TD> 11   
  34.     <TD> 12   
  35. <TR id="row5">  
  36.     <TD> 13   
  37.     <TD> 14   
  38.     <Td> 15   
  39. </TR>  
  40. </TABLE>  
  41. </BODY>  
  42. </HTML>

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

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

3.边框的分离

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

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

折叠CSS 代码复制内容到剪贴板
  1. 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结构示意
图4 表格的HTML结构示意
 

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

折叠XML/HTML 代码复制内容到剪贴板
  1. tbody th{ ....... }

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

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

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

折叠XML/HTML 代码复制内容到剪贴板
  1. <table>  
  2. <col></col><col></col><col class="special"></col>  
  3.   <tr>  
  4.     <td>11</td>  
  5.     <td>12</td>  
  6.     <td>13</td>  
  7.   </tr>  
  8. ……以下省略……

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

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

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

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/733.html


联系
我们