cellpadding_在CSS中设置cellpadding和cellspacing

cellpadding

Introduction:

介绍：

It is not unknown anymore that now and then we make use of tables in our web page or website, therefore we all are familiar with how to create tables or grids in our website or web page but there are times when we want to adjust the spacing between the cells of the tables or grids and for that to happen there are some properties that should be taken into consideration. There are mainly two properties that help us achieve this task and those properties are cellpadding and cellspacing.

现在我们不时地利用网页或网站中的表格，这已经不为人知了，因此我们都熟悉如何在网站或网页中创建表格或网格，但是有时候我们想要调整间距在表格或网格的单元格之间，为了实现这一点，应该考虑一些属性。主要有两个属性可以帮助我们完成此任务，而这些属性是cellpadding和cellspacing 。

Trivia:

琐事：

Before we further move with the properties, let us understand why would we want some spacing and padding between our cells of tables or grids. We often tend to accumulate lots of data into our tables or grids and while doing so, sometimes the tables or grids become too clumsy which in turn gets incomprehensive for users. Therefore, a certain amount of padding and spacing is of utmost importance to segregate the data and by doing so the tables or grids would also appear to be much more neat and comprehensive. It is a good practice to add some spacing or padding whenever we are dealing with a large amount of data. Now let us look at the properties one by one with the help of examples.

在继续使用属性之前，让我们理解为什么我们要在表格或网格的单元格之间留一些间距和填充。我们经常倾向于将大量数据存储到表或网格中，而这样做有时会使表或网格变得过于笨拙，从而使用户变得不全面。因此，一定数量的填充和间距对于隔离数据至关重要，因此表格或表格看起来也将更加整洁和全面。在我们处理大量数据时，最好添加一些间距或填充。现在，让我们借助示例逐个查看属性。

细胞填充 (Cellpadding)

The cellpadding property in CSS is used to define the space between the cells of the table and its border. It takes only one value that is the length of the padding to be applied in pixels. Sounds pretty easy right? All you gotta do is set up the value of length and you can easily add padding between the cells of your tables or grids.

CSS中的cellpadding属性用于定义表格的单元格及其边框之间的空间。它仅采用一个值，即要应用的填充长度(以像素为单位)。听起来很容易吧？您要做的就是设置length的值，您可以轻松地在表格或网格的单元格之间添加填充。

Syntax:

句法：

    <table cellpadding = "length">

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #f40;
}
</style>
</head>
<body>
<p>Table with cellpadding</p>
<table cellpadding="10">
<tr>
<th>Name</th>
<th>Course</th>
<th>Credits</th>
</tr>
<tr>
<td>Anjali</td>
<td>DBMS</td>
<td>3</td>
</tr>
<tr>
<td>Nidhi</td>
<td>Software Eng.</td>
<td>2</td>
</tr>
</table>
</body>
</html>

Output

输出量

Set cellpadding and cellspacing in CSS (1)

In the above example, it is very clearly seen that cellpadding property is used to add padding of 10px is applied to the table cells.

在上面的示例中，可以非常清楚地看到cellpadding属性用于添加10px的填充应用于表格单元格。

单元间距 (Cellspacing)

The cellspacing property in CSS is used to define the space between the cells of the table. It takes only one value that is the length of the padding to be applied in pixels. Just like Cellpadding the Cellspacing property is no big deal when it comes to implication, similar to Cellpadding it also takes up length value to add spacing to your cells in the grids or tables.

CSS中的cellspacing属性用于定义表单元格之间的空间。它仅采用一个值，即要应用的填充长度(以像素为单位)。就像Cellpadding一样，Cellspacing属性在含义上没什么大不了的，与Cellpadding一样，它也需要使用长度值来为网格或表格中的单元格增加间距。

Syntax:

句法：

    <table cellspacing = "length">

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #f40;
}
</style>
</head>
<body>
<p>Table with cellspacing</p>
<table cellspacing="20">
<tr>
<th>Name</th>
<th>Course</th>
<th>Credits</th>
</tr>
<tr>
<td>Anjali</td>
<td>DBMS</td>
<td>3</td>
</tr>
<tr>
<td>Nidhi</td>
<td>Software Eng.</td>
<td>2</td>
</tr>
</table>
</body>
</html>

Output

输出量

Set cellpadding and cellspacing in CSS (2)

In the above example, the cellspacing of 20px is applied to the cells of the table and you can also observe how the cells are evenly spaced throughout the table.

在上述例子中，20像素的所述CELLSPACING被施加到表的单元格，并还可以观察如何将细胞均匀分布在整个表隔开。