¿Cómo establecer el relleno y el espaciado de las celdas de una tabla con CSS?

Mateo G. -

Problema: Ajustar el espaciado de celdas en tablas con CSS

Controlar el espaciado entre y dentro de las celdas es un desafío al diseñar tablas HTML. CSS ofrece métodos para ajustar el relleno y el espaciado de las celdas, pero saber qué propiedades usar y cómo aplicarlas puede ser complicado.

Soluciones CSS para el relleno de celdas de tabla

Uso de la propiedad Padding

Para añadir relleno a las celdas de tabla con CSS, usa la propiedad padding:

td, th {
    padding: 10px;
}

Esto añade 10 píxeles de relleno a todos los lados de cada celda de la tabla. También puedes establecer diferentes valores de relleno para cada lado:

td, th {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
}

O usar la forma abreviada:

td, th {
    padding: 5px 10px; /* 5px para arriba y abajo, 10px para izquierda y derecha */
}

Ejemplo: Relleno responsive

Para tablas responsive, considera usar unidades relativas como em o % para el relleno. Esto permite que el relleno se ajuste con el tamaño del texto o el ancho del contenedor:

td, th {
    padding: 0.5em 2%;
}

Selección de celdas específicas

Para añadir relleno a celdas de tabla específicas, selecciona los elementos <td> y <th> por separado:

td {
    padding: 8px;
}

th {
    padding: 12px;
}

Esto aplica 8 píxeles de relleno a las celdas de datos y 12 píxeles a las celdas de encabezado.

Para mayor control, usa clases para aplicar relleno personalizado:

.custom-padding {
    padding: 15px 20px;
}

Luego en tu HTML:

<td class="custom-padding">Contenido</td>

Este método te permite añadir diferentes rellenos a celdas específicas o grupos de celdas en tu tabla.

Técnicas CSS para el Espaciado de Celdas en Tablas

Uso de la Propiedad Border-Spacing

La propiedad border-spacing en CSS establece el espacio entre celdas de una tabla. Funciona en el elemento <table> y afecta a todas las celdas de la tabla. La sintaxis básica es:

table {
    border-spacing: 10px;
}

Esto añade 10 píxeles de espacio entre todas las celdas. También puedes establecer valores diferentes para el espaciado horizontal y vertical:

table {
    border-spacing: 5px 10px;
}

Esto crea 5 píxeles de espaciado horizontal y 10 píxeles de espaciado vertical entre celdas.

Ejemplo: Espaciado de Bordes Responsivo

Para diseños responsivos, considera usar unidades relativas como em o rem para border-spacing:

table {
    border-spacing: 0.5em 1em;
}

Esto permite que el espaciado se adapte a diferentes tamaños de pantalla y configuraciones de fuente.

La Propiedad Border-Collapse

La propiedad border-collapse controla cómo se muestran los bordes de la tabla. Tiene dos valores principales:

table {
    border-collapse: separate;
}

Con border-collapse: separate, cada celda mantiene sus propios bordes, y la propiedad border-spacing funciona. Este es el comportamiento predeterminado.

table {
    border-collapse: collapse;
}

Cuando se establece en collapse, los bordes de celdas adyacentes se combinan en un solo borde, y border-spacing no funciona. Esto es útil para crear tablas sin espacios entre celdas.

Para usar border-spacing, debes establecer border-collapse en separate:

table {
    border-collapse: separate;
    border-spacing: 5px;
}

Esta combinación te permite controlar el espacio entre celdas mientras mantienes los bordes individuales de cada celda.