`
bluedusk
  • 浏览: 263734 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

table的cellpadding和cellpadding

阅读更多

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

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<table cellspacing="0" cellpadding="0"></table>


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

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
table {
border-collapse:collapse;
border-spacing:0;
}
th,td {
padding: 0;
}


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

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
table {
border-collapse:collapse;
border-spacing:0;
padd:expression(this.cellPadding=0);
}


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

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

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


  在《精通CSS》一书中,作者提倡的方法是:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
table {
border-collapse: collapse;
}
<table cellpadding="0"></table>
分享到:
评论

相关推荐

    IE6/7中使用setAttribute设置table的cellpadding和cellspacing的Bug

    复制代码代码如下: table { border-collapse:...注意cellSpacing和cellPadding中间的 S 和 P 都要是大写的。 方式2,setAttribute 复制代码代码如下: table.setAttribute(‘cellspacing’,’10’); table.setAttribu

    JS动态修改表格cellPadding和cellSpacing的方法

    主要介绍了JS动态修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    可拖动的table

    可拖动的table #draggable{ padding:absolute; height:600px;... &lt;table cellspacing="0" cellpadding="0" width="1" height="80%" bgcolor="#C0C0C0" &gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; //竖线的生成 &lt;/div&gt;

    html table实现复杂表头的示例代码

    使用html做复杂的表格。复杂表格一般是用到td的两个属性:rowspan 、colspan属性值。 ...  (1)rowspan 属性规定单元格可横跨的行数;  (2)colspan 属性规定单元格可横跨的列数。 ...table id="tab" cellpadding="1

    web开发的标签讲解

    <table cellpadding=点数> 【4】调整表格宽度 -- width <table width=点数或百分比> 【5】调整表格高度 -- height <table height=点数或百分比> 【6】设定表格背景色彩 -- bgcolor <table bgcolor=#rrggbb...

    像Excel一样的table表格

    overflow-x:scroll\"&gt;&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"&gt;&lt;tr&gt;" for(i=0;i;i++){ if(i){ var cTitle=DataTitles[i].split("#") iBoxWidth-=cTitle[1] var DynTip=((i+1)==...

    改变table中行的背景

    &lt;table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000"&gt; ;" onMouseOut="this.bgColor='#FFFFFF';"&gt; 细 表 ;" onMouseOut="this.bgColor='#FFFFFF';"&gt; 线 格 &lt;/table&gt;

    table拖动(固定宽度,兼容Firefox 3.5IE6)

    和之前的一个不同的是这个是固定了table的宽度。 相应函数修改为一下后可适应tabel的border属性取不同值: o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度,兼容IE6和Firefox*/{ if...

    jeasyui的dataGrid的打印和导出,jeasyui报表 table转成excel 实例下载

    "&gt;报送时间: 年 月 日&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;table cellspacing="0" class="pb"&gt;'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printDatagrid...

    webfrom- 遍历html生成table.pdf

    &lt;table border="1" cellpadding="0" cellspacing="0" width="80%"&gt; 序号 业务类型 业务编码 满板数量 主料编码 维护人员 维护时间 编辑 for (int i = 0; i ; i++) ...

    动网论坛Final即时聊天插件可管理版

    --&gt; &lt;BR&gt;&lt;br&gt; &lt;table cellpadding=3 cellspacing=1 align=center class=tableborder1&gt; &lt;TR&gt;&lt;Th colSpan=2 align=left height=25&gt;-=&gt; 友情论坛&lt;/Th&gt;&lt;/TR&gt; 3 打开chat文件夹中的sendm.asp和editm.asp,把...

    ASP.NET Table 表格控件的使用方法

    一个Table对象包含多个行TableRow,每一行又包含TableCell,TableCell中...Table单元格内容和单元格边框之间的空间量(单位:像素) CellSpacing 相邻单元格之间的空间量 Rows Table控件中行的集合 Tabl

    extjs4 模板值和模板

    '&lt;table border=1 cellpadding=0 cellspacing = 0&gt;', '&lt;tr&gt;&lt;td width=90&gt;姓名&lt;/td&gt;&lt;td width=90&gt;{0}&lt;/td&gt;&lt;/tr&gt;', '&lt;tr&gt;&lt;td&gt;年龄&lt;/td&gt;&lt;td&gt;{1}&lt;/td&gt;&lt;/tr&gt;', '&lt;tr&gt;&lt;td&gt;性别&lt;/td&gt;&lt;td&gt;{2}&lt;/td&gt;&lt;/tr&gt;', '&lt;/table&gt;...

    JavaScript Table行定位效果

    程序中为了更美观会自动去掉新table上面和下面的边框,包括frame和style的: Code if(this._oTable.border &gt; 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable...

    html标签库大全集

    &lt;table cellpadding=""&gt; 设置表格格子边框与其内部内容之间空间的大小 &lt;table width=""&gt; 设置表格的宽度。用绝对像素值或总宽度的百分比 &lt;table align=""&gt; 设置表格格子的水平对齐方式(left,center,right,justify)...

    table点击表头排序

    //&lt;table border="0" cellspacing="0" cellpadding="5" class="odTable" id="idTable"&gt; // // // &lt;td align="center"&gt;&lt;span id="idNum"&gt;ID&lt;/span&gt;&lt;/td&gt; // &lt;td&gt;&nbsp;名称&lt;/span&gt; / 类型&lt;/span&gt;&lt;/td&gt; // ...

    Asp.net 导出Word 可直接导出Html源码

    很实用的导出word源码,...例如: &lt;style type="text/css"&gt; table { border:1px solid red; border-collapse:collapse;... &lt;table cellpadding="0" cellspacing="0"&gt; 我是来测试的 &lt;/table&gt; &lt;/div&gt;

    C# dt拼接成html的table以及有合计.pdf

    StringBuilder Content = new StringBuilder(); Content.Append("Dear ... &lt;table cellspacing="0" width='100%' bordercolordark="white" cellpadding="0" align="center" bordercolorlight="#cccccc" border="1"&gt;

    使用HTML开发商业网站-table标签属性课件.pptx

    cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值(默认为1像素) width 设置表格的宽度 像素值 height 设置表格的高度 像素值 align 设置表格在网页中的水平对齐方式 left、center、right bgcolor ...

Global site tag (gtag.js) - Google Analytics