HTML表格内边距|极客笔记

HTML表格内边距

在HTML中，我们经常会使用表格来展示数据。表格内边距（padding）是指表格内容与单元格边框之间的空白距离。通过设置内边距，我们可以让表格内容在单元格中更加美观和易读。本文将详细介绍如何在HTML表格中设置内边距。

在表格中设置内边距

在HTML中，我们可以通过padding属性来设置表格单元格的内边距。padding属性可以取值为像素（px）、百分比（%）或者其他合法的长度单位。下面是一个简单的示例代码，演示如何在表格中设置内边距为10像素：

<table>
  <tr>
    <td style="padding: 10px;">how2html.com</td>
    <td style="padding: 10px;">how2html.com</td>
  </tr>
  <tr>
    <td style="padding: 10px;">how2html.com</td>
    <td style="padding: 10px;">how2html.com</td>
  </tr>
</table>

在上面的示例中，我们为每个单元格设置了内边距为10像素。你也可以使用百分比来设置内边距，下面是一个使用百分比设置内边距的示例代码：

<table>
  <tr>
    <td style="padding: 5%;">how2html.com</td>
    <td style="padding: 5%;">how2html.com</td>
  </tr>
</table>

在这个示例中，我们为表格单元格设置了5%的内边距。

分别设置上、右、下、左内边距

除了设置统一的内边距之外，我们也可以分别设置表格单元格的上、右、下、左内边距。下面是一个示例代码，展示如何分别设置上、右、下、左内边距为10像素：

<table>
  <tr>
    <td style="padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;">how2html.com</td>
  </tr>
</table>

在这个示例中，我们分别设置了上、右、下、左内边距为10像素、20像素、30像素和40像素。

表格间距和边框间距

在HTML表格中，除了可以设置每个单元格的内边距之外，还可以通过border-spacing属性来设置表格间距和边框间距。下面是一个示例代码，演示如何设置表格的间距和边框间距为10像素：

<style>
  table {
    border-spacing: 10px; 
  }
</style>

<table style="border: 1px solid black;">
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

在这个示例中，我们通过border-spacing属性设置了表格的间距为10像素，并且给表格设置了1像素的黑色边框。