CSS设置表格边框、标题、合并边框、边框分离、表格

表格可以用来组织、显示数据，也可以用来排版。在传统的网页中，用户主要使用表格作为工具进行页面布局，现在很少有人使用表格设计页面了，但是表格在数据化的显示方式中，仍然是不可以取代的。

CSS设置边框颜色

CSS使用background-color属性为元素设置一种纯色，这种颜色会填充元素的内容，内边距和边框区域，扩展到元素边框的外边姐，如果边框有透明部分（虚线边框），会通过这些透明部分显示出背景色。它的属性值有两个：

• color：颜色可以是颜色名，rgb值或者十六进制数。
• transparent：默认，背景颜色为透明。

CSS设置合并边框

CSS使用border-collapse 属性设置表格的边框是否被合并为一个单一的边框，属性值可以为以下几种：

• separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
• collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
• inherit：规定应该从父元素继承 border-collapse 属性的值。

CSS设置边框分离

CSS使用border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式），某些版本的IE浏览器不支持此属性。属性值可以设置为像素px，两个像素值的话，第一个为横间距，第二个为纵间距；一个像素值的话作用于横向和纵向间距。

CSS使用empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。属性值可以为以下几种：

• hide：不在空单元格周围绘制边框。
• show：在空单元格周围绘制边框。默认。
• inherit：规定应该从父元素继承 empty-cells 属性的值。

CSS设置表格标题

CSS使用caption-side 属性设置表格标题的位置。属性值可以为一下几种：

• top：默认值。把表格标题定位在表格之上。
• bottom：把表格标题定位在表格之下。
• inherit：规定应该从父元素继承 caption-side 属性的值。

综合实例：

<style type="text/css">
    .reference{
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  /*设置字体*/
        border: red solid 1px;  /*表格外边框*/
        width:400px;
        border-collapse:collapse;   /*合并边框 边框重叠*/
        border-spacing: 5px 10px;   /*单元格横向间距为5px 纵向间距为10px*/
        empty-cells: hide;  /*不在空单元格周围绘制边框*/
    }
    .reference td, .reference th {
          font-size:1em;
          border:1px solid #98bf21;  /*单元格边框*/
          padding:5px 10px;  /*设置内边距 上下5px 左右10px */ 
    }
    .reference th {
        font-size:1.1em;
        text-align:left;
        padding-top:5px;
        padding-bottom:4px;
        background-color:#A7C942;
        color:#ffffff;
        }
    .xxoo{   /*表格标题样式*/
        font-size: 15px;
        font-weight: bold;
        padding: 6px;
        color: #141513;
        caption-side: bottom;  /*表格标题的显示在表格底部位置*/
    } 
    .reference tr.alt td {
        color:#000000;
        background-color:#EAF2D3;
    }
</style>
<table class="reference">
<thead valign="bottom">
    <caption class="xxoo">
        表格标签
    </caption>
    <tr>
        <th style="width: 30%">标签</th>
        <th style="width: 70%">描述</th>
    </tr>
</thead>

<tbody valign="top">
<tr class="alt"><td><table></td><td>定义表格</td></tr>
<tr><td><caption></td><td>定义表格标题</td></tr>
<tr class="alt"><td><th></td><td>定义表格中的表头单元格</td></tr>
<tr><td><tr></td><td>定义表格中的行</td></tr>
<tr class="alt"><td><td></td><td>定义表格中的单元</td></tr>
<tr><td><thead></td><td>定义表格中的表头内容</td></tr>
<tr class="alt"><td><tbody></td><td>定义表格中的主体内容</td></tr>
<tr><td><tfoot></td><td>定义表格表注内容（脚注）</td></tr>
<tr class="alt"><td><col></td><td>定义表格中一个或多个列的属性值</td></tr>
<tr><td><colgroup></td><td>定义表格中供格式化的列组</td></tr>
</tbody></table>

以下是演示效果：

可以自行结合属性对应效果进行练习尝试，鳄鱼君在这里不做详细介绍了！