HTML <table> cellpadding 属性

在 HTML 中，<table> 元素用于创建表格，而cellpadding 属性则用来控制单元格内容与单元格边框之间的距离。在本文中，我将详细介绍cellpadding属性的用法以及如何在实际项目中应用它。

什么是cellpadding属性？

cellpadding属性用于设置表格单元格中内容与单元格边框之间的空间。它可以接受一个非负整数值，用来指定单元格内部的填充空间大小。cellpadding属性可以应用于整个表格，也可以单独应用于某个单元格或某一行/列。

如何使用cellpadding属性？

要在<table>元素中应用cellpadding属性，只需在<table>标签中添加cellpadding属性并设置其值即可。例如：

// www.javascriptcn.com code example
<table cellpadding="10">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

在上面的示例中，我们将cellpadding属性设置为10，这意味着每个单元格的内容与边框之间将有10px的填充空间。

为不同的单元格应用不同的cellpadding值

除了在整个表格上应用统一的cellpadding值外，我们还可以针对单个单元格或单行/列应用不同的cellpadding值。这可以通过在<td>或<tr>标签中添加cellpadding属性来实现。例如：

// www.javascriptcn.com code example
<table>
  <tr>
    <td cellpadding="5">单元格1</td>
    <td cellpadding="10">单元格2</td>
  </tr>
  <tr>
    <td cellpadding="15">单元格3</td>
    <td cellpadding="20">单元格4</td>
  </tr>
</table>

在上面的示例中，我们为每个单元格指定了不同的cellpadding值，分别为5px、10px、15px和20px。

总结

通过使用cellpadding属性，我们可以控制表格单元格中内容与边框之间的空间，从而使表格在视觉上更具吸引力并提高可读性。在实际项目中，根据设计需求和用户体验考虑，合理地运用cellpadding属性将为我们的网页带来更好的展示效果。