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.
Hola | Hola | Hola |
Hola | Hola | Hola |
Hola | Hola | Hola |
Hola | Hola | Hola |
Hola | Hola | Hola |
Hola | Hola | Hola |
Tabla HTML - 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, use la padding
propiedad CSS:
Ejemplo
th, td
{
padding: 15px;
}
Para agregar relleno solo sobre el contenido, use la padding-top
propiedad.
Y los otros lados con las propiedades padding-bottom
, padding-left
y padding-right
:
Ejemplo
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, use la
border-spacing
propiedad CSS en el table
elemento:
Ejemplo
table
{
border-spacing:
30px;
}