HTML表格单元格内边距|极客教程

HTML表格单元格内边距

在HTML中，表格是一个常用的元素，用来展示数据。在表格中，单元格的内边距(padding)是指单元格内部内容与单元格边框之间的距离。通过设置单元格的内边距，可以调整单元格内部内容与单元格边框之间的间距，从而改变表格的展示效果。

设置单元格内边距

可以通过CSS样式来设置表格单元格的内边距。CSS属性padding用于设置元素的内边距，可以用来设置单元格的内边距。具体的内边距值可以设置为固定值或者百分比值。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  padding: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格单元格内边距

在上面的示例代码中，我们设置了表格单元格的内边距为10像素，这样单元格内部的内容与单元格边框之间就会有10像素的距离。

分别设置单元格的内边距

除了统一设置所有单元格的内边距外，还可以分别设置每个单元格的内边距。可以通过分别设置padding-top、padding-right、padding-bottom和padding-left属性来实现。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid black;
}
.cell1 {
  padding-top: 20px;
  padding-bottom: 10px;
}
.cell2 {
  padding-right: 30px;
  padding-left: 15px;
}
</style>
</head>
<body>

<table>
  <tr>
    <td class="cell1">单元格1</td>
    <td class="cell2">单元格2</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格单元格内边距

在上面的示例代码中，我们给单元格1设置了上边距为20像素，下边距为10像素，给单元格2设置了右边距为30像素，左边距为15像素。

使用百分比值设置内边距

除了使用固定值来设置内边距外，还可以使用百分比值来设置内边距。百分比值相对于父元素的宽度进行计算。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 50%;
}
td {
  padding: 5%;
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格单元格内边距

在上面的示例代码中，我们给单元格设置了内边距为宽度的5%，这样无论表格的宽度如何变化，内边距都会根据表格的宽度进行调整。

组合使用内边距和外边距

在设计网页布局时，往往会同时使用内边距和外边距来调整元素之间的距离。内边距用来调整元素内部内容与边框之间的距离，而外边距用来调整元素与其他元素的距离。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px;
}
td {
  padding: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格单元格内边距