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
¿Qué propiedad no existe en CSS?
¡Bien!
¡Has fallado!
¿Con qué propiedad y con qué valor indicamos que el titulo de la tabla se posicione en la parte de abajo?
¡Bien!
¡Has fallado!
¿Con qué propiedad indicamos que la tabla ocupe todo el ancho de la pantalla?
¡Bien!
¡Has fallado!
CSS. Propiedades de las tablas
¡Muy bien!
Sigue practicando...