html


Introducción a las tablas
Las tablas representan relaciones entre datos. Los autores especifican estas relaciones en el lenguaje del documento y especifican su presentación en CSS, de dos maneras: visualmente y auditivamente.
Los autores pueden especificar el formato visual de una tabla como una grilla rectangular de celdas. Las filas y columnas de celdas pueden organizarse en grupos defilas y en grupos de columnas. Las filas, columnas, grupos de filas, grupos de columnas y las celdas pueden tener bordes dibujados alrededor de ellos (hay dos modelos de bordes en CSS2). Los autores pueden alinear los datos verticalmente u horizontalmente dentro de la celda y alinear los datos en todas las celdas de una fila o columna.
Los autores también pueden especificar el procesamiento auditivode una tabla; cómo serán leídos los títulos y los datos. En el lenguaje del documento, los autores pueden etiquetar las celdas y los grupos de celdas de manera que cuando son procesadas auditivamente, los títulos de las celdas son expresados antes que los datos de la celda. En realidad, esto "serializa" la tabla: los usuarios que recorren la tabla auditivamente escuchan una secuencia de títulosseguidos por los datos.
Aquí hay una tabla simple descripta en HTML 4.0 de tres filas y tres columnas:

Esta es una tabla simple de 3x3

Título 1 Celda 1 Celda 2

Título 2 Celda 3 Celda 4

Título 3 Celda 5 Celda 6

Este código crea una tabla (el elemento TABLE), tres filas (los elementos TR), tres celdas de título (los elementos TH) y seisceldas de datos (los elementos TD). Observe que las tres columnas de este ejemplo están especificadas implícitamente: hay tantas columnas en la tabla como se requiere para las celdas de los títulos y los datos.
La siguiente regla CSS centra horizontalmente el texto en las celdas de títulos y presenta los datos con una fuente en negritas:
TH { text-align: center; font-weight: bold }
Las siguientesreglas alínean el texto de las celdas de títulos por su línea de base y centra verticalmente el texto en cada celda de datos:
TH { vertical-align: baseline }
TD { vertical-align: middle }
Las reglas siguientes especifican que la fila superior será rodeada con un borde sólido azul de 3px y cada una de las otras filas serán rodeadas con un borde sólido negro de 1px:
TABLE { border-collapse:collapse }
TR#fila1 { border-top: 3px solid blue }
TR#fila2 { border-top: 1px solid black }
TR#fila3 { border-top: 1px solid black }
Observe, sin embargo, que los bordes alrededor de las filas se superponen cuando las filas se juntan. ¿De qué color (negro o azul) y grosor (1px o 3px) será el borde entre fila1 y fila2? Discutiremos esto en la sección sobre resolución de los conflictos de borde.La siguiente regla coloca el encabezado de la tabla encima de la tabla:
CAPTION { caption-side: top }
Finalmente, la siguiente regla especifica que, cuando sea procesada auditivamente, cada fila de datos se expresará con un "Título, Datos, Datos":
TH { speak-header: once }
Por ejemplo, la primer fila sería leída como "Titulo1 Celda1 Celda2". Por otra parte, con la siguiente regla:
TH {speak-header: always }
sería expresada como "Título1 Celda1 Título1 Celda2".
El ejemplo precedente muestra cómo CSS trabaja con los elementos de HTML 4.0; en HTML 4.0, la semántica de los distintos elementos de la tabla (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH y TD) están bien definidos. En otros lenguajes de documento (como las aplicaciones XML) pueden no existir elementos predefinidospara la tabla. Por eso, CSS2 permite a los autores "asignar" a los elementos del lenguaje del documento, elementos de la tabla a través de la propiedad 'display'. Por ejemplo, la siguiente regla hace que el elemento FOO actúe como un elemento HTML TABLE y el elemento BAR actúe como un elemento CAPTION:
FOO { display : table }
BAR { display : table-caption }
Discutiremos los diversos elementos...