Introducción a las tablas
El modelo de tablas de HTML permite a los autores organizar datos -- textos, texto preformateado, imágenes, vínculos, formularios, campos de formularios, otras tablas, etc. -- en filas y en columnas de celdas.
Cada tabla puede tener un título asociado (ver el elemento CAPTION) que proporciona una descripción corta del propósito de de la tabla. Se puede proporcionar también una descripción más larga (por medio del atributo summary) para el provecho de las personas que utilicen agentes de usuario basados en Braille o en voz.
Las filas de una tabla pueden agruparse en secciones de encabezado, pie y cuerpo, (por medio de los elementos THEAD, TFOOT y TBODY, respectivamente). Los grupos de filas conllevan información estructural adicional y los agentes de usuario los pueden representar de modo que se enfatice esta estructura. Los agentes de usuario pueden sacar partido de la división entre encabezado, cuerpo y pie para permitir el desplazamiento de las secciones de cuerpo independientemente de las secciones de cabecera y pie. Cuando se imprimen tablas largas, se puede repetir en cada página la información de cabecera y pie que contienen los datos de la tabla.
Los autores también pueden agrupar columnas para proporcionar información estructural adicional de la que pueden sacar partido los agentes de usuario. Además de esto, los autores pueden declarar propiedades de columnas al comienzo de la definición de la tabla (por medio de los elementos COLGROUP y COL) de tal modo que se permita a los agentes de usuario representar la tabla incrementalmente en lugar de tener que esperar a que lleguen todos los datos de la tabla antes de empezar a representarla.
Las celdas de la tabla puede contener o bien información de "encabezado" (ver el elemento TH) o de "datos" (ver el elemento TD). Las celdas pueden ocupar varias filas y columnas. El modelo de tablas de HTML 4 permite a los autores dar un rótulo a cada celda de modo que los agentes de usuario no visuales puedan comunicar más fácilmente información de encabezado de la celda al usuario. Estos mecanismos no sólo ayudan considerablemente a los usuarios con discapacidades visuales, sino que además permiten manejar tablas a navegadores multi-modo sin cables con posibilidades de representación limitadas (p.ej., teléfonos con soporte web).
No deberían usarse tablas con la única finalidad de organizar la presentación de los contenidos de un documento (es decir, de crear el "layout"), ya que esto puede ocasionar problemas cuando se represente en un medio no visual. Además, al incluir gráficos, estas tablas pueden forzar a los usuarios a hacer desplazar horizontalmente la pantalla para ver una tabla diseñada en un sistema con una pantalla más grande. Para minimizar estos problemas, los autores deberían usar hojas de estilo en lugar de tablas para organizar la presentación.
Nota. Esta especificación incluye información más detallada sobre tablas en las secciones sobre fundamentos del diseño con tablas y cuestiones de implementación.
Aquí tenemos una tabla sencilla que ilustra algunas de las características del modelo de tablas de HTML. La siguiente definición de tabla:
| Media | Ojos Rojos | ||
|---|---|---|---|
| altura | peso | ||
| Machos | 1.9 | 0.003 | 40% |
| Hembras | 1.7 | 0.002 | 43% |
podría representarse de una manera similar a ésta en un dispositivo tty:
Una tabla de muestra con celdas fusionadas
/-----------------------------------------\
| | Media | Ojos |
| |-------------------| rojos |
| | altura | peso | |
|-----------------------------------------|
| Machos | 1.9 | 0.003 | 40% |
|-----------------------------------------|
| Hembras | 1.7 | 0.002 | 43% |
\-----------------------------------------/
o a ésta por un agente de usuario gráfico:
11.2 Elementos para construir tablas
11.2.1 El elemento TABLE
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
summary = texto [CS]
Este atributo proporciona un resumen del propósito y la estructura de la tabla para agentes de usuario que representen en medios no visuales como voz o Braille.
align = left|center|right [CI]
Desaprobado. Este atributo especifica la posición de la tabla con respecto al documento. Valores permitidos:
• left: La tabla está a la izquierda del documento.
• center: La tabla está centrada con el documento.
• right: La tabla está a la derecha del documento.
width = longitud [CN]
Este atributo especifica la anchura deseada de la tabla entera y está destinado a agentes de usuario visuales. Cuando el valor es un valor porcentual, el valor es relativo al espacio disponible horizontal del agente de usuario. En ausencia de una especificación de anchura, la anchura de la tabla se determina por el agente de usuario.
Atributos definidos en otros lugares
• id, class (identificadores a nivel de documento)
• lang (información sobre el idioma), dir (dirección del texto)
• title (título del elemento)
• style (información de estilo en línea)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
• bgcolor (color de fondo)
• frame, rules, border (bordes y líneas de división)
• cellspacing, cellpadding (márgenes de celdas)
El elemento TABLE contiene a todos los demás elementos que especifican el título, las filas, el contenido, y el formato.
La siguiente lista informativa describe qué operaciones pueden llevar a cabo los agentes de usuario cuando representen una tabla:
• Poner a disposición del usuario el resumen (summary) de la tabla. Los autores deberían proporcionar un resumen del contenido y la estructura de la tabla de modo que las personas que utilicen agentes de usuario no visuales puedan entenderla mejor.
• Representar el título, si está definido.
• Representar el encabezado de la tabla, si está definido. Representar el pie de la tabla, si está definido. Los agentes de usuario deben saber dónde representar el encabezado y el pie. Por ejemplo, si el medio de salida está paginado, los agentes de usuario pueden colocar el encabezado en la parte superior de cada página y el pie en la inferior. Análogamente, si el agente de usuario proporciona un mecanismo para desplazar las filas, el encabezado puede aparecer en la parte superior del área de desplazamiento y el pie en la parte inferior.
• Calcular el número de columnas de la tabla. Obsérvese que el número de filas de una tabla es igual al número de elementos TR contenidos por el elemento TABLE.
• Agrupar las columnas de acuerdo a las especificaciones de agrupamiento de columnas que haya.
• Representar las celdas, fila por fila y agrupadas en las columnas apropiadas, entre el encabezado y el pie. Los agentes de usuario visuales deberían dar formato a la tabla de acuerdo con los atributos HTML y las especificaciones de las hojas de estilo.
El modelo de tablas de HTML ha sido diseñado de modo que los agentes de usuario, con la ayuda de los autores, puedan representar las tablas incrementalmente (es decir, a medida que llegan las filas de la tabla), en lugar de tener que esperar a que lleguen todos los datos antes de empezar a representarlos.
Para que un agente de usuario pueda dar formato a una tabla en un solo paso, los autores deben decir al agente de usuario:
• El número de columnas de la tabla. Consulte la sección sobre el cálculo del número de columnas de una tabla para más detalles sobre cómo proporcionar esta información.
• Las anchuras de estas columnas. Consulte la sección sobre el cálculo de la anchura de las columnas para más detalles sobre cómo proporcionar esta información.
Más concretamente, un agente de usuario puede representar una tabla en un solo paso cuando las anchuras de las columnas se especifiquen usando una combinación de elementos COLGROUP y COL. Si alguna de las columnas se especifica en términos relativos o porcentuales (véase la sección sobre el cálculo de la anchura de las columnas), los autores deben especificar también la anchura de la propia tabla.
Direccionalidad de tablas
La direccionalidad de una tabla es o bien la direccionalidad heredada (por defecto es de izquierda a derecha) o bien la especificada por el atributo dir del elemento TABLE.
Para una tabla de izquierda a derecha, la columna cero es la del lado izquierdo y la fila cero es la superior. Para una columna de derecha a izquierda, la columna cero es la del lado derecho, y la fila cero es la superior.
Cuando un agente de usuario asigna celdas adicionales a una fila (véase la sección sobre el cálculo del número de columnas de una tabla), las celdas adicionales de la fila se añaden a la derecha de la tabla si la tabla es de izquierda a derecha, y a la izquierda si la tabla es de derecha a izquierda.
Obsérvese que TABLE es el único elemento en el que dir invierte el orden visual de las columnas; no puede invertirse independientemente una fila individual (TR) ni un grupo de columnas (COLGROUP).
El atributo dir, cuando se establece para un elemento TABLE, también afecta a la dirección del texto dentro de las celdas de la tabla (ya que el atributo dir es heredado por elementos en bloque).
Para especificar una tabla de derecha a izquierda, el atributo dir se establece como sigue:
La dirección del texto en celdas individuales puede cambiarse estableciendo el atributo dir en un elemento que defina la celda. Consulte la sección sobre texto bidireccional para más información sobre cuestiones de dirección del texto.
11.2.2 Títulos de tablas: el elemento CAPTION
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
align = top|bottom|left|right [CI]
Desaprobado. Para agentes de usuario visuales, este atributo especifica la posición del título con respecto a la tabla. Valores posibles:
• top: El título está en la parte superior de la tabla. Este es el valor por defecto.
• bottom: El título está en la parte inferior de la tabla.
• left: El título está a la izquierda de la tabla.
• right: El título está a la derecha de la tabla.
Atributos definidos en otros lugares
• id, class (identificadores a nivel de documento)
• lang (información sobre el idioma), dir (dirección del texto)
• title (título del elemento)
• style (información de estilo en línea)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
El texto del elemento CAPTION, cuando esté presente, debería describir la naturaleza de la tabla. El elemento CAPTION sólo se permite inmediatamente después de la etiqueta inicial de TABLE. Un elemento TABLE sólo puede contener un elemento CAPTION.
Los agentes de usuario visuales permiten a las personas con visión percibir rápidamente la estructura de una tabla a partir de los encabezados así como a partir del título. Una consecuencia de esto es que la información sobre el el propósito y la estructura de la tabla que dan los títulos normalmente no será la adecuada desde la perspectiva de las personas que utilicen agentes de usuario no visuales.
Los autores deberían por lo tanto esforzarse en proporcionar información adicional resumiendo el propósito y la estructura de la tabla usando el atributo summary del elemento TABLE. Esto es especialmente importante para tablas sin título. Los ejemplos que figuran más adelante ilustran el uso del atributo summary.
Los agentes de usuario visuales deberían evitar recortar cualquier parte de la tabla, incluyendo el título, a menos que se proporcionen medios para acceder a todo el contenido, p.ej., mediante un barra de desplazamiento horizontal o vertical. Recomendamos que el texto del título se ajuste a la misma anchura que la tabla. (Véase también la sección sobre algoritmos recomendados de composición de la presentación.)
11.2.3 Grupos de filas: los elementos THEAD, TFOOT y TBODY
Etiqueta inicial: obligatoria, Etiqueta final: opcional
Etiqueta inicial: opcional, Etiqueta final: opcional
Atributos definidos en otros lugares
• id, class (identificadores a nivel de documento)
• lang (información sobre el idioma), dir (dirección del texto)
• title (título del elemento)
• style (información de estilo en línea)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
• align, char, charoff, valign (alineación en celdas)
Las filas de una tabla pueden agruparse en una cabecera de tabla, un pie de tabla, y una o más secciones de cuerpo de tabla, usando los elementos THEAD, TFOOT y TBODY, respectivamente. Esta división permite a los agentes de usuario ofrecer la posibilidad de desplazar la información de los cuerpos de la tabla independientemente de la cabecera y el pie. Cuando se imprimen tablas largas, la información de cabecera y pie de tabla puede repetirse en todas las páginas que contengan datos de la tabla.
La cabecera de tabla y el pie de tabla deberían contener información sobre las columnas de la tabla. El cuerpo de tabla debería contener filas de datos de tabla.
En caso de estar presentes, cada elemento THEAD, TFOOT y TBODY contiene un grupo de filas. Cada grupo de filas debe contener al menos una fila, definida por el elementoTR.
Este ejemplo ilustra el orden y la estructura de encabezados, pies, y cuerpos de tabla.
TFOOT debe aparecer antes de TBODY dentro de una definición de TABLE de modo que los agentes de usuario puedan representar el pie antes de recibir todas las (potencialmente numerosas) filas de datos. A continuación se resume qué etiquetas son obligatorias y cuáles pueden omitirse:
• La etiqueta inicial de TBODY es siempre obligatoria excepto cuando la tabla contenga sólo un cuerpo de tabla y ninguna sección de cabecera ni de pie. La etiqueta final de TBODY puede omitirse siempre sin problemas.
• Las etiquetas iniciales de THEAD y TFOOT son obligatorias cuando estén presentes las secciones de cabecera y de pie de tabla respectivamente, pero las etiquetas finales correspondientes pueden omitirse sin problemas.
Los analizadores de los agentes de usuario conformes deben obedecer estas reglas por razones de compatibilidad con versiones anteriores.
La tabla del ejemplo previo puede abreviarse quitando ciertas etiquetas iniciales:
Las secciones THEAD, TFOOT y TBODY deben contener el mismo número de columnas.
11.2.4 Grupos de columnas: los elementos COLGROUP y COL
Los grupos de columnas permiten a los autores crear divisiones estructurales dentro de una tabla. Los autores pueden resaltar esta estructura por medio de hojas de estilo o con atributos HTML (p.ej., el atributo rules del elemento TABLE). Para un ejemplo de presentación visual de grupos de columnas, consulte la tabla de muestra.
Una tabla puede contener o bien un único grupo implícito de columnas (si no hay ningún elemento COLGROUP delimitando las columnas), o cualquier número de grupos explícitos de columnas (cada uno de ellos delimitado por un elemento COLGROUP).
El elemento COL permite a los autores compartir atributos entre varias columnas sin que ello implique ningún tipo de agrupamiento estructural. El "campo de acción" del elemento COL es el número de columnas que compartirán los atributos del elemento.
El elemento COLGROUP
Etiqueta inicial: obligatoria, Etiqueta final: opcional
Definiciones de atributos
span = number [CN]
Este atributo, que debe ser un entero > 0, especifica el número de columnas de un grupo de columnas. Los diferentes valores significan lo siguiente:
• En ausencia de un atributo span, cada COLGROUP define un grupo de columnas que contiene una columna.
• Si el atributo span se establece en N > 0, el elemento COLGROUP actual define un grupo de columnas que contiene N columnas.
Los agentes de usuario deben ignorar este atributo si el elemento COLGROUP contiene uno o más elementos COL.
width = multilongitud [CN]
Este atributo especifica una anchura por defecto para cada columna del grupo de columnas actual. Además de los valores normales de píxeles, porcentajes y longitudes relativas, este atributo permite la forma especial "0*" (cero asterisco) que significa que la anchura de cada columna del grupo debería ser la anchura mínima necesaria para alojar los contenidos de la columna. Esto implica que antes de poder calcular correctamente la anchura de la columna deben conocerse primero todos los contenidos de la columna. Los autores deberían tener en cuenta que al especificar "0*" impedirán a los agentes de usuario visuales representar la tabla incrementalmente.
La anchura de cualquier columna del grupo de columnas cuya anchura (width) se especifique mediante un elemento COL prevalece sobre el valor de este atributo.
Atributos definidos en otros lugares
• id, class (identificadores a nivel de documento)
• lang (información sobre el idioma), dir (dirección del texto)
• title (título del elemento)
• style (información de estilo en línea)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
• align, char, charoff, valign (alineación en celdas)
El elemento COLGROUP crea un grupo explícito de columnas. El número de columnas del grupo de columnas puede especificarse de dos maneras mutuamente exclusivas:
1. El atributo span del elemento (valor por defecto 1) especifica el número de columnas del grupo.
2. Cada elemento COL del COLGROUP representa una o más columnas en el grupo.
La ventaja de usar el atributo span es que los autores pueden agrupar información sobre las anchuras de las columnas. Así, si una tabla contiene cuarenta columnas, todas ellas de 20 píxeles de ancho, es más fácil escribir:
que:
...un total de cuarenta elementos COL...
Cuando sea necesario distinguir una columna del resto del grupo (p.ej., para información de estilo, para especificar información de anchura, etc.), los autores deben identificar la anchura de esa columna con un elemento COL. Así, para aplicar información de estilo especial a la última columna del ejemplo anterior, la singularizamos del siguiente modo:
El atributo width del elemento COLGROUP es heredado por las cuarenta columnas. El primer elemento COL se refiere a las primeras 39 columnas (y no hace nada especial con ellas) y el segundo asigna un valor de id a la columna número 40 de modo que una hoja de estilo pueda hacer referencia a ella.
La tabla del siguiente ejemplo contiene dos grupos de columnas. El primer grupo de columnas contiene 10 columnas y el segundo contiene 5 columnas. La anchura por defecto de las columnas del primer grupo de columnas es de 50 píxeles. La anchura de las columnas del segundo grupo de columnas será la mínima necesaria para cada columna.
| ... |
El elemento COL
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
span = number [CN]
Este atributo, cuyo valor debe ser un entero > 0, especifica el número de columnas que "abarca" el elemento COL; el elemento COL comparte sus atributos con todas las columnas que abarca. El valor por defecto de este atributo es 1 (es decir, el elemento COL se refiere a una sola columna). Si el atributo span se establece en N > 1, el elemento COL actual comparte sus atributos con las siguientes N-1 columnas.
width = multilongitud [CN]
Este atributo especifica una anchura por defecto para todas las columnas abarcadas por el elemento COL actual. Tiene el mismo significado que el atributo width del elemento COLGROUP y prevalece sobre él.
Atributos definidos en otros lugares
• id, class (identificadores a nivel de documento)
• lang (información sobre el idioma), dir (dirección del texto)
• title (título del elemento)
• style (información de estilo en línea)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
• align, char, charoff, valign (alineación en celdas)
El elemento COL permite a los autores agrupar especificaciones de atributos para columnas de tablas. COL no agrupa columnas estructuralmente; ése es el papel del elemento COLGROUP. Los elementos COL están vacíos y sólo sirven como soporte de atributos. Pueden aparecer dentro o fuera de un grupo explícito de columnas (es decir, de un elemento COLGROUP).
El atributo width de COL se refiere a la anchura de todas y cada una de las columnas que abarca el elemento.
Cálculo del número de columnas de una tabla
Hay dos maneras de determinar el número de columnas de una tabla (en orden de precedencia):
1. Si el elemento TABLE contiene algún elemento COLGROUP o COL, los agentes de usuario deberían calcular el número de columnas sumando los valores siguientes:
o Para cada elemento COL, tomar el valor de su atributo span (valor por defecto 1).
o Para cada elemento COLGROUP que contenga al menos un elemento COL, ignorar el atributo span del elemento COLGROUP. Para cada elemento COL, realizar el cálculo del paso 1.
o Para cada elemento vacío COLGROUP, tomar el valor de su atributo span (valor por defecto 1).
2. De otra manera, si el elemento TABLE no contiene elementos COLGROUP ni COL, los agentes de usuario deberían basar el número de columnas en lo que requieran las filas. El número de columnas es igual al número de columnas requerido por la fila con más columnas, incluyendo las celdas que abarcan varias columnas. Para cualquier fila que tenga menos columnas que este número de columnas, el final de la fila debería rellenarse con celdas vacías. El "final" de una fila depende de la direccionalidad de la tabla.
Es un error que una tabla contenga elementos COLGROUP o COL y que los dos cálculos no resulten en el mismo número de columnas.
Una vez que el agente de usuario ha calculado el número de columnas de la tabla, puede agruparlas en grupos de columnas.
Por ejemplo, para cada una de las tablas siguientes, los dos métodos de cálculo de columnas dan tres columnas. Las primeras tres tablas pueden representarse incrementalmente.
| ... ...filas... |
| ... ...filas... |
| ... ...filas... |
Cálculo de la anchura de las columnas
Los autores pueden especificar anchuras de columnas de tres maneras:
Fijas (Fixed)
Una especificación de anchura fija está dada en píxeles (p.ej., width="30"). Una especificación de anchura fija permite la representación incremental.
Porcentuales (Percentage)
Una especificación porcentual (p.ej., width="20%") se basa en el porcentaje del espacio horizontal disponible para la tabla (entre los bordes actuales izquierdo y derecho, incluyendo elementos flotantes). Obsérvese que este espacio no depende de la propia tabla, y por lo tanto las especificaciones porcentuales permiten la representación incremental.
Proporcionales (Proportional)
Las especificaciones proporcionales (p.ej., width="3*") se refieren a porciones de espacio horizontal requerido por una tabla. Si se da a la anchura de la tabla un valor fijo por medio del atributo width del elemento TABLE, los agentes de usuario pueden representar la tabla incrementalmente incluso con columnas proporcionales.
Sin embargo, si la tabla no tiene una anchura fija, los agentes de usuario deben recibir todos los datos de la tabla antes de poder determinar el espacio horizontal requerido por la tabla. Sólo entonces puede asignarse este espacio a las columnas proporcionales.
Si un autor no especifica información de anchura para una columna, un agente de usuario no puede dar formato a la tabla incrementalmente, ya que debe esperar a que lleguen todos los datos de la columna para poder asignarle una anchura adecuada.
Si las anchuras de las columnas resultan ser demasiado estrechas para los contenidos de alguna de las celdas de la tabla, los agentes de usuario pueden optar por remodelar la tabla.
La tabla de este ejemplo contiene seis columnas. La primera no pertenece a un grupo explícito de columnas. Las tres siguientes pertenecen al primer grupo explícito de columnas y las dos últimas pertenecen al segundo grupo explícito de columnas. Esta tabla no puede ser formateada incrementalmente ya que contiene especificaciones de anchuras de columna proporcionales y no hay ningún valor para el atributo width del elemento TABLE.
Una vez que el agente de usuario (visual) ha recibido los datos de la tabla, el agente de usuario asignará el espacio horizontal disponible como sigue: Primero el agente de usuario asignará 30 píxeles a las columnas uno y dos. Después, reservará el espacio mínimo requerido por la tercera columna. El resto del espacio horizontal lo dividirá es seis porciones iguales (ya que 2* + 1* + 3* = 6 porciones). La columna cuatro (2*) recibirá dos de estas porciones, la columna cinco (1*) recibirá una, y la columna seis (3*) recibirá tres.
| ... ...filas... |
Hemos establecido el valor del atributo align del tercer grupo de columnas en "center". Todas las celdas de todas las columnas de este grupo heredarán este valor, pero pueden anularlo. De hecho, el COL hace justo eso, especificando que todas las celdas de la columna que gobierna serán alineadas con el carácter ":".
En la siguiente tabla, las especificaciones de anchuras de columna permiten al agente de usuario dar formato a la tabla incrementalmente:
| ... ...filas... |
Las diez primeras columnas serán cada una de 15 píxeles de ancho. Las dos últimas columnas recibirán cada una la mitad de los 50 píxeles restantes. Obsérvese que los elementos COL sólo sirven para que pueda especificarse un valor id a las dos últimas columnas.
Nota. Aunque el atributo width del elemento TABLE no está desaprobado, se aconseja a los autores usar hojas de estilo para especificar anchuras de tabla.
11.2.5 Filas de una tabla: el elemento TR
Etiqueta inicial: obligatoria, Etiqueta final: opcional
Atributos definidos en otros lugares
• id, class (identificadores a nivel de documento)
• lang (información sobre el idioma), dir (dirección del texto)
• title (título del elemento)
• style (información de estilo en línea)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
• bgcolor (color de fondo)
• align, char, charoff, valign (alineación en celdas)
Los elementos TR actúan como contenedores de una fila de celdas de una tabla. La etiqueta final puede omitirse.
Esta tabla de ejemplo contiene tres filas, cada una iniciada con el elemento TR:
No hay comentarios:
Publicar un comentario