CSS y las tablas

Las reglas CSS contienen también algunas novedades para visualizado de las tablas. Caption en html Mediante las etiquetas <caption></caption> podemos especificar el título de la tabla. Admite un atributo, align="", con dos valores, "top" y "bottom", segun queramos que el título se visualice como una linea de texto encima o debajo de la tabla: Caption align left a b c d e f Caption align right a b c d e f Caption align top a b c d e f Caption align bottom a b c d e f Hemos incluido los valores left y right, pero ten en cuenta que distintos navegadores lo interpretan de forma diferente. Caption con CSS <caption style="caption-side: bottom;">texto visible aqui</caption> caption-side: bottom a b c d e f caption-side: top a b c d e f Caption side left a b c d e f Caption side right a b c d e f Nuevamente incluimos valores left y right, y de nuevo recordamos que no forman parte del standard. La recomendación CSS2.1 solo recoge la posibilidad de desplazar el contenido de la etiqueta caption a izquierda o derecha con text-align, pero siempre manteniendose encima o debajo de la tabla. Celdas vacias <table style="empty-cells: show;"> Por defecto una tabla HTML no dibuja las celdas que estan en blanco, como puedes ver en la tabla de la izquierda. Normalmente para evitar este efecto, se incluia en las celdas vacias un espacio irrompible &nbsp; Ahora puedes acudir a las CSS (tabla de la derecha): Tablas con celdas en blanco a b e f Tablas con celdas en blanco a b e f La visualización de las celdas vacias se regula con la propiedad empty-cells. Los valores que admite son 'show', en cuyo caso se dibujan los bordes y fondos como en las celdas normales; 'hide' en cuyo caso los bordes o fondos no se dibujan alrededor/detrás de las celdas vacías, o 'inherit' border-collapse <table border="3" style="border-collapse: collapse;"> Esta propiedad determina como deben mostrarse los bordes de elementos contiguos de las tablas. Admite dos valores: collapse y separate. border-collapse:collapse indica que los bordes contiguos se solapan, mostrando uno solo. border-collapse:separate muestra los dos bordes contiguos. border-collapse:collapse a b c d e f border-collapse:separate a b c d e f   border-spacing <table border="3" style="border-collapse: collapse;border-spacing:0.5em 1em;"> Esta propiedad determina el espacio entre celdas contiguas en la tabla. Posible valor es una unidad o dos unidades de medida. Si pasamos una sola unidad de medida, todos los lados de cada celda la usaran para su separación. Si pasamos dos unidades de medida el primero se usa para la separación horizontal entre celdas y el segundo para la separación vertical. un valor de 0.5 em a b c d e f dos valores, 0.5 1 em a b c d e f   table-layout El navegador puede 'dibujar' la tabla con uno de estos dos sistemas: puede fiarse de las medidas indicadas en el código fuente y dibujarla en consecuencia (table-layout:fixed) o bien puede leer el contenido de la tabla y calcular el diseño en base a este contenido (table-layout:auto) Si no se especifica el valor de esta propiedad, el sistema por defecto es auto, aunquefixed es mas rápido.