able表格中的cellpadding和cellspacing属性有什么区别

admin
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买

温馨提示:这篇文章已超过525天没有更新,请注意相关的内容是否还可用!

我们在用到table表格时,有的代码编辑器自动给生成的table表格加上Cellpadding和Cellspacing属性,通常我们现在很少使用Cellpadding和Cellspacing属性了,都会删除掉。


Cellpadding和Cellspacing属性是给table表格单元格加间隔距离的,一个是外边距,一个是内边距,很多人容易搞混,或者不清楚Cellpadding和Cellspacing属性是干嘛的,执刀人就给大家讲讲它们之间的区别,希望对大家有所帮助。


Cellpadding属性

在内容和外围边界之间设置单元格空间的属性称为cellpadding,换句话说,通过cellpadding属性管理单元格所围绕的内容与单元格边界之间的距离。此距离的单位可以隐含在HTML中的像素或百分比。


根据用户的需要,cellpadding属性值也可以是0值。它用于将文本彼此分开,从而改善外观。


简单示例:


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Cellpadding属性的简单示例</title>

<style>

table{

font-size: 20px;

width: 100%;

text-align: center;

}

td {background-color:lavender;}

</style>

</head>

<body>

<table border = "2" cellpadding = "20">

<tbody>

<tr><td>内容</td><td>内容</td><td>内容</td></tr>

<tr><td>内容</td><td>内容</td><td>内容</td></tr>

<tr><td>内容</td><td>内容</td><td>内容</td></tr>

</tbody>

</table>

</body>

</html>

输出:


内容 内容 内容

内容 内容 内容

内容 内容 内容

Cellspacing属性

Cellspacing属性可以控制表格中单个单元格之间的距离。通过使用此属性,设计人员可以轻松地改变不同相邻单元格边缘之间的空间。


Cellspacing属性主要用于网页设计。不同的语言对于cellspacing具有完全不同的语法,例如在CSS中使用“border-spacing”属性,而在HTML中使用“cellspacing”。


简单示例:


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Cellspacing属性的简单示例</title>

<style>

table{

font-size: 20px;

width: 100%;

text-align: center;

}

td {background-color:lavender;}

</style>

</head>

<body>

<table border = "2" cellspacing = "20">

<tbody>

<tr><td>内容</td><td>内容</td><td>内容</td></tr>

<tr><td>内容</td><td>内容</td><td>内容</td></tr>

<tr><td>内容</td><td>内容</td><td>内容</td></tr>

</tbody>

</table>

</body>

</html>

输出:


内容 内容 内容

内容 内容 内容

内容 内容 内容


文章版权声明:除非注明,否则均为执刀人的工具库原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (暂无评论,218人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码