CSS表格的cellpadding属性|极客教程

CSS表格的cellpadding属性

在设计网页时，表格是一种常用的排版元素，用于展示数据或布局信息。在HTML中，我们可以使用<table>标签来创建表格，而在CSS中，我们可以通过一些属性来美化表格的样式，其中包括cellpadding属性。

什么是cellpadding?

cellpadding是CSS中用来设置表格单元格内容与单元格边框之间的空白距离的属性。通过设置cellpadding，我们可以控制表格单元格内容与单元格的内边框之间的距离，使表格更具有美观性和可读性。

如何使用cellpadding?

cellpadding属性可以直接应用在<table>标签上，也可以通过CSS样式表来设置。下面是两种使用方式的示例：

直接在`<table>`标签中设置`cellpadding`属性

<table cellpadding="10">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

在上面的示例中，通过在<table>标签中设置cellpadding="10"，我们给表格的所有单元格都添加了10px的padding。

使用CSS样式表设置`cellpadding`属性

table {
  cellpadding: 10px;
}

<table class="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

在上面的示例中，我们通过CSS样式表来设置表格的cellpadding属性，为拥有myTable类的表格添加了10px的padding。

实际应用

下面以一个简单的示例来演示cellpadding的具体效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Table Cellpadding</title>
  <style>
    table {
      border-collapse: collapse;
    }
    table td, table th {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </table>
</body>
</html>

在这个示例中，我们设置了单元格的border为1px黑色实线，padding为10px，这样就会在单元格内容和边框之间形成一个10px的空白间隙，让表格更加美观。