HTML Table Padding and Spacing

HTML provides two attributes to control the space between table cells and the space between the table border and its contents. These attributes are:

1. cellpadding: This attribute specifies the amount of space between the content of a table cell and its border. It takes a pixel or percentage value. Here’s an example:

<table cellpadding="10">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

In this example, the cellpadding attribute is set to 10 pixels, which adds 10 pixels of space between the content of each cell and its border.

2. cellspacing: This attribute specifies the amount of space between the cells of a table. It takes a pixel or percentage value. Here’s an example:

<table cellspacing="10">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

In this example, the cellspacing attribute is set to 10 pixels, which adds 10 pixels of space between each cell in the table.

It’s worth noting that these attributes are considered outdated and have been replaced by CSS. You can achieve the same effect using CSS properties like padding and border-spacing. Here’s an example:

<style>
  table {
    border-spacing: 10px;
  }
  td {
    padding: 10px;
  }
</style>
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

In this example, the border-spacing property is used to add space between the cells, and the padding property is used to add space between the cell content and its border. This approach separates the presentation of the table from its content and is considered a best practice.