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
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 |
Usuarios que han visto este tema también han visto...
- Estilo de la primera letra con CSS
- Notas en imágenes utilizando CSS
- Capas flotantes en CSS
- Efectos sobre elementos Input
- 70 ideas para crear mejores CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
