table的样式定义

table的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; }

下面我们看《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>

时间: 2024-10-11 04:55:22

table的样式定义的相关文章

Silverlight样式定义

方法一.定义在控件内部 1 <Canvas Background="Red" Height="100" HorizontalAlignment="Left" Margin="90,80,0,0" Name="canvas1" VerticalAlignment="Top" Width="200" /> 方法二.定义在控件外部 1 <UserContr

Yii框架下CDataColumn中filter应用+jeditable+pager样式定义应用实例

应用环境在Yii1.1框架下,CDataColumn的filter应用给CGridView带来了极大的方便,可以根据某一字段的值来过滤显示现有的表格数据,这是个重要的功能,可惜一来Yii的中文资料实在不够详细,二来百度出的东西重复的太多,有用的很少.参考很多英文资料后,我把自己写的实例贴出来供大家参考,如果有必要我以后还会陆续贴一些Yii文章出来. filter首先要有自己的数据源,这个可以是当前表格使用的model,也可以是其他一些array,这个实例中我使用了当前model,CGridVie

Table表格样式

样式如下: <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } </style> 运行结果:

html表单, table简单样式

2016年1月14日 11:16:54 星期四 效果图: html: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta n

JavaScript获取非行间样式/定义样式

html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="stylesheet" href="css/style.css" type="text/css"> style标签内:<style> width:100px; </style> (3)行间样式(节点style属性定义的样式)比如:<div

IOS下页面样式定义不能使用??

今天修改手机页面css时,定义的<input type="button" />样式不能显示~ 看下面的例子 wap页面: ios访问页面: 经过从网上各种查找资料,发现IOS系统默认的是原生态样式. 解决方法: 定义全局 input{ -webkit-appearance: none; } 样式就和wap页面一样了!! 使用html5日期ios <input type="datetime-local" class="datetime_lo

利用CSS进行表单样式定义

我们在表单使用过程中,常常需要控制表单样式,如表单控件长度,显示样式,提醒背景色,甚至整个表单的字体和统一样式等. 这些其实都可以通过CSS来实现,使我们的表单看起来更漂亮,1.利用DIV控制输入控件长度:    如上图,表单姓名和出生日期字段看起来长短不一,并且太长,不美观,我们可以通过DIV的CSS样式进行调整. 上面的样式,我们可以通过在字段上加入DIV标签,并且设置DIV的样式,如长度150px,显示方式为同一行显示display: inline; 这样就实现了控件统一长度的效果: 2.

CSS样式定义的优先级顺序总结

层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 < ID派生选择器 派生选择器以前叫上下文选择器,所以完整的层叠优先级是: 浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 <

各大门户网站全局CSS样式定义

1.网易 body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }li{list-style-type:none;}img{vertical-align:top;}h1,h2,