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 不能少,否则看不到效果

相关文章推荐

cellspacing和cellpadding的区别

  • 2014年07月08日 22:55
  • 39KB
  • 下载

cellpadding和cellspacing属性来控制表格边框的间距。

巢(cell) -- 表格的内容 巢补白(表格填充)(cellpadding) -- 代表巢外面的一个距离,用于隔开巢与巢空间巢空间(表格间距)(cellspacing) -- 代表表格边框与巢补白的...

html 表格属性cellspacing、cellpadding

cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字,表示单元格间隙所占的像素点数。  我们来看下面的两个表格:     ...

border为1px的table 以及 table中cellspacing、cellpadding的css替代写法

设置Table的细边框通常有这么三种方式(border为1px的table):   (一)第一种方法 1、设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的...

表格属性cellspacing、cellpadding

有时候我们需要用表格边框来区分各部分内容,若将表格边框宽度设置为“1”,又显得过于突出,影响整个页面的美观,怎么办呢?我们来看看下面两个表格以及它们的代码(注意红色部分代码): ...

表格(table)属性cellspacing、cellpadding

cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字,表示单元格间隙所占的像素点数。  我们来看下面的两个表格:        上面第一个表格的单元...
  • yhawaii
  • yhawaii
  • 2011年12月12日 16:32
  • 4871

html table属性cellspacing cellpadding

html 中table标签的两个属性 cellspacing 是表示单元格之前的空间,一般table标签默认的 cellspacing=”1”, 也就是下面这种效果 ...

cellpadding与cellspacing

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

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

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

HTML基础 table标签cellspacing属性设置单元格与单元格、边框之间的距离

镇场诗:慈心积善融学习,技术誓为大家学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 ———————————————————————————————————————————————...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cellspacing和cellpadding学习
举报原因:
原因补充:

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