精华内容
下载资源
问答
  • 在html中制作表格,需要用到...标签cellspacing属性定义和用法cellspacing属性指定单元格和单元格容之间的距离(以像素为单位);如果不设置cellspacing属性,则其默认值为cellspacing="2";HTML5中不支持的cellspa...

    在html中制作表格,需要用到table标签,而该标签中的cellspacing属性可设置单元格间距,下面我们就一起学习一下cellspacing属性的作用及使用方法。

    cellspacing属性指定单元格和单元格容之间的距离(以像素为单位);

    如果不设置cellspacing属性,则其默认值为 cellspacing="2";

    HTML5中不支持

    cellpadding与cellspacing的区别

    cellspacing是指单元格间距,是设置单元格与单元格之间的距离。

    cellpadding是指单元格边距,也就是设置单元格内容与单元格边框的距离的属性;

    cellspacing属性值越大,单元格和单元格之间的间距也就越大。

    Markup

    下面我们设置一个单元格间距为10px的表格,演示代码如下:

    刘代码刘代码
    刘代码刘代码

    以上代码在浏览器中显示效果如下:

    8559427596675e2195f4c005e9ecaafc.png

    为了让大家更加容易明白的理解cellspacing属性设置的单元格间距,我们看看下面四种不同单元格间距效果:

    a1ff768788d2cf2546eb36ba63df8368.png

    从上图中展示的四个不同单元格间距的表格,我们可以很明显的看出cellspacing属性设置的单元格间距是怎么一回事。如果你看没有看明白,请仔细从头看看本文的内容吧。

    展开全文
  • 主要介绍了HTML cellpadding与cellspacing属性,有个演示图,相信大家看过之后就知道了,需要的朋友可以参考下
  • cellpadding 和 cellspacing

    2021-06-16 14:48:48
    这两个参数都是html中table标签的参数。 cellpadding 是边框与其内容的间隙大小; cellspacing 是边框与边框之间的间隙大小;

    注:本文是转载,网上随便看到的,具体不记得了,如有看到,联系加链接,谢谢

    这两个参数都是html中table标签的参数。

    cellpadding 是边框与其内容的间隙大小;

    cellspacing 是边框与边框之间的间隙大小;

     

     

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

    千次阅读 2019-07-08 22:13:42
    cellspacing和cellspadding区别 属性 含义 常用属性值 cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2px) cellspadding 设置单元格内容与单元格边框之间的空白距离 像素...

    cellspacing和cellspadding区别

    属性 含义 常用属性值
    cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2px)
    cellspadding 设置单元格内容与单元格边框之间的空白距离 像素值(默认为1px)

    不使用任何的cellspacing和cellspdding修饰:

    <table border="1">
    		<tr>
    			<td>公司</td>
    			<td>性质</td>
    			<td>平均薪资</td>
    		</tr>
    		<tr>
    			<td>阿里巴巴</td>
    			<td>民营企业</td>
    			<td>18k</td>
    		</tr>
    		<tr>
    			<td>工商银行</td>
    			<td>国有企业</td>
    			<td>8k</td>
    		</tr>
    	</table>

    结果如图所示: 

     

    使用cellspacing修饰,设置为0

        <table border="1" cellspacing="0">
    		<tr>
    			<td>公司</td>
    			<td>性质</td>
    			<td>平均薪资</td>
    		</tr>
    		<tr>
    			<td>阿里巴巴</td>
    			<td>民营企业</td>
    			<td>18k</td>
    		</tr>
    		<tr>
    			<td>工商银行</td>
    			<td>国有企业</td>
    			<td>8k</td>
    		</tr>
    	</table>

    发现单元格与单元格之间无间距 因为cellspcing设置为0

     

    使用cellspaddcing修饰,设置为10

        <table border="1" cellspacing="0" cellpadding="10">
    		<tr>
    			<td>公司</td>
    			<td>性质</td>
    			<td>平均薪资</td>
    		</tr>
    		<tr>
    			<td>阿里巴巴</td>
    			<td>民营企业</td>
    			<td>18k</td>
    		</tr>
    		<tr>
    			<td>工商银行</td>
    			<td>国有企业</td>
    			<td>8k</td>
    		</tr>
    	</table>

    发现单元格内容与单元格边框间距变大。

    展开全文
  • cellpadding与cellspacing

    千次阅读 2013-08-04 17:50:16
    2、cellspacing:可设置或返回在表格中的单元格之间的空白量(表格中各个单元格之间的距离)(以像素为单位)。 3、实例 (1)未使用cellpadding与cellspacing 祖先后代选择器 body{ width:100%; height:...

    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)使用后的示意图

       

    展开全文
  • cellpadding=0 cellspacing=0的css替代写法:border-collapse:collapse,喜欢优化的朋友可以参考下
  • cellspacing cellpadding

    2014-03-23 09:39:00
    <table border="1" cellspacing="300" cellpadding="100"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td&...
  • 如果你现在开始用html5的声明来写页面时,你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。具体原因是在html5中table标签的这两个属性已经被移除,需要定义边框之类的时应该...
  • 一.cellspacing cellspacing属性用来指定表格各单元格之间的空隙 下面来看两张图 第一个表格的代码为 第二个表格的代码为 可以看出这两个代码最大的也是惟一的区别就是cellspacing的值不同 cellpadding ...
  • cellspacing和cellpadding

    2017-08-02 11:36:42
    cellspacing=20: 表格单元格间距设置为 20 像素,所谓的单元格间距 cellpadding=20:表格单元边界与单元内容之间的间距设置为 20 像素 ,所谓的单元格衬距
  • 几个例子告诉你cellspacing和cellpadding的区别
  • cellspacing与cellpadding

    2016-03-30 14:14:00
    此文引用自cellpadding和cellspacing属性来控制表格边框的间距。作者:nestea 巢(cell) -- 表格的内容 巢补白(表格填充)(cellpadding) -- 代表巢外面的一个距离,用于隔开巢与巢空间 巢空间(表格...
  • 新版邮箱项目中做页签功能时碰到的。table元素的 cellpadding 和 cellspacing 属性意义不提了。它们也有对应的css解决方案。
  • 注释:请勿将该属性与 cellspacing 属性相混淆,cellspacing 属性规定的是单元之间的空间。 从实用角度出发,最好不要规定 cellpadding,而是使用 CSS 来添加内边距。 cellpadding(表格填充)–内容和单元格...
  • html中cellspacing

    2015-10-08 11:02:43
    <table border="8" cellspacing="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$10...
  • cellpadding和cellspacing的区别

    千次阅读 2018-09-20 15:24:10
    cellpadding:代表单元格边框到内容之间的距离(留白) cellspacing:用来指定表格各单元格之间的空隙。此属性的参数值是数字,表示单元格间隙所占的像素点数。...
  • Cellpadding和Cellspacing之间的区别

    千次阅读 2020-05-10 22:08:32
    Cellpadding和Cellspacing是table表格中使用的属性,可以设置table表格单元格中的空白,是两个有助于控制网页中表格的样式和布局的属性。那么它们之间有什么区别?下面本篇文章就来带大家简单比较一下,介绍...
  • 表格的单元格和单元格之间,可以设定一定的距离,这样可以...基本语法<TABLE CellSpacing=value>语法解释单元格的间距以像素为单位。文件范例:10-9.htm设定表格的单元格间距。01 <!-- ---------------------------
  • html 中table标签的两个属性 cellspacing 是表示单元格之前的空间,一般table标签默认的 cellspacing=”1”, 也就是下面这种效果 1 first 2 secon
  • CSS中表示cellpadding和cellspacing的方法

    千次阅读 2016-06-01 14:12:58
    本文和大家重点讨论一下用CSS来表示表格的cellpadding和cellspacing方法,表格的cellpadding和cellspacing我们经常会用一定的方式来清除默认样式,请看下文详细介绍。 用CSS来表示表格的cellpadding和cellspacing...
  • table中cellspacing和cellspadding的用法

    千次阅读 2018-01-15 22:56:22
    cellspacing:设置单元格之间的距离 cellspacing=6的时候   ……   cellspacing=1的时候   cellspacing=0的时候 cellspadding的效果类似css样式中的text-align的效果: …… ...
  • html之cellspacing和cellpadding

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 99,565
精华内容 39,826
关键字:

cellspacing