cellspacing和cellpadding学习

原创 2013年12月04日 10:16:18

cell指表格的内容
cellspaceing:表格里单元格之间的距离(类似div margin 外补丁)
cellpadding:表格里单元格空白部分(类似div padding 内补丁)

 

<html>
	<head>
	
	</head>
	<body>
		<table border="1" cellspacing="10px" cellpadding="20px">
			<tr>
				<td>第一个</td>
				<td>第二个</td>
			</tr>
			<tr>
				<td>第一个</td>
				<td>第二个</td>
			</tr>
		</table>
			
		
	</body>
</html>

 

 border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示

separate:分开,默认

collapse:合并,cellspacing和cellpadding样式失效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />

<meta name="robots" content="all" />

<meta name="author" content="w3school.com.cn" />
<meta name="Copyright" content="Copyright W3school.com.cn All Rights Reserved." />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />

<link rel="stylesheet" type="text/css" href="/c3.css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<title>CSS border-collapse 属性</title>
</head>

<body class="html">
<table style="border-collapse:collapse" border="1" width="200" cellspacing="30">
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td>
	<tr>
	<tr>
		<td>21</td>
		<td>22</td>
		<td>23</td>
	<tr>
</table>

<table style="border-collapse:separate" border="1" width="200" cellspacing="30">
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td>
	<tr>
	<tr>
		<td>21</td>
		<td>22</td>
		<td>23</td>
	<tr>
</table>
</body>

 

 备注:<!DOCTYPE 不能少,否则看不到效果

cellpadding 和 cellspaceing

  • shohokuf
  • shohokuf
  • 2008年07月18日 09:51
  • 998

HTML5中没有cellspacing和cellpadding怎么办

HTML5中没有cellspacing和cellpadding怎么办1、问题背景     HTML4版本中table有cellspacing和cellpadding,但是在HTML5中没有,要使tab...
  • you23hai45
  • you23hai45
  • 2016年03月09日 21:15
  • 3863

cellpadding="0" cellspacing="0" 在CSS中的替换方法

http://www.cnblogs.com/enone/archive/2010/07/27/1786138.html table中cellspacing、cellpadding的css替...
  • dudfur
  • dudfur
  • 2013年11月25日 19:58
  • 1375

CSS中cellpadding和cellspacing的代替方法

一、cellpadding 在CSS中,table, th, td{padding:0;}效果等同于cellpadding="0″。 二、cellspacing cellspacing="0″等...
  • huang_xw
  • huang_xw
  • 2012年02月29日 13:34
  • 10319

table中cellpadding="0" cellspacing="0" border="0"属性CSS的定义方法

以前都不知道用CSS怎么定义TABLE里面cellpadding和cellspacing,害得没一个都要写,今天无意中发现可以这样在CSS里面直接定义了例如:一个这样的表格:      TEXT  ...
  • kforce
  • kforce
  • 2006年09月28日 09:16
  • 3849

cellpadding与cellspacing的区别

单元格(cell) -- 表格的内容单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间单元格间距(表格间距)(cellspacing) -- ...
  • u012903992
  • u012903992
  • 2013年12月03日 00:06
  • 712

cellpadding与cellspacing

1、cellpadding:边距指的是表格的单元格的内容与单元格边界之间空白距离的大小。 2、cellspacing:可设置或返回在表格中的单元格之间的空白量(表格中各个单元格之间的距离)(以像素为...
  • qq_27918787
  • qq_27918787
  • 2016年10月06日 16:49
  • 363

html5中不再支持table的cellspacing和cellpadding属性

如果你现在开始用html5的声明来写页面时,你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。具体原因是在html5中table标签的这两个...
  • sinolzeng
  • sinolzeng
  • 2014年10月21日 10:37
  • 7820

table标签中cellspacing和cellpadding,border的意思?

cellspacing:指定相邻单元格边框的间距,也就是某个单元格与它上下左右相邻单元格的距离 cellpadding:指定表格单元格与内容之间的间距,也就是某个单元格内中的文字内容与该单元格的边框...
  • tiberroot
  • tiberroot
  • 2017年04月24日 10:24
  • 213

table中cellspacing和cellpadding的区别

在table中我们经常使用cellspacing和cellpadding来增加单元格之间的间距,二者起到的效果貌似差不多,但是他们实现的方式确实不一样的,下面看一下它们之间的区别吧!cellpaddi...
  • CapZhaot
  • CapZhaot
  • 2016年09月03日 16:21
  • 625
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cellspacing和cellpadding学习
举报原因:
原因补充:

(最多只允许输入30个字)