1. CSS表格属性可以帮助您极大地改善表格的外观。
2. CSS表格属性
3. 表格边框
3.1. 如需在CSS中设置表格边框, 请使用border属性。
3.2. 下面的例子为table、th以及td设置了蓝色边框:
table, th, td {
border: 1px solid blue;
}
3.3. 请注意, 上例中的表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。
4. 表格边框合并
4.1. border-collapse属性设置表格的边框是否被合并为一个单一的边框, 还是象在标准的html中那样分开显示。
4.2. 默认值
4.3. 可能的值
4.4. 例子
4.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>边框合并</title>
<meta charset="utf-8" />
<style type="text/css">
table, td, th {
border: 1px solid black;
}
#collapse {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption>未合并边框的表格</caption>
<tr>
<th>如需在CSS中设置表格边框, 请使用border属性。</th>
<th>表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。</th>
</tr>
<tr>
<td>border-collapse属性设置表格的边框是否被合并为一个单一的边框</td>
<td>separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。</td>
</tr>
<tr>
<td>collapse如果可能, 边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。</td>
<td>如果没有规定!DOCTYPE, 则 border-collapse可能产生意想不到的结果。</td>
</tr>
</table>
<br />
<table id="collapse">
<caption>合并边框的表格</caption>
<tr>
<th>如需在CSS中设置表格边框, 请使用border属性。</th>
<th>表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。</th>
</tr>
<tr>
<td>border-collapse属性设置表格的边框是否被合并为一个单一的边框</td>
<td>separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。</td>
</tr>
<tr>
<td>collapse如果可能, 边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。</td>
<td>如果没有规定!DOCTYPE, 则 border-collapse可能产生意想不到的结果。</td>
</tr>
</table>
</body>
</html>
4.4.2. 效果图
5. 相邻单元格的边框间的距离
5.1. border-spacing属性设置相邻单元格的边框间的距离(仅用于"边框分离"模式)。
5.2. 在指定的两个长度值中, 第一个是水平间隔, 第二个是垂直间隔。
5.3. 默认值
5.4. 可能的值
5.5. 例子
5.5.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>相邻单元格的边框间的距离</title>
<meta charset="utf-8" />
<style type="text/css">
table, td {
border: 1px solid black;
}
table {
border-collapse: separate;
border-spacing: 10px 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>border-spacing属性设置相邻单元格的边框间的距离(仅用于"边框分离"模式)。</td>
<td>在指定的两个长度值中, 第一个是水平间隔, 第二个是垂直间隔。</td>
</tr>
<tr>
<td>除非border-collapse被设置为separate, 否则将忽略这个属性。</td>
<td>不允许使用负值。</td>
</tr>
</table>
</body>
</html>
5.5.2. 效果图
6. 设置表格标题的位置
6.1. caption-side属性设置表格标题的位置。
6.2. 表标题显示为好像它是表之前(或之后)的一个块级元素。
6.3. 默认值
6.4. 可能的值
7. 表格空单元格显示和隐藏
7.1. empty-cells属性设置是否显示表格中的空单元格(仅用于"分离边框"模式)。
7.2. 除非border-collapse设置为separate, 否则将忽略这个属性。
7.3. 默认值
7.4. 可能的值
7.5. 例子
7.5.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>表格标题的位置和单元格显示和隐藏</title>
<meta charset="utf-8" />
<style type="text/css">
table, td {
border: 1px solid blue;
}
#t1 {
caption-side: bottom;
}
#t2 {
empty-cells: hide;
}
</style>
</head>
<body>
<table id="t1">
<caption>标题在下, 显示空单元格</caption>
<tr>
<td>caption-side属性设置表格标题的位置。</td>
<td>表标题显示为好像它是表之前(或之后)的一个块级元素。</td>
</tr>
<tr>
<td>empty-cells属性设置是否显示表格中的空单元格(仅用于"分离边框"模式)。</td>
<td></td>
</tr>
</table>
<br />
<table id="t2">
<caption>标题在上, 隐藏空单元格</caption>
<tr>
<td>caption-side属性设置表格标题的位置。</td>
<td>表标题显示为好像它是表之前(或之后)的一个块级元素。</td>
</tr>
<tr>
<td></td>
<td>empty-cells除非border-collapse设置为separate, 否则将忽略这个属性。</td>
</tr>
</table>
</body>
</html>
7.5.2. 效果图