CSS针对表格、列表等特定组件提供了相应的属性，通过表格相关属性可以控制表格的边框样式、表格标题所在位置、表格布局等。

表格相关属性

　　表格相关属性主要用于控制表格的外观，表格相关属性有如下几个。
　　➢　border-collapse：用于设置表格里行和单元格边框的显示方式，该属性控制两个单元格的边框是合并在一起，还是按照标准的HTML样式分开。该属性有两个值，即seperate（边框分开，使得单元格的分隔线为双线）和collapse（边框合并，使得单元格的分隔线为单线）。
　　➢　border-spacing：当设置border-collapse为seperate时，该属性用于设置两个单元格边框之间的间距。
　　➢　caption-side：用于设置表格标题位于表格哪边。该属性必须和<caption.../>元素一起使用。该属性有4个值，即top、bottom、left、right，分别对应于将表格标题放在表格的上、下、左、右4处。
　　➢　empty-cells：该属性控制单元格内没有内容时，是否显示单元格边框。只有当border-collapse属性设置成seperate时，该属性才有效。该属性支持show（显示）和hide（隐藏）两个属性值。
　　➢　table-layout：用于设置表格宽度布局的方法。该属性支持auto和fixed两个属性值，其中auto是默认值，也就是平时常见的表格布局方式；fixed则指定使用固定布局方式，本节会详细介绍这种布局方式。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 表格相关属性 </title>
    <style type="text/css">
    table {
        width: 400px;
        border: 1px solid black;
    }
    td {
        background-color:#ccc;
        border: 1px solid black;
    }
    </style>
</head>  
<body>  
<!-- 表格的单元格边框合并在一起，看起来分割线为单线,并将表格标题放在右边 -->  
border-collapse:collapse;caption-side:right;  
<table style="border-collapse:collapse;caption-side:right;">  
    <caption>表格标题</caption>
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>  
<!-- 表格的单元格边框分开，看起来表格分割线为双线，并隐藏空格的边框线 -->  
border-collapse:seperate;empty-cells:hide;  
<table style="border-collapse:seperate;empty-cells:hide;">  
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td></td>
    </tr>
</table>  
<!-- 表格的单元格边框分开，看起来表格分割线为双线，并设置两个单元格的间距 -->  
border-collapse:seperate;border-spacing:20px;  
<table style="border-collapse:seperate;border-spacing:20px">  
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>  
</body>  
</html>

控制表格布局

　　通过将表格的table-layout指定为fixed可以控制表格的布局方式，指定table-layout:fixed是一种固定布局方式。在这种布局方式下，表格的宽度会按如下方式计算得到。
　　（1）如果通过<col.../>或<colgroup.../>元素设置了每列的宽度，则表格宽度将等于所有列宽的总和。
　　（2）如果表格的第一个单元格设置了宽度信息，则表格宽度将等于第一行内所有单元格宽度的总和。
　　（3）直接平均分配每列的宽度，忽略单元内容的实际宽度。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 表格相关属性 </title>
    <style type="text/css">
    table {
        table-layout: fixed;
        border-collapse:collapse;
        border: 1px solid black;
    }
    td {
        background-color:#ccc;
        border: 1px solid black;
    }
    </style>
</head>  
<body>  
表格的宽度将由两个col元素出来
<table>  
    <!-- 表格的宽度将由如下两个col元素计算出来 -->
    <col style="width:240px"/>
    <col style="width:80px"/>
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>  
表格的宽度将由如下第一行的单元格的宽度计算出来
<table>  
    <tr>
        <!-- 表格的宽度将由如下第一行的单元格的宽度计算出来 -->
        <td style="width:80px">疯狂Java讲义</td>
        <td style="width:300px">轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>  
每列将会平均分配该表格的宽度
<!-- 每列将会平均分配该表格的宽度 -->  
<table style="width:300px">  
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。