赵工的个人空间

表格是网页上最常见的元素，在传统的网页设计中，表格除了显示数据外，还常常用来作为整个页面布局的手段。现在Web标准已不建议用表格来布局，但表示数据等方面还起着重要作用。

最常用的与表格相关的3个标记是<table>、<tr>和<td>，其中<table>用于定义整个表格，<tr>定义一行，<td>定义一个单元格。还有<caption>和<th>两个标记也常用到，<caption>用于定义表格的大标题，可以出现在<table>和</table>中的任意位置，不过习惯上放在表格的第1行，紧接着<table>标记；<th>是表头，主要用于行或列的名称。

HTML还有<thead>、<tbody>、<tfoot>三个与表格有个的标记，用来定义表格的不同部分，称为行组。 在HTML中，单元格是存在于“行”中的，对整列设置样式就不太方便，这时可使用<col>标记。示例：
  <table>
  <col></col><col></col><col class=”special”></col>
  <tr>
     <td>11</td>
     <td>12</td>
     <td>13</td>
  </tr>
每一对<col></col>标记对应于表格中的1列，对需要单独设置的列设置一个类别，并设置该类别的CSS属性即可。

1.CSS设置表格边框：

为table设置一个类别record，并设CSS属性。代码为：
  <style type=”text/css”>
     .record{
        font:14px 宋体;
        border:2px #777 solid;
        text-align:center;
     }
    .record td{
        border:1px #777 dashed;
     }
    .record th{
        border:1px #777 solid;
     }
  </style>
最外面的粗线框是整个表格的边框，由table的.record类边框设定，而th和td也可以分别设置边框属性。每个单元格都有自己的边框，边框之间的间距由cellspacing决定。
当把cellspacing设为0，相邻单元格的边框紧挨一起，最小为2像素。

2.确定表格宽度：
CSS有table-layout属性，有fixed和auto属性值，分别表示固定和自动方式。设置使用自动方式时，表格实际宽度可能并不是width属性的设置值，而是根据单元格中的内容多少进行调整；而在设置为固定方式时，表格的水平布局不依赖于单元格的内容，而是由width属性指定。浏览器默认使用自动方式。

3.合并单元格边框：
CSS可以通过border-collapse属性设置边框分离或合并。示例：
     .record{
        font:14px 宋体;
        border:2px #777 solid;
        text-align:center;
        border-collapse:collapse;
     }
这样，相邻单元格之间的两条边框将重合为一条边框，粗细为1像素，这时HTML中设置的cellspacing属性就失效了。border-collapse属性的默认值为separate。
每个单元格可以设置各自的边框属性，相邻边框合并时就有优先级问题。在CSS2的规范中，边框border-style属性有多种属性值，其中hidden的优先级最高，边框属性none的优先级最低，粗线的优先级高于细线，border-width相同时的样式优先级为double、solid、dashed、dotted、ridge、outset、groove、inset。如果边框的其他样式都相同，只是颜色不同，那么单元格样式最优先，然后依次是行、行组、列、列组和表格样式。
不过，上述CSS2规范并不是所有浏览器都严格遵循。
使用HTML设定单元格属性时，cellpadding用来设置单元格内容和边框之间的距离，cellspacing用来设置相邻单元格边框之间的距离。
而用CSS实现cellpadding，是对td使用padding属性；实现cellspacing则需要对table设置专门属性border-spacing，并确保border-collapse属性没有使用collapse。但并不是所有浏览器都支持border-spacing属性。

4.对表格和标题的CSS设置：

     table{
        background-color:#fff;
        color:#565;
        font:12px arial;
        border:none;
        text-align:left;
     }
     table caption{
        font-size:24px;
        border-bottom:2px solid #b3de94;
        border-top:2px solid #b3de94;
     }

5.设置单元格样式：

首先设置区分tbody和thead、tfoot部分的行背景色：
     tbody tr{
        background-color:#ccc;
     }
     thead tr,tfoot tr{
        background-color:white;
     }
然后设置单元格的内边距和边框属性，形成立体效果：
     td,th{
        padding:5px;
        border:2px solid #eee;
        border-bottom-color:#666;
        border-right-color:#666;
     }

6.斑马纹效果：

当表格数据量很大时，表格使用同样背景色会比较凌乱而使人看错行，需要使用隔行变色效果。在CSS中，给偶数行的<tr>标记添加上相应类型，并对其进行CSS设置即可。示例：
    <tr class=”even”>
      <th>TV</th>
      <td>T956874</td>
      <td>Germany</td>
      <td>$315.00</td>
      <td>White</td>
      <td>15.4kg</td>
    </tr>
而设置.even与其他单元格的不同样式：
     tbody tr.even{
        background-color:#aaa;
     }
实际网页中，隔行变色效果通常是配合服务器动态生成的，在服务器读取数据时做判断。例如，读取第一个数据时输出<tr>，而读取第2个数据时输出<tr class=”even”>，依次循环。

7.设置列样式：

对数值的列，如price和weight，右对齐更符合习惯，而其他列则为居中对齐。需要在HTML中加入如下代码：
  <col/> <col class=”center”/> <col class=”center”/> <col class=”right”/> <col class=”center”/> <col class=”right”/>
其中增加了6个<col>标记，其中每个col标记对应于一列。CSS样式表中的设置为：
     col.center{
        text-align:center;
     }
     col.right{
        text-align:right;
     }
这样设置，也使表头price和weight也右对齐了，一般希望居中对齐，则CSS中设置：
     thead th{
        text-align:center;
     }
有些浏览器不支持col元素，这时可以使用邻接选择器：
     th+td,th+td+td,th+td+td+td+td{
        text-align:center;
     }
     th+td+td+td,th+td+td+td+td+td{
        text-align:right;
     }

8.设置鼠标指针经过时整行变色提示的表格：

对Firefox浏览器，支持“:hover”伪类，仅仅通过CSS的“:hover”伪类就可以实现该效果。
  tbody tr:hover td,tbody tr:hover th{
    background:aqua;
    border:2px solid aqua;
  }
上述代码的意图是，某一行在鼠标指针经过时，会使用“th:hover”将背景色设置为和原来的背景色反差很大的颜色，然后把边框颜色设置为和背景色相同。