Propiedades de las tablas en CSS

11. Propiedades de las tablas

Las propiedades CSS de las tablas son las que nos permiten controlar los estilos de los títulos de la tabla, el tamaño de las celdas, las filas y las columnas o espaciado entre los bordes. En la tabla 1 se muestran las propiedades de las tablas más utilizadas.

Propiedad	Descripción	Valores
caption-side	Posición del título respecto la tabla	top | bottom
table-layout	Formato de las celdas, filas y columnas	auto | fixed
border-collapse	Selección del modelo de los bordes	collapse | separate
border-spacing	Espaciado entre los bordes de celdas adyacentes	longitud
empty-cells	Visibilidad de los bordes de celdas sin contenido	show | hide

---

11.1. Caption-side

La propiedad caption-side se utiliza para controlar la ubicación del título (caption) en una tabla HTML. Cuenta con los siguientes valores:

1. top (valor predeterminado): Esto coloca el título en la parte superior de la tabla, encima del contenido de la tabla.
2. bottom: Esto coloca el título en la parte inferior de la tabla, debajo del contenido de la tabla.

Ejemplo:

.a { caption-side: bottom; }
.b { caption-side: top; }

---

11.2. Table-layout

La propiedad table-layout se utiliza para controlar cómo se distribuye el espacio y se ajusta el ancho de las columnas en una tabla HTML. Esta propiedad determina si el navegador debe calcular automáticamente los tamaños de las columnas basándose en el contenido de las celdas o si debe utilizar un diseño fijo en el que se especifica explícitamente el ancho de las columnas. Cuenta con los siguientes valores:

1. auto (valor predeterminado): Cuando table-layout se establece en «auto», el navegador calculará automáticamente el ancho de las columnas en función del contenido de las celdas. Esto significa que las columnas se ajustarán automáticamente según el contenido.
2. fixed: Cuando table-layout se establece en «fixed», el ancho de las columnas se fija y se especifica explícitamente mediante CSS. Las columnas tendrán un ancho uniforme o el ancho que se especifique para cada columna, independientemente del contenido de las celdas. Esto puede ser útil cuando se desea un diseño de tabla con columnas de ancho uniforme.

Ejemplo:

.a { table-layout: auto;} /* Columnas se ajustan al contenido*/
.b { table-layout: auto; width: 100%; } /* Columnas se ajustan al contenido y al 100% */
.c { table-layout: fixed; width: 400px; } /* Columnas con ancho fijo */

---

11.3. Border-collapse

La propiedad border-collapse se utiliza en tablas HTML para controlar cómo se comportan los bordes de las celdas adyacentes en una tabla. Esta propiedad tiene dos valores:

1. separate (valor predeterminado): Los bordes de las celdas de la tabla se separan entre sí. Cada celda tiene sus propios bordes individuales, y no se combinan ni comparten con las celdas adyacentes. Esto significa que hay un espacio entre las celdas donde se encuentran sus bordes.
2. collapse: Los bordes de las celdas de la tabla se combinan y se presentan como un solo borde común entre las celdas adyacentes. En este caso, no hay espacio entre las celdas, y los bordes de las celdas se fusionan, creando un aspecto más compacto.

Ejemplo:

.a { border-collapse: separate; } 
.b { border-collapse: collapse; } 

---

11.4. Border-spacing

La propiedad border-spacing se utiliza en tablas HTML para controlar la separación entre las celdas de la tabla cuando la propiedad border-collapse se establece en «separate» (que es su valor predeterminado). border-spacing permite definir el espacio horizontal y vertical entre las celdas adyacentes de una tabla, creando un espacio uniforme alrededor de cada celda.

La propiedad border-spacing se establece utilizando dos valores, separados por un espacio:

• El primer valor define la separación horizontal entre las celdas.
• El segundo valor define la separación vertical entre las celdas.

Ambos valores se pueden especificar en unidades de longitud (píxeles, em, rem, etc.) o como porcentaje del ancho del contenedor de la tabla.

Ejemplo:

.a { border-collapse: separate; border-spacing: 50px 10px;}
.b { border-collapse: collapse; border-spacing: 40px;} /* border-spacing solo tiene efecto cuando border-collapse: separate; */
.c { border-spacing: 0;} /* border-spacing: 0 es igual que border-collapse: collapse */

11.5. Empty-cells

La propiedad empty-cells se utiliza para controlar la visualización de celdas vacías en una tabla HTML. Cuando aplicas esta propiedad a una tabla, puedes especificar si deseas mostrar o ocultar las celdas que no contienen contenido o están vacías.

La propiedad empty-cells admite dos valores:

1. show (valor predeterminado): Cuando se establece empty-cells: show, se muestra el contorno de las celdas vacías en la tabla. Esto significa que las celdas sin contenido visible, como espacios en blanco o celdas completamente vacías, mostrarán los bordes y el fondo de la celda, incluso si no tienen contenido.
2. hide: Al establecer empty-cells: hide, se ocultan las celdas vacías en la tabla. Las celdas que no contienen contenido visible no mostrarán bordes ni fondo, lo que hace que las celdas vacías sean invisibles.

Ejemplo:

.a { empty-cells: hide; }
.b { empty-cells: show; } 

Comprueba tu apendizaje