cellpadding与cellspacing

最新推荐文章于 2021-06-16 15:08:30 发布
最新推荐文章于 2021-06-16 15:08:30 发布
阅读量4.3k 收藏 2
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27918787/article/details/52744397
版权
本文介绍了HTML中表格的cellpadding和cellspacing属性，cellpadding用于设置单元格内容与边框之间的距离，cellspacing则定义了单元格之间的空隙。通过实例展示了这两个属性在表格布局中的应用，以及它们对表格视觉效果的影响。

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

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

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

3、实例

（1）未使用cellpadding与cellspacing

[html] view plain copy
⃕
print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>祖先后代选择器</title>  
  6. <script type="text/javascript" src="jquery-2.0.3.js"></script>  
  7. <style type="text/css">  
  8.    body{  
  9.           width:100%;  
  10.       height:100%;  
  11.       font-size:18px;  
  12.       }  
  13.    .tab{  
  14.           width:1280px;  
  15.       height:500px;  
  16.           text-align:center;  
  17.       background-color:#CCFFFF;  
  18.       border:1px solid #660099;  
  19.       padding-left:20px;  
  20.       }  
  21.     tr th{  
  22.       color:#FFFFFF;  
  23.       background-color:#000000;  
  24.       border: 1px solid #CC0066;  
  25.       }  
  26.     tr td{  
  27.       border: 1px solid #FF0000;  
  28.       }  
  29. </style>  
  30. <script type="text/javascript">  
  31.     $(function(){  
  32.         //设置button按钮距离表格的距离  
  33.         $("form input").css("margin-top","20px");  
  34.         //设置button字体的粗细，运用到祖先后代选择器  
  35.         $("form input").css("font-weight","bold");  
  36.         //设置input里的宽度，运用到祖先后代选择器  
  37.         $("form input").css("width","140px;");  
  38.         //button点击事件  
  39.         $("input[type='button']").click(function(){  
  40.              //实现偶数行背景色变色  
  41.              $("tr:even").css("background-color","#00DD00");  
  42.              //实现偶数行字体变色  
  43.              $("tr:even").css("color","#FF0000");  
  44.         });  
  45.     });  
  46. </script>  
  47. </head>  
  48.   
  49. <body>  
  50.    <form name="form" style="text-align:center;">  
  51.       <table class="tab">  
  52.          <tr>  
  53.            <th>书号</th>  
  54.            <th>书名</th>  
  55.            <th>数量</th>  
  56.            <th>作者</th>  
  57.            <th>单价</th>  
  58.            <th>总价</th>  
  59.          </tr>  
  60.          <tr id="tr_td">  
  61.            <td>CN-2312</td>  
  62.            <td>Web开发</td>  
  63.            <td>20</td>  
  64.            <td>赵钱孙</td>  
  65.            <td>50.00</td>  
  66.            <td>1000.00</td>  
  67.          </tr>  
  68.          <tr>  
  69.            <td>CN-2313</td>  
  70.            <td>C++程序设计</td>  
  71.            <td>100</td>  
  72.            <td>李华强</td>  
  73.            <td>40.00</td>  
  74.            <td>4000.00</td>  
  75.          </tr>  
  76.          <tr>  
  77.            <td>CN-2321</td>  
  78.            <td>Java程序设计</td>  
  79.            <td>200</td>  
  80.            <td>武德成</td>  
  81.            <td>30.00</td>  
  82.            <td>6000.00</td>  
  83.          </tr>  
  84.          <tr>  
  85.            <td>CN-2398</td>  
  86.            <td>JQuery</td>  
  87.            <td>50</td>  
  88.            <td>赵钱孙</td>  
  89.            <td>50.00</td>  
  90.            <td>2500.00</td>  
  91.          </tr>  
  92.           <tr>  
  93.            <td>CN-2328</td>  
  94.            <td>Java高级编程</td>  
  95.            <td>200</td>  
  96.            <td>武德成</td>  
  97.            <td>30.00</td>  
  98.            <td>6000.00</td>  
  99.          </tr>  
  100.          <tr>  
  101.            <td>CN-2358</td>  
  102.            <td>JQuery实战</td>  
  103.            <td>50</td>  
  104.            <td>赵小孙</td>  
  105.            <td>50.00</td>  
  106.            <td>2500.00</td>  
  107.          </tr>  
  108.           <tr>  
  109.            <td>CN-1328</td>  
  110.            <td>Java编程</td>  
  111.            <td>200</td>  
  112.            <td>魏忠贤</td>  
  113.            <td>30.00</td>  
  114.            <td>6000.00</td>  
  115.          </tr>  
  116.          <tr>  
  117.            <td>CN-4358</td>  
  118.            <td>JQuery基础教程</td>  
  119.            <td>50</td>  
  120.            <td>赵小孙</td>  
  121.            <td>50.00</td>  
  122.            <td>2500.00</td>  
  123.          </tr>  
  124.           <tr>  
  125.            <td>CN-4568</td>  
  126.            <td>JSP实例开发</td>  
  127.            <td>200</td>  
  128.            <td>李佳後</td>  
  129.            <td>30.00</td>  
  130.            <td>6000.00</td>  
  131.          </tr>  
  132.          <tr>  
  133.            <td>CN-6988</td>  
  134.            <td>Servlet</td>  
  135.            <td>50</td>  
  136.            <td>李玉华</td>  
  137.            <td>50.00</td>  
  138.            <td>2500.00</td>  
  139.          </tr>  
  140.       </table>  
  141.       <input type="button" id="click" name="click" value="点击"/>  
  142.    </form>  
  143. </body>  
  144. </html>  
