CSS为表格定义了5个专用属性，详细说明如表1所示。
表1 CSS表格属性列表
| 属性 | 取值 | 说明 |
|---|---|---|
| border-collapse | separate（边分开） | collapse（边合并） | 定义表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开 |
| border-spacing | length | 定义当表格边框独立（如当border-collapse属性等于 separate时），行和单元格的边在横向和纵向上的间距，该值不可以取负值 |
| caption-side | top | bottom | 定义表格的caption对象位于表格的顶部或底部。应与 caption 元素一起使用 |
| empty-cells | show | hide | 定义当单元格无内容时，是否显示该单元格的边框 |
| table-layout | auto | fixed | 定义表格的布局算法，可以通过该属性改善表格呈递性能，如果设置fixed属性值，会使IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度；如果设置auto属性值，则表格在每一单元格内所有内容读取计算之后才会显示出来 |
除了上表介绍的5个表格专用属性外，CSS其他属性对于表格一样适用。
设计表格边框线
使用CSS的border属性代替<table>标签的border属性定义表格边框，可以优化代码结构。
【示例1】下面示例演示如何使用CSS设计细线边框样式的表格。
第1步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第2步，在内部样式表中输入下面样式代码，定义单元格边框显示为1像素的灰色实线。
th, td {font-size:12px; border:solid 1px gray;}
第3步，在<body>标签内构建一个简单的表格结构。
<table> <tr> <th>属性</th> <th>版本</th> <th>继承性</th> <th>描述</th> </tr> <tr> <td>table-layout</td> <td>CSS2</td> <td>无</td> <td>设置或检索表格的布局算法</td> </tr> <tr> <td>border-collapse</td> <td>CSS2</td> <td>有</td> <td>设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开</td> </tr> <tr> <td>border-spacing</td> <td>CSS2</td> <td>有</td> <td>设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距</td> </tr> <tr> <td>caption-side</td> <td>CSS2</td> <td>有</td> <td>设置或检索表格的caption对象是在表格的那一边</td> </tr> <tr> <td>empty-cells</td> <td>CSS2</td> <td>有</td> <td>设置或检索当表格的单元格无内容时，是否显示该单元格的边框</td> </tr> </table>
第4步，在浏览器中预览，则显示效果如图1所示。
图1 使用CSS定义单元格边框样式
通过效果图可以看到，使用CSS定义的单行线不是连贯的线条。这是因为表格中每个单元格都是一个独立的空间，为它们定义边框线时，相互之间不是紧密连接在一起的。
第5步，在内部样式表中，为table元素添加如下CSS样式，把相邻单元格进行合并。
table { border-collapse:collapse;}/* 合并单元格边框 */
第6步，在浏览器中重新预览页面效果，则显示如图5所示。
图5 使用CSS合并单元格边框
定义单元格间距和空隙
为了兼容<table>标签的cellspacing属性，CSS定义了border-spacing属性，该属性能够分离单元格间距。取值包含1个或2个值。当定义一个值时，则定义单元格行间距和列间距都为该值。例如：
table { border-spacing:20px;}/* 分隔单元格边框 */
如果分别定义行间距和列间距，就需要定义两个值，例如：
table { border-spacing:10px 30px;}/* 分隔单元格边框 */
其中第一个值表示单元格之间的行间距，第二个值表示单元格之间的列间距，该属性值不可以为负数。使用cellspacing属性定义单元格之间的距离之后，该空间由表格背景填充。
使用该属性应注意几个小问题：
- 早期IE浏览器不支持该属性，要定义相同效果的样式，这就需要结合传统<table>标签的cellspacing属性来设置。
- 使用cellspacing属性时，应确保单元格之间相互独立性，不能使用border-collapse:collapse;样式定义合并表格内单元格的边框。
- cellspacing属性不能够使用CSS的margin属性来代替。对于td元素来说，不支持margin属性。
- 可以为单元格定义补白，此时使用CSS的padding属性与单元格的cellpadding标签属性实现效果是相同的。
【示例2】以上节示例中表格结构为基础，重新设计内部样式表，为表格内单元格定义上下6像素和左右12像素的间距，同时设计单元格内部空隙为12像素，演示效果如图2所示。
table { border-spacing: 6px 12px; }
th, td {
font-size: 12px;
border: solid 1px gray;
padding: 12px;
}
图2 增加单元格空隙
也可以为<table>标签定义补白，此时可以增加表格外框与单元格之间的距离。
【示例3】继续在上面示例为基础，为<table>标签重设如下样式，设计表格外框为2像素红色实线，定义表格外框与内部单元格间距为2像素，则显示效果如图3所示。
table {
border-spacing: 6px 12px;
border: solid 2px red;
padding: 2px;
}
图3 为表格和单元格同时定义补白效果
隐藏空单元格
如果表格单元格的边框处于分离状态（border-collapse: separate;），可以使用CSS的empty-cells属性设置空单元格是否显示。当其值为show时，表示显示空单元格；当值为hide时，表示隐藏空单元格。
【示例4】在下面示例中，隐藏第2行第2列的空单元格边框显示，效果如图8所示。
<style type="text/css">
table {/* 表格样式 */
width: 400px; /* 固定表格宽度 */
border: dashed 1px red; /* 定义虚线表格边框 */
empty-cells: hide; /* 隐藏空单元格 */
}
th, td {/* 单元格样式 */
border: solid 1px #000; /* 定义实线单元格边框 */
padding: 4px; /* 定义单元格内的补白区域 */
}
</style>
<table>
<tr><td>西</td><td>东</td> </tr>
<tr><td>北</td><td></td></tr>
</table>
隐藏空白单元格
默认显示的空白单元格
图8 隐藏空单元格效果
【提示】
所谓空单元格，就是没有可视内容的单元格。如果单元格的visibility属性值为hidden，即便单元格包含内容，也认为是无可视内容。而“ ”和其它空白字符为可视内容。ASCII字符中的回车符（“\0D”）、换行符（“\0A”）、Tab键（“\09”）和空格键（“\20”）表示无可视内容。
如果表格行中所有单元格的empty-cells属性都为hide，且都不包含任何可视内容，那么整行就等于设置了display: none。
定义标题样式
使用CSS的caption-side属性可以定义标题的显示位置，该属性取值包括top（位于表格上面）、bottom（位于表格底部）、left（位于表格左侧，非标准）、right（位于表格右侧，非标准）。
如果要水平对齐标题文本，则可以使用text-align属性。对于左右两侧的标题，可以使用vertical-align属性进行垂直对齐，取值包括top、middle和bottom，其它取值无效，默认为top。
【示例5】在下面示例中，定义标题靠左显示，并设置标题垂直居中显示。但不同浏览器在解析时分歧比较大，如在IE浏览器中显示如图9所示，但是在Firefox中显示如图10所示。
<style type="text/css">
table {border: dashed 1px red; }/* 定义表格虚线外框样式 */
th, td {/* 定义单元格样式 */
border: solid 1px #000; /* 实线内框 */
padding: 20px 80px; /* 单元格内补白大小 */
}
caption {/* 定义标题行样式 */
caption-side: left; /* 左侧显示 */
width: 10px; /* 定义宽度 */
margin: auto 20px; /* 定义左右边界 */
vertical-align: middle; /* 垂直居中显示 */
font-size: 14px; /* 定义字体大小 */
font-weight: bold; /* 加粗显示 */
color: #666; /* 灰色字体 */
}
</style>
<table>
<caption>表格标题</caption>
<tr><td>北</td><td>西</td> </tr>
<tr><td>东</td><td>南</td> </tr>
</table>
图9 IE解析表格标题效果
图10 Firefox解析表格标题效果
【拓展】
当同时为<table>、<tr>和<td>等标签定义背景色、边框、字体属性等样式，就容易发生样式重叠问题。根据表格布局模型，各种表格对象背景样式层叠的顺序如图11所示。
图11 表格对象样式的层叠顺序
从上图可以看到：td元素的样式具有最大优先权，以此类推，如果单元格为透明，则行（tr元素）具有最大优先权。表格定义的背景优先权最弱，如果表格中其他元素都为透明时，则才可以看到表格的背景。