HTML表格内边距|极客教程

HTML表格内边距

在HTML中，通过使用CSS样式来设置表格的内边距是非常常见的。内边距指的是单元格内容和单元格边框之间的空间。在本文中，我们将详细介绍如何使用CSS来设置HTML表格的内边距。

使用padding属性设置表格内边距

可以通过在CSS中使用padding属性来设置表格单元格的内边距。padding属性可以为单个值，也可以为四个值分别表示上、右、下、左边距。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 10px; /* 上、右、下、左边距均为10px */
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

分别设置表格内边距

除了统一设置表格内边距外，还可以为不同的单元格分别设置不同的内边距。这可以通过为单独的td元素设置padding样式来实现。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 10px;
}
.first-cell {
  padding: 20px;
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <td class="first-cell">how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

设置上、右、下、左边距

如前所述，padding属性可以为四个值，分别表示上、右、下、左边距。这使得我们可以为每个方向上的边距设置不同的数值。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 10px 20px 30px 40px; /* 上20px、右30px、下40px、左10px */
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

使用百分比设置表格内边距

除了使用固定数值来设置表格内边距外，还可以使用百分比来指定内边距的大小。这样可以使内边距相对于单元格的宽度进行自适应调整。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 5%; /* 上、右、下、左边距为单元格宽度的5% */
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

使用em单位设置表格内边距

除了像上面的例子中使用百分比来指定内边距外，还可以使用em单位来设置内边距。em单位是相对于元素字体大小的倍数。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 1em; /* 上、右、下、左边距都为1em */
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

使用混合单位设置表格内边距

在CSS中，我们还可以使用混合单位为表格设置内边距。例如，可以将固定数值和百分比相结合来调整单元格的内边距。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 10px 5%; /* 上、下边距为10px，左、右边距为单元格宽度的5% */
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

设置表格行内边距

除了设置单元格的内边距外，还可以设置表格行的内边距。这可以通过为tr元素设置padding样式来实现。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
tr {
  padding: 20px; /* 行内边距为20px */
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

设置表格单元格内边距与边框

在CSS中，我们还可以同时设置表格单元格的内边距和边框样式。这样可以让表格看起来更加美观和整洁。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 10px;
  border: 1px solid black; /* 单元格边框为1px黑色实线 */
}
</style>
</head>
<body>

<table>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

设置表格单元格内边距与背景颜色

通过同时设置表格单元格的内边距和背景色，可以使表格看起来更加美观。背景色可以使表格单元格在有较大内边距的情况下也显得清晰。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  background-color: lightblue; /* 设置背景色为浅蓝色 */
}
</style>
</head>
<body>

<table>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

设置表格内边距与边框圆角

可以通过设置CSS的border-radius属性为表格单元格的边框添加圆角效果，与内边距结合使用可以创建出更具有现代感的表格设计。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 1px solid black;
  border-radius: 10px; /* 边框圆角半径为10px */
}
</style>
</head>
<body>

<table>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

使用内边距调整表格的整体样式

除了在单元格内设置内边距外，还可以在整个表格中使用padding样式来调整表格的整体外观。这样可以控制表格与周围元素之间的间距。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  padding: 20px; /* 表格周围的内边距为20px */
}
td {
  padding: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

使用负内边距调整表格布局

在某些情况下，可以使用负内边距来调整表格的布局。通过设置负内边距，可以让表格元素之间更紧凑地排列。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
td {
  padding: 10px;
  border: 1px solid black;
}
td + td {
  margin-left: -10px; /* 设置负内边距使单元格之间更靠近 */
}
</style>
</head>
<body>

<table>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML表格内边距

使用外边距与内边距配合设计表格

最后，我们还可以通过结合使用外边距和内边距来设计出更具有吸引力的表格样式。外边距可以控制表格与其他元素之间的距离，内边距可以增加表格内部的空间。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  margin: 20px; /* 表格外边距为20px */
}
td {
  padding: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>