注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Casa Baths N' shower

www.jacuzzi-bathtub.com

 
 
 

日志

 
 

cellpadding 和 cellspacing属性  

2009-10-08 22:00:14|  分类: 网站 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

cellpadding 和 cellspacing属性 - teetotal - 我的博客

  • 巢(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>

    0

    0

    0

    (请您对文章做出评价)

  •   评论这张
     
    阅读(202)| 评论(0)
    推荐 转载

    历史上的今天

    在LOFTER的更多文章

    评论

    <#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    页脚

    网易公司版权所有 ©1997-2017