Cellpadding和Cellspacing之间的区别-百分百源码网

Cellpadding和Cellspacing之间的区别

发布时间：09/01 来源：未知浏览：关键词：

Cellpadding和Cellspacing是table表格中使用的属性，可以设定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>

输出：

注：较旧版本的HTML支撑cellpadding命令，但更高版本的HTML5不同意使用cellpadding，因此替换CSS用于在需要时供给雷同的格局。

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>

输出：