Relleno y espaciado de tablas HTML

Las tablas HTML pueden ajustar el relleno dentro de las celdas y también el espacio entre las celdas.

Relleno de celdas

El relleno de celda es el espacio entre los bordes de la celda y el contenido de la celda. De forma predeterminada, el relleno se establece en 0. Para agregar relleno en las celdas de la tabla, usa la propiedad CSS padding.

Ejm

th, td {
  padding: 15px;
}

Para agregar relleno solo sobre el contenido, usa la propiedad padding-top. Y los otros lados con las propiedades padding-bottom, padding-left y padding-right.

Ejm

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

Tabla HTML – Espaciado de celdas

El espacio entre celdas es el espacio entre cada celda. De forma predeterminada, el espacio se establece en 2 píxeles. Para cambiar el espacio entre las celdas de la tabla, usa la propiedad border-spacing de CSS en el elemento table.

Ejm

table {
  border-spacing: 30px;
}