表格边框间距属性(border-sapcing)用来定义表格中独立边框之间的间距。在表格边框间距属性中,使用的属性值是长度值。其语法如下所示。
border-spacing:length;
****************************************************************
注意:当在表格边框合并属性中使用合并显示值(collapse)的时候,使用表格边框间距属性将不起作用。IE浏览器并不支持表格边框间距属性,只有在Firefox等浏览器中,才能够显示出间距的正常效果。
****************************************************************
范例:一个使用表格边框间距属性的实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css属性实例</title>
<style>
.table1
{
 border-spacing:20px;
 border-collapse:separate;
}
.table2
{
 border-spacing:20px;
 border-collapse:collapse;
}
table
{
 border:2px solid #000000;
 margin:0 0 20px 0;
}
td
{
 border:1px solid #999999;
 width:200px;
 height:80px;
}
</style>
</head>
 
<body>
 <table class="table1">
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr>
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr></table>
 <table class="table2">
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr>
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr></table>
</body>
</html>
以上的代码中分别定义了两个两行两列的表格。在第一个表格中,定义边框合并属性值为独立显示,并且定义了表格边框间距属性值为20px。在第二个表格中,定义了基本相同的属性,只有表格边框合并属性值为合并显示。另外还定义了表格的边界属性,目的是将表格之间分隔一段距离。

posted on 2011-09-29 09:59  箪箪汰郎  阅读(3412)  评论(0编辑  收藏  举报