cellpadding与cellspacing

最新推荐文章于 2023-11-02 09:32:48 发布
最新推荐文章于 2023-11-02 09:32:48 发布
阅读量160 收藏
点赞数
文章标签： xhtml javascript ViewUI
本文详细介绍了如何通过设置cellpadding和cellspacing属性调整表格单元格间距，并运用jQuery实现表格行的动态样式变化，包括背景色和字体颜色的交替显示。通过实例展示了在HTML和CSS中对表格进行美化和互动操作的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、cellpadding：边距指的是表格的单元格的内容与单元格边界之间空白距离的大小。

2、cellspacing：可设置或返回在表格中的单元格之间的空白量（表格中各个单元格之间的距离）（以像素为单位）。

3、实例

（1）未使用cellpadding与cellspacing

<!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" />
<title>祖先后代选择器</title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<style type="text/css">
   body{
          width:100%;
	  height:100%;
	  font-size:18px;
	  }
   .tab{
          width:1280px;
	  height:500px;
          text-align:center;
	  background-color:#CCFFFF;
	  border:1px solid #660099;
	  padding-left:20px;
	  }
    tr th{
	  color:#FFFFFF;
	  background-color:#000000;
	  border: 1px solid #CC0066;
	  }
    tr td{
	  border: 1px solid #FF0000;
	  }
</style>
<script type="text/javascript">
    $(function(){
	    //设置button按钮距离表格的距离
	    $("form input").css("margin-top","20px");
		//设置button字体的粗细，运用到祖先后代选择器
		$("form input").css("font-weight","bold");
		//设置input里的宽度，运用到祖先后代选择器
		$("form input").css("width","140px;");
		//button点击事件
		$("input[type='button']").click(function(){
		     //实现偶数行背景色变色
		     $("tr:even").css("background-color","#00DD00");
			 //实现偶数行字体变色
			 $("tr:even").css("color","#FF0000");
		});
	});
</script>
</head>

<body>
   <form name="form" style="text-align:center;">
      <table class="tab">
	     <tr>
		   <th>书号</th>
		   <th>书名</th>
		   <th>数量</th>
		   <th>作者</th>
		   <th>单价</th>
		   <th>总价</th>
		 </tr>
		 <tr id="tr_td">
		   <td>CN-2312</td>
		   <td>Web开发</td>
		   <td>20</td>
		   <td>赵钱孙</td>
		   <td>50.00</td>
		   <td>1000.00</td>
		 </tr>
		 <tr>
		   <td>CN-2313</td>
		   <td>C++程序设计</td>
		   <td>100</td>
		   <td>李华强</td>
		   <td>40.00</td>
		   <td>4000.00</td>
		 </tr>
		 <tr>
		   <td>CN-2321</td>
		   <td>Java程序设计</td>
		   <td>200</td>
		   <td>武德成</td>
		   <td>30.00</td>
		   <td>6000.00</td>
		 </tr>
		 <tr>
		   <td>CN-2398</td>
		   <td>JQuery</td>
		   <td>50</td>
		   <td>赵钱孙</td>
		   <td>50.00</td>
		   <td>2500.00</td>
		 </tr>
		  <tr>
		   <td>CN-2328</td>
		   <td>Java高级编程</td>
		   <td>200</td>
		   <td>武德成</td>
		   <td>30.00</td>
		   <td>6000.00</td>
		 </tr>
		 <tr>
		   <td>CN-2358</td>
		   <td>JQuery实战</td>
		   <td>50</td>
		   <td>赵小孙</td>
		   <td>50.00</td>
		   <td>2500.00</td>
		 </tr>
		  <tr>
		   <td>CN-1328</td>
		   <td>Java编程</td>
		   <td>200</td>
		   <td>魏忠贤</td>
		   <td>30.00</td>
		   <td>6000.00</td>
		 </tr>
		 <tr>
		   <td>CN-4358</td>
		   <td>JQuery基础教程</td>
		   <td>50</td>
		   <td>赵小孙</td>
		   <td>50.00</td>
		   <td>2500.00</td>
		 </tr>
		  <tr>
		   <td>CN-4568</td>
		   <td>JSP实例开发</td>
		   <td>200</td>
		   <td>李佳後</td>
		   <td>30.00</td>
		   <td>6000.00</td>
		 </tr>
		 <tr>
		   <td>CN-6988</td>
		   <td>Servlet</td>
		   <td>50</td>
		   <td>李玉华</td>
		   <td>50.00</td>
		   <td>2500.00</td>
		 </tr>
	  </table>
	  <input type="button" id="click" name="click" value="点击"/>
   </form>
</body>
</html>
（2）未使用时示意图


（3）使用cellpadding与cellspacing

