`

用css来表示表格的cellpadding和cellpadding的方法

    博客分类:
  • css
阅读更多
表格的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式:

引用
<table cellspacing="0" cellpadding="0"></table>


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

th,td {
padding: 0;
}

还可以用expression来实现cellpadding="0"的样式:
引用
table {
border-collapse:collapse;
border-spacing:0;
padd:expression(this.cellPadding=0);
}

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

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


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

<table cellpadding="0"></table>

4
1
分享到:
评论

相关推荐

    HTML表格标记教程(48):CSS修饰表格

    很多人热衷于制作1px表格,于是发明了各式各样的方法,用css做起来可就灵活的多。如果要制作一个1×1的1px表格只要简单定义一下边框值就可以了。我们首先用Dreamweaver插入一个1×1表格,宽度为50,然后在该表格...

    CSS去除表格的默认间距并且制作1px的细线表

    现在在所谓“div css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。但是,我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有...

    CSS 网页布局 表格制作实例

    相反,该用TABLE的地方是提倡使用TABLE的...最合理的方法,就是使用表格来实现表格,经过 HeTingYi 的发布以及 goos 的简化,代码如下: 页面结构: &lt;table cellspacing=1 cellpadding=0&gt; 游客类别&lt;/th&gt;

    表格边框以虚线显示的css样式

    复制代码代码如下: &lt;style&gt; .table5{text-align:center; border:1px solid #cccccc; border-radius :3px; background-color:#...table width=”100%” border=”0″ cellpadding=”2″ cellspacing=”0″ class

    html表格样式,及表格

    &lt;style type="text/css"&gt; td{ text-align:center; } a{ text-decoration: none; } img{ width: 25px;height:25px; border-radius: 50%; align="left"; } &lt;title&gt;demo &lt;!-- &lt;strong&gt;&lt;/strong&gt;...

    JS固定表头和左边列V2.0(源码)

    修正表格cellpadding/cellspacing的设置问题 修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能(如果是JS代码设置复选框选中,需要...

    HTML table 表格边框的实现思路

     1、表格无边框,背景颜色设置一种颜色(#DCDFE6),这样表格的边框的颜色就是表格的背景颜色;  2、单元格间距为1px,背景颜色设置为白色(#FFFFFF) // CSS table { background:#DCDFE6; width: 100%; } ...

    HTML开发王

    16.1 使用表格进行网页设计和布局的方法 16.1.1 了解布局模块 16.1.2 表格布局的方法 16.2 在dreamweaver中使用表格 16.2.1 在“布局”模式下使用表格进行网页布局 16.2.2 在“布局”模式下修改网页布局 16.2.3 设置...

    十天学会ASP.net--我认为ASP.NET比ASP难很多,希望大家做好准备

    对于ASP来说,我们常用的数据库无非是ACCESS和SQL SERVER,对于ASP.NET也是,不过ASP.NET对于SQL SERVER有专门的连接组件而不推荐用OLE DB。 首先看一下ACCESS的连接数据库并打开; string strConnection=...

    Asp.Net无刷新分页( jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 ... &lt;table id="Result" cellspacing="0" cellpadding="0"&gt; 编号 名称&lt;/th&gt; &lt;/tr&gt; &lt;div id="Pagination"&gt;&lt;/div&gt; &lt;/html&gt;

    JavaScript Table行定位效果

    最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 ...

    html入门到放弃笔记

    注意:嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系 Demo : 1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b ...

    asp学习笔记

    &lt;table border="1" cellspacing="0" cellpadding="0" width="400" height="100"&gt; &lt;input/&gt; &lt;input type=""&gt; text 文本框 button 按钮 submit 提交按钮 结合表单&lt;form标记&gt;使用 checkbox 多...

    table点击表头排序

    1、给排序的表格加id 2、标题栏加 3、排序的内容加 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; $$A.forEach...

Global site tag (gtag.js) - Google Analytics