CSS教程之：CSS表格
下面我们看一下具体的例子 border-collapse 属性： 这个属性有两个可选值: collapse: 合并相邻的单元格边框 separate: 让相邻的边框保留各自的样式 style type = "text/css" table.one{border-collapse:colla
下面我们看一下具体的例子
border-collapse 属性：
这个属性有两个可选值:
collapse: 合并相邻的单元格边框
separate: 让相邻的边框保留各自的样式
border-collapse 属性：
这个属性有两个可选值:
collapse: 合并相邻的单元格边框
separate: 让相邻的边框保留各自的样式
<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>border-spacing 属性：
通过border-spacing属性，可以控制相邻单元格之间的空白宽度。
我们可以指定一个或两个数值: 如果指定了一个数值，它将被用于设置单元格间的垂直和水平宽度；如果指定了两个数字，第一个被用于水平宽度，第二个被用于垂直宽度。
注意：Netscape 7与IE 6中不支持此属性
<style type="text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
<table class="one" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
caption-side属性：
caption-side属性允许我们指定表格的标题显示在什么地方。
这个属性有四个可选值：top, bottom, left, right
注意： IE浏览器不支持此属性
<style type="text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
<table style="width:400px; border:1px solid black;">
<caption class="top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid black;">
<caption class="bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid black;">
<caption class="left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid black;">
<caption class="right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
empty-cells属性：
empty-cells属性指示浏览器是否渲染空单元格的边框。
这个属性有三个可选值：show, hide, inherit:
<style type="text/css">
table.empty{
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty{
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>- 上一篇：CSS教程之：CSS链接
- 下一篇：CSS教程之：CSS边框
精彩图集
精彩文章