Tablas con CSS

Las propiedades de las tablas nos permiten definir los distintos elementos que componen una tabla.

  • La ubicación del título con respecto a la tabla.
  • Celdas de tamaño fijo o ajustable.
  • Espaciado entre celdas.

La propiedad “caption-side” nos permite ubicar el título de la tabla por encima o por debajo de la misma.

Por ejemplo, para situar el título por debajo de la tabla:

caption{caption-side: bottom}

Y en dentro de la tabla:

<caption>Título de la tabla</caption>

Nota: Internet Explorer ubica el título siempre por encima de la tabla.

La propiedad “table-layout” define si las celdas, filas o columnas, van a tener el tamaño fijo que estipulemos (fixed) o se adecuarán al contenido sin importar la medida que hayamos establecido (auto).

La propiedad “border-spacing” nos permite dejar espacio libre entre celdas.

Propiedad Descripción Valores Detalles
caption-side Posición del título respecto de la tabla. top Superior
No funciona en IE 5, 6 y 7
bottom Inferior
No funciona en IE 5, 6 y 7
table-layout Control del algoritmo usado para el formato de las celdas, filas y columnas. auto Automático
fixed Fijo
border-collapse Selección del modelo de los bordes. collapse Plegado
separate Separado
border-spacing Espaciado entre los bordes de celdas adyacentes. longitud Longitud
No funciona en IE 5, 6 y 7
empty-cells Visibilidad de los bordes de celdas sin contenido. show Muestra
No funciona en IE 5, 6 y 7
hide Oculta
No funciona en IE 5, 6 y 7
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (No hay votos)
Cargando…
Comparte en las redes sociales

Una respuesta a “Tablas con CSS”

  1. Pharme324 dice:

    Hello! dedekgd interesting dedekgd site! I’m really like it! Very, very dedekgd good!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre