cellpadding和cellspacing属性

cellpadding和cellspacing属性来控制表格边框的间距。

• 巢(cell) -- 表格的内容
• 巢补白(表格填充)(cellpadding) -- 代表巢外面的一个距离,用于隔开巢与巢空间
• 巢空间(表格间距)(cellspacing) -- 代表表格边框与巢补白的距离,也是巢补白之间的距离

• 上图说明了表格的几个属性,其中黑色部分就是巢(cell)，白色的区域是巢补白(表格填充)，灰色的区域是巢空间(表格间距)。

  
  
  cellpadding和cellspacing属性来控制表格边框的间距。

  cellspacing 设置表格边框和单元格之间的间距（以像素为单位）
  cellpadding 设置单元格中的内容与单元格边框的间距（也是以像素为单位）

  看这个例子：

  <table cellspacing="0" cellpadding="0">
  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>

  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>
  </table>

  可以看到这是我们常见的TABLE设置，那如何将cellpadding和cellspacing这两个属性用CSS来定义呢？

  下面看几个例子，相信看完以后，你就明白如何去用CSS定义cellpadding和cellspacing这两个属性了。

  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  例子一：

  <style type="text/css">
  table     {border-collapse:collapse;} #相当于 cellspacing="0"
  table td {padding:0;}                          #相当于 cellpadding="0"
  </style>

  <table>
  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>

  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>
  </table>

  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  例子二：

  <style type="text/css">
  .tbl     {border-collapse:collapse;} #相当于 cellspacing="0"
  .tbl td {padding:0;}                          #相当于 cellpadding="0"
  </style>

  <table class="tbl">
  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>

  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>
  </table>

  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  例子三：

  <style type="text/css">
  .mydiv table     {border-collapse:collapse;} #相当于 cellspacing="0"
  .mydiv table td {padding:0;}                         #相当于 cellpadding="0"
  </style>

  <div class="mydiv">
  <table>
  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>

  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>
  </table>

  <table>
  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>

  <tr>
  <td>.......</td>
  <td>.......</td>
  <td>.......</td>
  </tr>
  </table>
  </div>