Difference Between Cellpadding and Cellspacing-HTML Tutorial-php.cn

Difference Between Cellpadding and Cellspacing

青灯夜游

Release： 2019-01-05 17:45:04

Original

25231 people have browsed it

Cellpadding and Cellspacing are attributes used in table tables. They can set the blanks in table cells. They are two attributes that help control the style and layout of tables in web pages. So what's the difference between them? The following article will give you a brief comparison and introduce the differences between Cellpadding and Cellspacing. I hope it will be helpful to you.

Difference Between Cellpadding and Cellspacing

Cellpadding Property

The property that sets the cell space between the content and the outer border is called cellpadding. In other words, the distance between the cell's surrounding content and the cell's borders is managed through the cellpadding property. The units for this distance can be implicit in HTML as pixels or percentages.

According to user needs, the cellpadding attribute value can also be 0. It is used to separate text from each other, thus improving the appearance.

Simple example:

<!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>

Copy after login

Output:

Difference Between Cellpadding and Cellspacing

##Note: Older versions of HTML support the cellpadding command, But later versions of HTML5 do not allow cellpadding, so alternative CSS is used to provide the same formatting when needed.

Cellspacing property

The Cellspacing property can control the distance between individual cells in the table. By using this property, designers can easily change the space between the edges of different adjacent cells.

Cellspacing properties are mainly used in web design. Different languages have completely different syntax for cellspacing, for example using the "border-spacing" attribute in CSS and "cellspacing" in HTML.

Simple example:

<!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>

Copy after login

Output:

Summary:

The main difference between cellpadding and cellspacing is that cellpadding is used to fix the width between the edge of a cell and its content, That is, creating white space within the cell between the text and the cell border. However, cellspacing can be used to manage the space between individual cells in a table.

Difference Between Cellpadding and Cellspacing

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of Difference Between Cellpadding and Cellspacing. For more information, please follow other related articles on the PHP Chinese website!