<!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" />
<title>祖先后代选择器</title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<style type="text/css">
   body{
          width:100%;
	  height:100%;
	  font-size:18px;
	  }
   .tab{
          width:1280px;
	  height:500px;
          text-align:center;
	  background-color:#CCFFFF;
	  border:1px solid #660099;
	  padding-left:20px;
	  }
    tr th{
	  color:#FFFFFF;
	  background-color:#000000;
	  border: 1px solid #CC0066;
	  }
    tr td{
	  border: 1px solid #FF0000;
	  }
</style>
<script type="text/javascript">
    $(function(){
	    //设置button按钮距离表格的距离
	    $("form input").css("margin-top","20px");
		//设置button字体的粗细，运用到祖先后代选择器
		$("form input").css("font-weight","bold");
		//设置input里的宽度，运用到祖先后代选择器
		$("form input").css("width","140px;");
		//button点击事件
		$("input[type='button']").click(function(){
		     //实现偶数行背景色变色
		     $("tr:even").css("background-color","#00DD00");
			 //实现偶数行字体变色
			 $("tr:even").css("color","#FF0000");
		});
	});
</script>
</head>

<body>
   <form name="form" style="text-align:center;">
      <table class="tab" cellpadding="0" cellspacing="0">
	     <tr>
		   <th>书号</th>
		   <th>书名</th>
		   <th>数量</th>
		   <th>作者</th>
		   <th>单价</th>
		   <th>总价</th>
		 </tr>
		 <tr id="tr_td">
		   <td>CN-2312</td>
		   <td>Web开发</td>
		   <td>20</td>
		   <td>赵钱孙</td>
		   <td>50.00</td>
		   <td>1000.00</td>
		 </tr>
		 <tr>
		   <td>CN-2313</td>
		   <td>C++程序设计</td>
		   <td>100</td>
		   <td>李华强</td>
		   <td>40.00</td>
		   <td>4000.00</td>
		 </tr>
		 <tr>
		   <td>CN-2321</td>
		   <td>Java程序设计</td>
		   <td>200</td>
		   <td>武德成</td>
		   <td>30.00</td>
		   <td>6000.00</td>
		 </tr>
		 <tr>
		   <td>CN-2398</td>
		   <td>JQuery</td>
		   <td>50</td>
		   <td>赵钱孙</td>
		   <td>50.00</td>
		   <td>2500.00</td>
		 </tr>
		  <tr>
		   <td>CN-2328</td>
		   <td>Java高级编程</td>
		   <td>200</td>
		   <td>武德成</td>
		   <td>30.00</td>
		   <td>6000.00</td>
		 </tr>
		 <tr>
		   <td>CN-2358</td>
		   <td>JQuery实战</td>
		   <td>50</td>
		   <td>赵小孙</td>
		   <td>50.00</td>
		   <td>2500.00</td>
		 </tr>
		  <tr>
		   <td>CN-1328</td>
		   <td>Java编程</td>
		   <td>200</td>
		   <td>魏忠贤</td>
		   <td>30.00</td>
		   <td>6000.00</td>
		 </tr>
		 <tr>
		   <td>CN-4358</td>
		   <td>JQuery基础教程</td>
		   <td>50</td>
		   <td>赵小孙</td>
		   <td>50.00</td>
		   <td>2500.00</td>
		 </tr>
		  <tr>
		   <td>CN-4568</td>
		   <td>JSP实例开发</td>
		   <td>200</td>
		   <td>李佳後</td>
		   <td>30.00</td>
		   <td>6000.00</td>
		 </tr>
		 <tr>
		   <td>CN-6988</td>
		   <td>Servlet</td>
		   <td>50</td>
		   <td>李玉华</td>
		   <td>50.00</td>
		   <td>2500.00</td>
		 </tr>
	  </table>
	  <input type="button" id="click" name="click" value="点击"/>
   </form>
</body>
</html>
（4）使用后的示意图



