Propiedades de las tablas en CSS

9. 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 9.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

---

9.1. Caption-side

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

0

---

9.2. Table-layout

.a { table-layout: auto; }
.b { table-layout: auto; width: 100%; }
.c { table-layout: fixed; width: 200px; }

0

---

9.3. Border-collapse

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

0

---

9.4. Border-spacing

.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 qu eborder-collapse: collapse */

0

9.5. Empty-cells

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

0

---

Test