（2）未使用时示意图

   
（3）使用cellpadding与cellspacing

[html] view plain copy
⃕
print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>祖先后代选择器</title>  
  6. <script type="text/javascript" src="jquery-2.0.3.js"></script>  
  7. <style type="text/css">  
  8.    body{  
  9.           width:100%;  
  10.       height:100%;  
  11.       font-size:18px;  
  12.       }  
  13.    .tab{  
  14.           width:1280px;  
  15.       height:500px;  
  16.           text-align:center;  
  17.       background-color:#CCFFFF;  
  18.       border:1px solid #660099;  
  19.       padding-left:20px;  
  20.       }  
  21.     tr th{  
  22.       color:#FFFFFF;  
  23.       background-color:#000000;  
  24.       border: 1px solid #CC0066;  
  25.       }  
  26.     tr td{  
  27.       border: 1px solid #FF0000;  
  28.       }  
  29. </style>  
  30. <script type="text/javascript">  
  31.     $(function(){  
  32.         //设置button按钮距离表格的距离  
  33.         $("form input").css("margin-top","20px");  
  34.         //设置button字体的粗细，运用到祖先后代选择器  
  35.         $("form input").css("font-weight","bold");  
  36.         //设置input里的宽度，运用到祖先后代选择器  
  37.         $("form input").css("width","140px;");  
  38.         //button点击事件  
  39.         $("input[type='button']").click(function(){  
  40.              //实现偶数行背景色变色  
  41.              $("tr:even").css("background-color","#00DD00");  
  42.              //实现偶数行字体变色  
  43.              $("tr:even").css("color","#FF0000");  
  44.         });  
  45.     });  
  46. </script>  
  47. </head>  
  48.   
  49. <body>  
  50.    <form name="form" style="text-align:center;">  
  51.       <table class="tab" cellpadding="0" cellspacing="0">  
  52.          <tr>  
  53.            <th>书号</th>  
  54.            <th>书名</th>  
  55.            <th>数量</th>  
  56.            <th>作者</th>  
  57.            <th>单价</th>  
  58.            <th>总价</th>  
  59.          </tr>  
  60.          <tr id="tr_td">  
  61.            <td>CN-2312</td>  
  62.            <td>Web开发</td>  
  63.            <td>20</td>  
  64.            <td>赵钱孙</td>  
  65.            <td>50.00</td>  
  66.            <td>1000.00</td>  
  67.          </tr>  
  68.          <tr>  
  69.            <td>CN-2313</td>  
  70.            <td>C++程序设计</td>  
  71.            <td>100</td>  
  72.            <td>李华强</td>  
  73.            <td>40.00</td>  
  74.            <td>4000.00</td>  
  75.          </tr>  
  76.          <tr>  
  77.            <td>CN-2321</td>  
  78.            <td>Java程序设计</td>  
  79.            <td>200</td>  
  80.            <td>武德成</td>  
  81.            <td>30.00</td>  
  82.            <td>6000.00</td>  
  83.          </tr>  
  84.          <tr>  
  85.            <td>CN-2398</td>  
  86.            <td>JQuery</td>  
  87.            <td>50</td>  
  88.            <td>赵钱孙</td>  
  89.            <td>50.00</td>  
  90.            <td>2500.00</td>  
  91.          </tr>  
  92.           <tr>  
  93.            <td>CN-2328</td>  
  94.            <td>Java高级编程</td>  
  95.            <td>200</td>  
  96.            <td>武德成</td>  
  97.            <td>30.00</td>  
  98.            <td>6000.00</td>  
  99.          </tr>  
  100.          <tr>  
  101.            <td>CN-2358</td>  
  102.            <td>JQuery实战</td>  
  103.            <td>50</td>  
  104.            <td>赵小孙</td>  
  105.            <td>50.00</td>  
  106.            <td>2500.00</td>  
  107.          </tr>  
  108.           <tr>  
  109.            <td>CN-1328</td>  
  110.            <td>Java编程</td>  
  111.            <td>200</td>  
  112.            <td>魏忠贤</td>  
  113.            <td>30.00</td>  
  114.            <td>6000.00</td>  
  115.          </tr>  
  116.          <tr>  
  117.            <td>CN-4358</td>  
  118.            <td>JQuery基础教程</td>  
  119.            <td>50</td>  
  120.            <td>赵小孙</td>  
  121.            <td>50.00</td>  
  122.            <td>2500.00</td>  
  123.          </tr>  
  124.           <tr>  
  125.            <td>CN-4568</td>  
  126.            <td>JSP实例开发</td>  
  127.            <td>200</td>  
  128.            <td>李佳後</td>  
  129.            <td>30.00</td>  
  130.            <td>6000.00</td>  
  131.          </tr>  
  132.          <tr>  
  133.            <td>CN-6988</td>  
  134.            <td>Servlet</td>  
  135.            <td>50</td>  
  136.            <td>李玉华</td>  
  137.            <td>50.00</td>  
  138.            <td>2500.00</td>  
  139.          </tr>  
  140.       </table>  
  141.       <input type="button" id="click" name="click" value="点击"/>  
  142.    </form>  
  143. </body>  
  144. </html>  