iteye_8264
关注
Cellpadding和Cellspacing之间的区别
lin123_00的博客
05-10 9546
Cellpadding和Cellspacing是table表格中使用的属性，可以设置table表格单元格中的空白，是两个有助于控制网页中表格的样式和布局的属性。那么它们之间有什么区别？下面本篇文章就来带大家简单比较一下，介绍Cellpadding和Cellspacing之间的区别，希望对大家有所帮助。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） Cellpadding属性 在内容和外围边界之间设置单元格空间的属性称为cellpadding..
border为1px的table 以及 table中cellspacing、cellpadding的css替代写法
u014686861的专栏
11-27 3717
设置Table的细边框通常有这么三种方式（border为1px的table）：   （一）第一种方法 1、设置边框的BORDER=0 、cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。这个方法有些邪气，看似不太正宗，但是也能达到效果，条条大路通罗马嘛！   （二）第二种方法   2、设置BORDER=0 ，再通过
cellspacing和cellpadding的区别
热门推荐
qq_42309685的博客
06-30 1万+
cellspacing和cellpadding的区别 1.cellspacing表示各单元格之间的空隙 2.cellpadding表示单元格内容与单元格边界之间的距离 上代码： CSS部分 <style> table td{ height: 50px; width: 200px; } </style> body部分 <body> //表格1 <tab...
表格的cellpadding与cellspacing两者区别介绍
weixin_33980459的博客
03-01 957
标题中的两个属性在表格中比较常用，但是有很多初学者可能会它们了解的不够精准，下面就通过代码实例介绍一下它们两者的作用和区别，希望能够给需要的朋友带来一定的帮助。 1.cellpadding: 看它的名称就知道它和padding有点类似。 它是用来设置单元格中文本内容和边框之间的距离。 2.cellspacing: cell是单元格的意思，那么从字面意思是...
HTML cellpadding与cellspacing属性图文详解
09-28
总结来说，`cellpadding`和`cellspacing`是HTML表格布局中两个非常实用的属性，它们分别控制单元格内容与边框的距离以及单元格之间的间隔。了解并熟练掌握这两个属性，能够帮助我们更好地创建美观、清晰的表格，提升...
JS动态修改表格cellPadding和cellSpacing的方法
10-24
主要介绍了JS动态修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
IE6/7中使用setAttribute设置table的cellpadding和cellspacing的Bug
12-10
复制代码代码如下: table { border-collapse:...注意cellSpacing和cellPadding中间的 S 和 P 都要是大写的。 方式2，setAttribute 复制代码代码如下: table.setAttribute(‘cellspacing’,’10’); table.setAttribu
HTML学习笔记
最新发布
hmz856的博客
11-02 1298
是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。是指从自身边框到另一个容器边框之间的距离，就是容器外距离。样式，指在页面上位置相邻的两个元素之间的距离关系。是目标元素和目标上方的元素之间的距离，是目标元素和其左侧的元素之间的距离。单元格中的内容与单元格边缘的距离。样式，指元素内部的空白占据的空间。答：这个是对你的背景图片定位，还能设置图片，背景，定位等。是元素布局之间的内部间距；之间的距离，已不推荐使用。占用的位置是一行，如果两个。标签，那它们是连在一行了。的内部的空白占据的空间。
cellpadding 和 cellspacing
saber_H的博客
06-16 957
这两个参数都是html中table标签的参数。 cellpadding 是边框与其内容的间隙大小； cellspacing 是边框与边框之间的间隙大小；
在 CSS 中设置 cellpadding 和 cellspacing？
HuntsBot的博客
12-17 2847
在 HTML 表格中，cellpadding 和 cellspacing 可以这样设置：如何使用 CSS 实现相同的功能？
cellpadding与cellspacing的区别
互联网
12-03 606
单元格(cell) -- 表格的内容 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离 引用网址:http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspac...
cellpadding 和cellspacing区别
HertzDL的博客
07-03 1185
一.cellspacing cellspacing属性用来指定表格各单元格之间的空隙 下面来看两张图 第一个表格的代码为 第二个表格的代码为 可以看出这两个代码最大的也是惟一的区别就是cellspacing的值不同 cellpadding cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小 ...
table中cellspacing和cellpadding的区别
CapZhaot
09-03 1万+
在table中我们经常使用cellspacing和cellpadding来增加单元格之间的间距,二者起到的效果貌似差不多,但是他们实现的方式确实不一样的,下面看一下它们之间的区别吧!cellpadding: 表示单元格(<td>)内边距到其内容之间的距离看下图: 绿色表示td的背景色,也就是表示td的大小, 1001表示td中的内容.图中标注的10px就是cellpadding设置的距离.<tabl
cellpadding_在CSS中设置cellpadding和cellspacing
cumt951045的博客
07-14 1774
cellpaddingIntroduction: 介绍： It is not unknown anymore that now and then we make use of tables in our web page or website, therefore we all are familiar with how to create tables or grids in our web...
html5中不再支持table的cellspacing和cellpadding属性
weixin_30511039的博客
05-04 1152
如果你现在开始用html5的声明来写页面时，你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。具体原因是在html5中table标签的这两个属性已经被移除，需要定义边框之类的时应该使用css的写法。 具体实现如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1...
cellpadding和cellspacing
03-16
cellpadding指的是单元格内部与单元格边框之间的距离，可以通过设置该属性来控制单元格内部内容与边框之间的间距。 cellspacing指的是单元格之间的距离，可以通过设置该属性来控制单元格之间的间距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值