Usar relleno de celda en la tabla en CSS

1. Utilizar las propiedades padding y border-spacing para el relleno y el espaciado de celdas en CSS
2. Utilice la propiedad border-spacing para especificar el espaciado vertical y horizontal en CSS

Este artículo presenta el concepto de relleno de celda y espaciado de celda con las formas de lograrlo en CSS.

Utilizar las propiedades padding y border-spacing para el relleno y el espaciado de celdas en CSS

El propósito del relleno de celda es proporcionar los espacios desde el borde de la celda hasta el contenido de la celda. Podemos usar la propiedad padding en CSS para especificar el padding de una celda. La propiedad padding es una forma abreviada de representar el padding superior, derecho, inferior e izquierdo. Podemos seleccionar las celdas de una tabla con selectores CSS y usar la propiedad padding sobre ellas.

Asimismo, el propósito del espaciado de celdas es proporcionar los espacios entre las celdas adyacentes. Podemos usar la propiedad CSS border-spacing para especificar el espacio entre el borde de las celdas vecinas. Sin embargo, esta propiedad solo funciona cuando la propiedad border-collapse está configurada como separate. Esto significa que no podemos utilizar la propiedad border-spacing cuando establecemos border-collapse en collapse. El valor separate es el valor predeterminado de la propiedad border-collapse.

La tabla HTML normal sin relleno de celda y espaciado de celda es equivalente al siguiente CSS aplicado. El border-collapse:collapse implica que las fronteras de las celdas adyacentes se fusionan en una. El padding:0px no se parece al padding en las celdas. Se parece al comportamiento predeterminado de una tabla.

table {
    border-collapse:collapse;
}

td {
    padding:0px;
} 

Por ejemplo, cree una tabla HTML con los títulos Nombre, Dirección y Edad. Llena la tabla con algunos valores. La etiqueta <td> </td> representa los datos de la tabla. En CSS, seleccione la etiqueta <table> y establezca border-spacing en 5px. A continuación, seleccione la etiqueta <td> y establezca padding en 5px.

Por lo tanto, creamos un relleno de celda de 5px desde los cuatro lados del texto. También creamos un espacio de 5px entre los bordes de cada celda de la tabla. Aprendimos cómo lograr el relleno de celdas y el espaciado de celdas en CSS.

Código de ejemplo:

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>

table {
    border-spacing: 5px;
}
td {
    padding: 5px;
}

Utilice la propiedad border-spacing para especificar el espaciado vertical y horizontal en CSS

Podemos utilizar la propiedad border-spacing para especificar el espaciado horizontal y vertical entre los bordes de las celdas de la tabla. En el ejemplo anterior, aplicamos el espaciado horizontal. Aquí aplicaremos ambos espaciamientos. Podemos especificar dos valores para la propiedad border-spacing. El primero se asemeja al espaciado horizontal y el segundo se asemeja al espaciado vertical. Podemos aplicar este método en la tabla creada anteriormente.

Por ejemplo, seleccione la etiqueta table y establezca border-spacing en 8px y 5px. Creará el espaciado horizontal de 8px y el espaciado vertical de 5px.

Código de ejemplo:

table {
    border-spacing:8px 5px;
}
td {
    padding: 5px;
}

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>