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:
|
|
||||||||||||
|
|
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>
|
|
||||||||||||
|
|
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
Ahora puedes acudir a las CSS (tabla de la derecha):
| a | b | |
| e | f |
| 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.
| a | b | c |
| d | e | f |
| 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.
| a | b | c |
| d | e | f |
| 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, aunque fixed es mas rápido.