（4）使用后的示意图
    
Cellpadding和Cellspacing之间的区别
lin123_00的博客
05-10 9488
Cellpadding和Cellspacing是table表格中使用的属性，可以设置table表格单元格中的空白，是两个有助于控制网页中表格的样式和布局的属性。那么它们之间有什么区别？下面本篇文章就来带大家简单比较一下，介绍Cellpadding和Cellspacing之间的区别，希望对大家有所帮助。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） Cellpadding属性 在内容和外围边界之间设置单元格空间的属性称为cellpadding..
cellspacing和cellpadding的区别
07-08
几个例子告诉你cellspacing和cellpadding的区别
cellpadding与cellspacing的区别
互联网
12-03 588
单元格(cell) -- 表格的内容 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离 引用网址:http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspac...
cellpadding 和 cellspacing
saber_H的博客
06-16 942
这两个参数都是html中table标签的参数。 cellpadding 是边框与其内容的间隙大小； cellspacing 是边框与边框之间的间隙大小；
cellpadding和 cellspacing
quechao123的专栏
06-10 1061
<br />cellpadding<br />cellpadding 属性规定单元边沿与其内容之间的空白。<br /> <br />从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距。<br /> <br /> <br /><table border="8" cellpadding="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td>
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
09-25
本文将详细讨论一个特定的问题，即在IE6/7中使用JavaScript的setAttribute方法设置table的cellpadding和cellspacing属性时出现的bug。 首先，我们需要了解`cellpadding`和`cellspacing`属性。这两个属性是HTML中...
cellspacing和cellpadding
N
08-02 547
cellspacing=20: 表格单元格间距设置为 20 像素，所谓的单元格间距 cellpadding=20:表格单元边界与单元内容之间的间距设置为 20 像素 ,所谓的单元格衬距
cellpadding和CELLSPACING的区别
08-07 3136
1.cellpadding="1"单元格填充为1；CELLSPACING=“0”单元格间距为0像素2.建议写JS完成3.不清楚
cellpadding 和cellspacing区别
ccaakkee的专栏
02-22 602
cellpadding 和cellspacing区别
HTML cellpadding与cellspacing属性
qingfengxia2013的专栏
04-30 319
9.1.6 HTML cellpadding与cellspacing属性 先介绍一些概念 巢(cell) -- 表格的内容巢补白(表格填充)(cellpadding) -- 代表巢外面的一个距离,用于隔开巢与巢空间巢空间(表格间距)(cellspacing) -- 代表表格边框与巢补白的距离,也是巢补白之间的距离引用网址:http://www.dreamdu.com...
表格的cellpadding与cellspacing两者区别介绍
weixin_33980459的博客
03-01 938
标题中的两个属性在表格中比较常用，但是有很多初学者可能会它们了解的不够精准，下面就通过代码实例介绍一下它们两者的作用和区别，希望能够给需要的朋友带来一定的帮助。 1.cellpadding: 看它的名称就知道它和padding有点类似。 它是用来设置单元格中文本内容和边框之间的距离。 2.cellspacing: cell是单元格的意思，那么从字面意思是...
PHP中cellspacing,Cellpadding和Cellspacing之间的区别
weixin_39830688的博客
04-08 652
Cellpadding和Cellspacing是table表格中使用的属性，可以设置table表格单元格中的空白，是两个有助于控制网页中表格的样式和布局的属性。那么它们之间有什么区别？下面本篇文章就来带大家简单比较一下，介绍Cellpadding和Cellspacing之间的区别，希望对大家有所帮助。Cellpadding属性在内容和外围边界之间设置单元格空间的属性称为cellpadding。换句...
cellspacing和cellpadding区别
zp的博客
07-08 9088
cellspacing和cellspadding区别 属性 含义 常用属性值 cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2px) cellspadding 设置单元格内容与单元格边框之间的空白距离 像素值(默认为1px) 不使用任何的cellspacing和cellspdding修饰： <table bo...
cellpadding和cellspacing
03-16
cellpadding指的是单元格内部与单元格边框之间的距离，可以通过设置该属性来控制单元格内部内容与边框之间的间距。 cellspacing指的是单元格之间的距离，可以通过设置该属性来控制单元格之间的间距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值