本文和大家重点讨论一下用CSS来表示表格的cellpadding和cellspacing方法,表格的cellpadding和cellspacing我们经常会用一定的方式来清除默认样式,请看下文详细介绍。

用CSS来表示表格的cellpadding和cellspacing方法

表格的cellpadding和cellspacing我们经常会用如下的方式来清除默认样式:

引用

  1. <tablecellspacingtablecellspacing="0"cellpadding="0"></table>

很多朋友会说表现在结构中,这样不符合标准,那如何将这个表现拿出来,有些朋友或许很迷惑。我们可以用table的border-collapse:collapse;属性来代替cellspacing="0",用th,td的padding:0;属性来代替cellpadding="0"。

引用

  1. table{
  2. border-collapse:collapse;
  3. border-spacing:0;
  4. }
  5. th,td{
  6. padding:0;
  7. }

还可以用expression来实现cellpadding="0"的样式:

引用

  1. table{
  2. border-collapse:collapse;
  3. border-spacing:0;
  4. padd:expression(this.cellPadding=0);
  5. }

我们看下《HTML与CSS入门经典(第7版)》一书中对这两个属性的描述:

引用

对表格的设置不仅可以使用style属性。例如,可用cellpadding和cellspacing属性来控制表格边框的间距。cellspacing属性设置表格边框之间和表格单元格之间的间距(以像素为单位);cellpadding属性设置单元格中的信息四周的间距(也是以像素为单位)。如果将cellpadding属性设置为0,将使表格中的所有信息尽量接近表格边框,甚至接触到边框。cellpadding和cellspacing属性让你能够全面控制表格的外观。

注意:虽然在XHTML中仍允许使用cellpadding和cellspacing属性,但CSS中存在与这两个属性等价的样式属性padding和border-spacing。然而,当前的网页浏览器对这些样式属性的支持不一致,因此建议现在仍使用属性cellpadding和cellspacing来调整表格的间距。
而《精通CSS》一书中,作者提倡的方法是:

引用

    1. table{
    2. border-collapse:collapse;
    3. }
    4. <tablecellpaddingtablecellpadding="0"></table>

CSS中表示cellpadding和cellspacing的方法的更多相关文章

  1. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  2. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

  3. css中的float属性以及清除方法 (2011-09-03 17:36:26)

    CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...

  4. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  5. css中常用的几种居中方法

    在前端面试中,大都会问你div居中的方法: 文笔不好,就随便寥寥几句话概括了, 不过以后文笔肯定会变得更好一些的. 今天我们就细数一下几种方法: 1,使用position:absolute,设置lef ...

  6. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  7. css中设置div垂直水平居中的方法

    设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...

  8. css中让元素隐藏的多种方法

    { display: none; /* 不占据空间,无法点击 / } { visibility: hidden; / 占据空间,无法点击 / } { position: absolute; top: ...

  9. CSS中表示颜色的4种方法

    #1:直接用颜色名称 #2:十六进制数 #3:RGB整数设置颜色 0-255 #4:RGB百分数设置颜色0%-100%

随机推荐

  1. (摘录)data guard switchover切换异常

    查看DG数据库备份库发现,switchover_status为SWITCHOVER LATENT SQL> select OPEN_MODE,PROTECTION_MODE,PROTECTION ...

  2. Node.js流

    什么是流? 流是可以从一个源读取或写入数据到连续的目标对象.在Node.js,有四种类型的数据流. Readable - 其是用于读操作. Writable - 用在写操作. Duplex - 其可以 ...

  3. java 和javaw 的区别——<转>

    java 和javaw 的区别 javaw.exe用法和java.exe 相同 javaw的程序不在java console 上面显示任何东西,如果在开发程序,就用java,这样可以看到错误提示, 如 ...

  4. Android模拟器(出错问题)Intel X86 没法用!!!

    前提: CPU 支持 VT (Virtualization Technology), 而且仅限于 Intel CPU 首先要打开SDK Manager 下载intel haxm,下载位置: andro ...

  5. awk文本处理--二维数组使用一例

    群友出的题: 原始文件: $ cat fileBJ30 26BJ30 24BJ30 63BJ30 70SH41 21SH41 30SH41 25SH41 25SH41 29SD15 34SD15 46 ...

  6. 【离线】【深搜】【树】Codeforces 707D Persistent Bookcase

    题目链接: http://codeforces.com/problemset/problem/707/D 题目大意: 一个N*M的书架,支持4种操作 1.把(x,y)变为有书. 2.把(x,y)变为没 ...

  7. Android按钮式进度条

    package com.example.progress.demo; import android.annotation.SuppressLint; import android.content.Co ...

  8. Tomcat Server Locations

  9. maven打一个可执行的jar包

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-depen ...

  10. 005_MyEclipse编码设置

    方法一: 1.打开MyEclipse,windows---->Preferences打开"首选项"对话框. 2.左侧导航,导航中找到general---->Worksp ...