|
(Alguno de los ejemplos sólo funcionan en algunas versiones de navegador)
- 2.1 table: Define un bloque rectangular contenedor de una estructura de datos en rejilla, ordenándolos mediante filas y columnas, cuya intersección es la celda. Pueden contener además cabecera, (<caption>).
Su equivalente en HTML es <table>.
- 2.2 inline-table: Igual que el elemento table pero la tabla no se define a nivel de bloque, sino a nivel de línea.
Su equivalente en HTML es <table>.
- 2.3 table-row: Agrupa todas las celdas de una fila concreta de la tabla.
Su equivalente en HTML es <tr>.
- 2.4 table-column: Agrupa todas las celdas de una columna concreta de la tabla.
Su equivalente en HTML es <col>.
- 2.5 table-header-group: Es un grupo de filas de la tabla que se sitúa en la cabecera, por encima de cualquier otro grupo de filas de la tabla, y por debajo del título <caption>.
Su equivalente en HTML es <thead>.
- 2.6 table-footer-group: Es un grupo de filas de la tabla que se sitúa en el pie de la misma, por debajo de cualquier otro grupo de filas de la tabla, y por encima del título del pie de tabla <caption>.
Su equivalente en HTML es <tfoot>.
- 2.7 table-row-group: Define un contenedor de un número concreto de filas de la tabla. Permite definir características de presentación específicas para este grupo de filas.
Su equivalente en HTML es <tbody>.
- 2.8 table-column-group: Define un contenedor de un número concreto de columnas de la tabla. Permite definir características de presentación específicas para este grupo de columnas.
Su equivalente en HTML es <colgroup>.
- 2.9 table-cell: Define el contenedor de una celda de la tabla. Sólo se puede definir dentro de un contenedor fila
Su equivalente en HTML es <td> <th>.
- 2.10 table-caption: Celda especial que define el título de la tabla. Ocupa una fila o una columna entera y puede situarse en la parte más superior o más inferior de la tabla, así como en la parte más a la derecha o más a la izquierda de la misma.
Su equivalente en HTML es <caption>.
- 3.1 table-layout: Especifica de qué manera el browser va a construir y renderizar la estructura completa de la tabla:.
- Valores:
- fixed: el browser ignora el contenido de las celdas y traza las filas y columnas según anchos width y altos height especificados, o en su caso según el espacio disponible. Es un procedimiento muy rápido de hacer el "render" de la tabla.
- auto (valor por defecto): el browser calcula anchos y altos de celdas, filas y columnas según su contenido. Normalmente es un proceso iterativo que requiere varias pasadas, por lo que es un procedimiento mucho más lento de hacer el "render" de la tabla.
- 3.2 caption-side: Especifica la posición y alineación del título de la tabla.
- Valores:
- top (valor por defecto): El título de la tabla se sitúa justo encima del contenedor de filas y columnas.
- bottom: El título de la tabla se sitúa justo encima del contenedor de filas y columnas.
- left: El título de la tabla se sitúa justo a la izquierda del contenedor de filas y columnas.
- right: El título de la tabla se sitúa justo a la derecha del contenedor de filas y columnas.
- 3.3 empty-cells: Cuando se utilizan bordes separados para la tabla (border-collapse: separate), esta propiedad especifica qué ha de hacer el browser con las celdas que no tienen ningún contenido, fundamentalmente si se han de pintar bordes y "background" para las mismas.
- Valores:
- show (valor por defecto): Se pintarán bordes alrededor de las celdas sin contenido.
- hide: Las celdas sin contenido aparecerán como espacios en blanco sin borde alguno.
Esta propiedad sólo es aplicable para tags <td>.
- 3.4 border-collapse: Especifica si los bordes en la tabla están juntos o separados.
- Valores:
- collapse: Es el modelo tradicional de tabla: celdas contiguas comparten el mismo borde.
- separate Los bordes de las celdas están separados de manera que cada una tiene los suyos propios.
Esta propiedad sólo es aplicable para tags <table>.
- 3.5 border-spacing: Cuando se utilizan bordes separados para la tabla (border-collapse: separate), esta propiedad indica la distancia que separa los bordes de las celdas contiguas. Este espacio se rellenará con el "background" de la tabla.
- Valores:
- Se especifica 1 valor: Será tanto la distancia horizontal como vertical entre celdas.
- Se especifican 2 valores El primero será la distancia horizontal entre celdas, y el segundo será la distancia vertical entre celdas.
Esta propiedad sólo es aplicable para tags <table>.
- 4.1 Formatear la Tabla mediante reglas CSS: Especifica de qué manera el browser va a construir y "renderizar" la estructura completa de la tabla:.
- IExplorer 6.0: Admite los 2 <caption> pero sitúa ambos títulos en la parte superior de la tabla: no soporta caption-side.
- Mozilla Firefox 2.0: Sólo admite 1 elemento <caption> y le puede situar tanto en la parte superior de la tabla como en la inferior, ya que sisoporta caption-side
- 4.2 Tabla con "table-layout": Especifica de qué manera el browser va a construir y "renderizar" la estructura completa de la tabla:.
- 4.3 Tabla con "empty-cells": Especifica de qué manera el browser va a construir y "renderizar" la estructura completa de la tabla:.
- En IExplorer 6.0: no se pinta el borde de las celdas sin contenido, pero reserva el background de la misma, aunque esté vacía, es decir, no soporta del todo el elemento empty-cells.
- En Mozilla Firefox 2.0: ni se pinta el borde ni se reserva el background de las celdas sin contenido, por lo que se consigue el efecto deseado de "ausencia de celda", cuando ésta está vacía, con lo que se sisoporta perfectamente el elemento empty-cells
CSS2 introduce una serie de nuevos valores para formatear Tablas desde reglas CSS.
Esto que quizá pueda parecer que no aporta mucho en HTML dónde ya hay tags específicos para construir tablas de casi cualquier tipo (<table>, <tr>, <td>, <th> <caption>...), se convierte en una herramienta de gran ayuda por ejemplo en XML para estructurar datos tabulados.
Hay una serie de elementos interesantes a la hora de especificar el diseño de tablas desde CSS's a partir de CSS2. Las malas noticias son que no todas las versiones de los navegadores más conocidos las soportan.
| 1º Trim | 2º Trim | 3º Trim | 4º Trim | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1.200 | 1.150 | 11.320 | 1.110 | ||||||||
| 400 | 300 | 500 | 650 | 375 | 125 | 275 | 10.425 | 620 | 530 | 370 | 210 |
|
En este primer caso vamos a mostrar como aportar formato rico a la tabla exclusivamente mediante una CSS externa: HTML sólo lo utilizaremos para estructurar los datos, quedando un código tan sencillo y limpio como el siguiente:
<table class="tbCss1"> Dónde hemos utilizado las siguientes reglas para aplicar formato a la tabla, título ( <caption>), filas y celdas:
.tbCss1 {background: #FFFFFF;color: #333377;font-size:11px;padding: 6px;margin: 3px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;} Se han utilizado 2 títulos de página (<caption>), unio superior (tb1CaptionTop) y otro inferior (tb1CaptionBottom), que son tratados de diferente forma en los 2 browsers que lo hemos probado: |
| 1º Trim | 2º Trim | 3º Trim | 4º Trim | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1.200 | 1.150 | 11.320 | 530 | ||||||||
| 400 | 300 | 500 | 650 | 375 | 125 | 275 | 10.425 | 620 | 530 | ||
|
En este segundo caso vamos a utilizar el elemento table-layout: fixed en la clase que define la tabla para que el navegador realice automáticamente la asignación de dimensiones a las celdas, filas y columnas:
<table class="tbCss2"> Vemos que los anchos de columnas y celdas resultan diferentes (mayores) que en el caso anterior, dónde, al no haber especificado table-layout, el navegador asume el valor por defecto, table-layout: auto. Se han utilizado las siguientes clases de estilo para aplicar formato a la tabla, título ( <caption>), filas y celdas:
.tbCss2 {table-layout: fixed;background: #EFEFFF;color: #333377;border-collapse: separate;border-spacing: 6px;border:1px solid #FF0000;font-size:11px;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;} |
| 1º Trim | 2º Trim | 3º Trim | 4º Trim | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1.200 | 1.150 | 11.320 | 530 | ||||||||
| 400 | 300 | 500 | 650 | 375 | 125 | 275 | 10.425 | 620 | 530 | ||
|
Finalmente, en este tercer caso vamos a manejar el concepto de empty-cells y ver como ambos browsers lo implementan:
<table class="tbCss3"> De nuevo vemos que los anchos de columnas y celdas resultan ostensiblemente mayores que en el primer caso por el hecho de haber especificado table-layout: fixed. Utilizado las siguientes clases de estilo para aplicar formato a la tercera tabla de ejemplo:
.tbCss3 {table-layout: fixed;background: #89ADA1;color: #C8D3D0;border: outset 5px;border-collapse: separate;border-spacing: 18px;font-size:11px;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;} Observamos que: |
| WebUsable.com | © Todos los derechos reservados. |
|
