Movatterモバイル変換

[0]ホーム
URL:

 anterior siguiente contenidos elementos atributos índice

11 Tablas

Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification" (más información). Puede consultar laversión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozoarroba conclase punto net. Gracias por su colaboración.

Véase elAviso de copyright de la traducción.

Contenidos

  1. Introducción a las tablas
  2. Elementos para construir tablas
    1. El elementoTABLE
    2. Títulos de tablas: el elementoCAPTION
    3. Grupos de filas: los elementosTHEAD,TFOOT yTBODY
    4. Grupos de columnas: los elementosCOLGROUP yCOL
    5. Filas de una tabla: el elementoTR
    6. Celdas de una tabla: los elementosTH yTD
  3. Formato de tablas por agentes de usuario visuales
    1. Bordes y líneas de división
    2. Alineación horizontal y vertical
    3. Márgenes de las celdas
  4. Representación de tablas por agentes de usuario no visuales
    1. Asociación de información de encabezado con celdas de datos
    2. Categorización de celdas
    3. Algoritmo para encontrar información de encabezado
  5. Tabla de muestra

11.1 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 elementoCAPTION) que proporciona una descripción corta del propósito dede la tabla. Se puede proporcionar también una descripción más larga (por mediodel atributosummary) para el provecho de las personas que utilicen agentes de usuariobasados en Braille o en voz.

Lasfilas de una tabla pueden agruparse en seccionesde encabezado, pie y cuerpo, (por medio de los elementosTHEAD,TFOOT yTBODY,respectivamente). Los grupos de filas conllevan información estructural adicionaly los agentes de usuario los pueden representar de modo que se enfatice estaestructura. Los agentes de usuario pueden sacar partido de la división entreencabezado, cuerpo y pie para permitir el desplazamiento de las secciones de cuerpoindependientemente de las secciones de cabecera y pie. Cuando se imprimentablas largas, se puede repetir en cada página la información de cabecera y pieque contienen los datos de la tabla.

Los autores también puedenagrupar columnas para proporcionarinformació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 comienzode la definición de la tabla (por medio de los elementosCOLGROUP yCOL) de tal modo que se permita a losagentes de usuario representar la tabla incrementalmente en lugar de tener queesperar a que lleguen todos los datos de la tabla antes de empezar a representarla.

Lasceldas de la tabla puede contener o bien información de "encabezado"(ver el elementoTH) o de "datos" (ver el elementoTD). Las celdas pueden ocupar varias filas ycolumnas. El modelo de tablas de HTML 4 permite a los autores dar un rótulo a cada celdade modo que losagentes de usuario no visualespuedan comunicar más fácilmente información de encabezado de la celda al usuario. Estosmecanismos no sólo ayudan considerablemente a los usuarios con discapacidades visuales,sino que además permiten manejar tablas a navegadores multi-modo sin cables conposibilidades de representación limitadas (p.ej., teléfonos con soporte web).

No deberían usarse tablas con la única finalidad de organizar la presentaciónde los contenidos de un documento (es decir, de crear el "layout"), ya que estopuede 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 desplazarhorizontalmente 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 usarhojas de estilo en lugar de tablas para organizar la presentación.

Nota. Esta especificación incluye información más detalladasobre tablas en las secciones sobrefundamentosdel diseño con tablas y cuestiones de implementación.

Aquí tenemos una tabla sencilla que ilustra algunas de las características del modelo detablas de HTML. La siguiente definición de tabla:

<TABLE border="1"       summary="Esta tabla da algunas estadísticas sobre la mosca                de la fruta: altura y peso medio, y porcentaje                con los ojos rojos (para machos y para hembras)."><CAPTION><EM>Una tabla de prueba con celdas fusionadas</EM></CAPTION><TR><TH rowspan="2"><TH colspan="2">Media    <TH rowspan="2">Ojos<BR>Rojos<TR><TH>altura<TH>peso<TR><TH>Machos<TD>1.9<TD>0.003<TD>40%<TR><TH>Hembras<TD>1.7<TD>0.002<TD>43%</TABLE>

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:

Una tabla con celdas fusionadas

11.2 Elementos para construir tablas

11.2.1 El elementoTABLE

<!ELEMENTTABLE - -     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)><!ATTLIST TABLE                        -- elemento tabla --%attrs;                              --%coreattrs,%i18n,%events --summary%Text;         #IMPLIED  -- propósito/estructura para salida por voz --width%Length;       #IMPLIED  -- anchura de la tabla --border%Pixels;       #IMPLIED  -- controlar el borde que rodea a la tabla --frame%TFrame;       #IMPLIED  -- qué partes del borde representar --rules%TRules;       #IMPLIED  -- líneas de división entre filas y columnas --cellspacing%Length;       #IMPLIED  -- espaciado entre celdas --cellpadding%Length;       #IMPLIED  -- espacio dentro de las celdas --  >

Etiqueta inicial:obligatoria, Etiqueta final:obligatoria

Definiciones de atributos

summary =texto[CS]
Este atributo proporciona un resumen del propósito y la estructura dela tabla para agentes de usuario que representen en medios no visualescomo voz o Braille.
align =left|center|right[CI]
Desaprobado. Esteatributo 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 sedetermina por el agente de usuario.

Atributos definidos en otros lugares

El elementoTABLE 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 cabolos agentes de usuario cuando representen una tabla:

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 tablasincrementalmente(es decir, a medida que llegan las filas de la tabla), en lugar de tener que esperara 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, losautores deben decir al agente de usuario:

Más concretamente, un agente de usuario puede representar una tabla en un solopaso cuando las anchuras de las columnas se especifiquen usando una combinaciónde elementosCOLGROUP yCOL. Si alguna de las columnas se especifica en términosrelativos o porcentuales (véase la sección sobre elcálculo de la anchura de las columnas), los autores deben especificar tambiénla anchura de la propia tabla.

Direccionalidad de tablas 

Ladireccionalidad de una tablaes o bien la direccionalidad heredada (por defecto es de izquierda a derecha) obien la especificada por el atributodir del elementoTABLE.

Para una tabla de izquierda a derecha, la columna cero es la del ladoizquierdo 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éasela sección sobre elcá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 tablaes de izquierda a derecha, y a la izquierda si la tabla es de derecha a izquierda.

Obsérvese queTABLE es el único elemento en el quedirinvierte el orden visual de las columnas; no puede invertirse independientementeuna fila individual (TR) ni un grupo de columnas (COLGROUP).

El atributodir, cuando se establece para un elementoTABLE,también afecta a la dirección del texto dentro de las celdas de la tabla (ya queel atributodires heredado por elementos en bloque).

Para especificar una tabla de derecha a izquierda, el atributodirse establece como sigue:

<TABLE dir="RTL">...el resto de la tabla...</TABLE>

La dirección del texto en celdas individuales puede cambiarse estableciendoel atributodiren un elemento que defina la celda. Consulte la sección sobretexto bidireccional para más informaciónsobre cuestiones de dirección del texto.

11.2.2Títulos de tablas: el elementoCAPTION

<!ELEMENTCAPTION  - - (%inline;)*     -- título de una tabla --><!ATTLIST CAPTION%attrs;                              --%coreattrs,%i18n,%events --  >

Etiqueta inicial:obligatoria, Etiqueta final:obligatoria

Definiciones de atributos

align =top|bottom|left|right[CI]
Desaprobado. Paraagentes 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

El texto del elementoCAPTION, cuando esté presente, deberíadescribir la naturaleza de latabla. El elementoCAPTION sólo se permite inmediatamente después de la etiquetainicial deTABLE. Un elementoTABLE sólo puede contener un elementoCAPTION.

Los agentes de usuario visuales permiten a las personas con visión percibirrápidamente la estructura de una tabla a partir de los encabezados así comoa partir del título. Una consecuencia de esto es que la información sobre elel propósito y la estructura de la tabla que dan los títulos normalmenteno será la adecuada desde la perspectiva de las personas que utilicen agentesde usuario no visuales.

Los autores deberían por lo tanto esforzarseen proporcionar información adicional resumiendo el propósito y laestructura de la tabla usando el atributosummary del elementoTABLE. Esto es especialmente importantepara tablas sin título. Los ejemplos que figuran más adelante ilustran el usodel atributosummary.

Los agentes de usuario visuales deberían evitarrecortar cualquierparte de la tabla, incluyendo el título, a menos que se proporcionen medios paraacceder 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 lasección sobrealgoritmos recomendadosde composición de la presentación.)

11.2.3Grupos de filas: los elementosTHEAD,TFOOT yTBODY

<!ELEMENTTHEAD    - O (TR)+           -- encabezado de tabla --><!ELEMENTTFOOT    - O (TR)+           -- pie de tabla -->

Etiqueta inicial:obligatoria, Etiqueta final:opcional

<!ELEMENTTBODY    O O (TR)+           -- cuerpo de tabla -->

Etiqueta inicial:opcional, Etiqueta final:opcional

<!ATTLIST (THEAD|TBODY|TFOOT)          -- sección de tabla --%attrs;                              --%coreattrs,%i18n,%events --%cellhalign;                         -- alineación horizontal en las celdas --%cellvalign;                         -- alineación vertical en las celdas --  >

Atributos definidos en otros lugares

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 elementosTHEAD,TFOOTyTBODY,respectivamente. Esta división permite a los agentes de usuario ofrecer la posibilidadde 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 puederepetirse en todas las páginas que contengan datos de la tabla.

La cabecera de tabla y el pie de tabla deberían contener informaciónsobre las columnas de la tabla. El cuerpo de tabla debería contener filasde datos de tabla.

En caso de estar presentes, cada elementoTHEAD,TFOOT yTBODYcontiene ungrupo 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 cuerposde tabla.

<TABLE><THEAD>     <TR>...información de cabecera...</THEAD><TFOOT>     <TR>...información de pie...</TFOOT><TBODY>     <TR>...primera fila de los datos del bloque uno...     <TR>...segunda fila de los datos del bloque uno...</TBODY><TBODY>     <TR>...primera fila de los datos del bloque dos...     <TR>...segunda fila de los datos del bloque dos...     <TR>...tercera fila de los datos del bloque dos...</TBODY></TABLE>

TFOOT debe aparecer antes deTBODY dentro de una definición deTABLEde modo que los agentes de usuario puedan representar el pie antes de recibir todaslas (potencialmente numerosas) filas de datos. A continuación se resume quéetiquetas son obligatorias y cuáles pueden omitirse:

Los analizadores de los agentes de usuario conformes deben obedecer estas reglas porrazones de compatibilidad con versiones anteriores.

La tabla del ejemplo previo puede abreviarse quitando ciertas etiquetasiniciales:

<TABLE><THEAD>     <TR>...información de cabecera...<TFOOT>     <TR>...información de pie...<TBODY>     <TR>...primera fila de los datos del bloque uno...     <TR>...segunda fila de los datos del bloque uno...<TBODY>     <TR>...primera fila de los datos del bloque dos...     <TR>...segunda fila de los datos del bloque dos...     <TR>...tercera fila de los datos del bloque dos...</TABLE>

Las seccionesTHEAD,TFOOT yTBODY deben contener el mismo número de columnas.

11.2.4Grupos de columnas: loselementosCOLGROUP yCOL

Los grupos de columnas permiten a losautores crear divisiones estructurales dentro de una tabla. Los autorespueden resaltar esta estructura por medio de hojas de estilo o con atributos HTML (p.ej., el atributorules del elementoTABLE).Para un ejemplo de presentación visual de grupos de columnas, consultelatabla de muestra.

Una tabla puede contener o bien un único grupo implícito de columnas(si no hay ningún elementoCOLGROUP delimitando las columnas), o cualquier número de gruposexplícitos de columnas (cada uno de ellos delimitado por un elementoCOLGROUP).

El elementoCOL permite a los autores compartir atributos entre varias columnassin que ello implique ningún tipo de agrupamiento estructural. El "campo de acción" delelementoCOLes el número de columnas que compartirán los atributos del elemento.

El elementoCOLGROUP 

<!ELEMENTCOLGROUP - O (COL)*          -- grupo de columnas de tabla --><!ATTLIST COLGROUP%attrs;                              --%coreattrs,%i18n,%events --spanNUMBER         1         -- número por defecto de columnas en el grupo--width%MultiLength;  #IMPLIED  -- anchura por defecto para                                          las COLs contenidas --%cellhalign;                         -- alineación horizontal en las celdas --%cellvalign;                         -- alineación vertical en las celdas --  >

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 columnasde un grupo de columnas. Los diferentes valores significan lo siguiente:
  • En ausencia de un atributospan, cadaCOLGROUP define un grupo de columnas que contiene una columna.
  • Si el atributospan se establece en N > 0, el elementoCOLGROUP actual define un grupo de columnas que contiene N columnas.

Los agentes de usuario deben ignorar este atributo si el elementoCOLGROUP contiene uno o más elementosCOL.

width =multilongitud[CN]

Este atributo especifica una anchura por defecto para cada columna del grupode columnas actual. Además de los valores normales de píxeles, porcentajesy longitudes relativas, este atributo permite la forma especial "0*" (cero asterisco)que significa que la anchura de cada columna del grupo debería ser laanchura mínima necesaria para alojar los contenidos de la columna. Estoimplica que antes de poder calcular correctamente la anchura de la columnadeben conocerse primero todos los contenidos de la columna. Los autoresdeberían tener en cuenta que al especificar "0*" impedirán a los agentesde usuario visuales representar la tabla incrementalmente.

La anchura de cualquier columna del grupo de columnas cuya anchura(width) se especifique mediante un elementoCOL prevalece sobre el valor de este atributo.

Atributos definidos en otros lugares

El elementoCOLGROUP crea un grupo explícito de columnas. El número de columnas delgrupo de columnas puede especificarse de dos maneras mutuamente exclusivas:

  1. El atributospan del elemento (valor por defecto 1) especificael número de columnas del grupo.
  2. Cada elementoCOL delCOLGROUP representa una o más columnas enel grupo.

La ventaja de usar el atributospan es que los autores puedenagrupar información sobre las anchuras de las columnas. Así, si una tabla contienecuarenta columnas, todas ellas de 20 píxeles de ancho, es más fácil escribir:

   <COLGROUP span="40" width="20">   </COLGROUP>

que:

   <COLGROUP>      <COL width="20">      <COL width="20">...un total de cuarenta elementos COL...   </COLGROUP>

Cuando sea necesario distinguir una columna del resto del grupo (p.ej., para informaciónde estilo, para especificar información de anchura, etc.), los autores debenidentificar la anchura de esa columna con un elementoCOL. Así, para aplicar información deestilo especial a la última columna del ejemplo anterior, la singularizamos delsiguiente modo:

   <COLGROUP width="20">      <COL span="39">      <COL>   </COLGROUP>

El atributowidth del elementoCOLGROUP es heredado por las cuarenta columnas. El primer elementoCOLse refiere a las primeras 39 columnas (y no hace nada especial con ellas) y elsegundo asigna un valor deid a la columna número 40 de modo que una hoja de estilo puedahacer referencia a ella.

La tabla del siguiente ejemplo contiene dos grupos de columnas. El primergrupo de columnas contiene 10 columnas y el segundo contiene 5 columnas. Laanchura 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 necesariapara cada columna.

<TABLE><COLGROUP span="10" width="50"><COLGROUP span="5" width="0*"><THEAD><TR><TD>...</TABLE>

El elementoCOL 

<!ELEMENTCOL      - O EMPTY           -- columna de tabla --><!ATTLIST COL                          -- grupos y propiedades de columnas --%attrs;                              --%coreattrs,%i18n,%events --spanNUMBER         1         -- los atributos de COL afectan a N columnas --width%MultiLength;  #IMPLIED  -- especificación de la anchura                                          de las columnas --%cellhalign;                         -- alineación horizontal en las celdas --%cellvalign;                         -- alineación vertical en las celdas --  >

Etiqueta inicial:obligatoria, Etiqueta final:prohibida

Definiciones de atributos

span =number[CN]
Este atributo, cuyo valor debe ser un entero > 0, especifica el númerode columnas que "abarca" el elementoCOL; el elementoCOL comparte sus atributos con todas lascolumnas que abarca. El valor por defecto de este atributo es 1 (es decir, el elementoCOL se refiere a una sola columna). Si el atributospan se establece en N > 1, el elementoCOLactual comparte sus atributos con las siguientes N-1 columnas.
width =multilongitud[CN]
Este atributo especifica una anchura por defecto para todas lascolumnas abarcadas por el elementoCOL actual. Tiene el mismo significado que el atributowidth del elementoCOLGROUP y prevalece sobre él.

Atributos definidos en otros lugares

El elementoCOL permite a los autores agrupar especificaciones de atributos paracolumnas de tablas.COLno agrupacolumnas estructuralmente; ése es el papel del elementoCOLGROUP. Los elementosCOL están vacíos y sólo sirven como soportede atributos. Pueden aparecer dentro o fuera de un grupo explícito de columnas(es decir, de un elementoCOLGROUP).

El atributowidth deCOL se refiere a la anchura de todasy cada una de las columnas que abarca el elemento.

Cálculo del número de columnas de unatabla 

Hay dos maneras de determinar el número de columnas de una tabla (en ordende precedencia):

  1. Si el elementoTABLE contiene algún elementoCOLGROUP oCOL,los agentes de usuario deberían calcular el número de columnas sumando losvalores siguientes:
  2. De otra manera, si el elementoTABLE no contiene elementosCOLGROUP niCOL, los agentes de usuario deberían basar el número decolumnas en lo que requieran las filas. El número de columnas es igual al númerode columnas requerido por la fila con más columnas, incluyendo las celdas que abarcanvarias columnas. Para cualquier fila que tenga menos columnas que este número decolumnas, el final de la fila debería rellenarse con celdas vacías. El "final"de una fila depende de ladireccionalidad de la tabla.

Es un error que una tabla contenga elementosCOLGROUP oCOLy 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 dela tabla, puede agruparlas engrupos de columnas.

Por ejemplo, para cada una de las tablas siguientes, los dos métodosde cálculo de columnas dan tres columnas. Las primeras tres tablas puedenrepresentarse incrementalmente.

<TABLE><COLGROUP span="3"></COLGROUP><TR><TD>......filas...</TABLE><TABLE><COLGROUP><COL><COL span="2"></COLGROUP><TR><TD>......filas...</TABLE><TABLE><COLGROUP><COL></COLGROUP><COLGROUP span="2"><TR><TD>......filas...</TABLE><TABLE><TR>  <TD><TD><TD></TR></TABLE>

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ónincremental.
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 tantolas especificaciones porcentuales permiten la representación incremental.
Proporcionales (Proportional)
Las especificaciones proporcionales (p.ej.,width="3*")se refieren a porciones de espacio horizontalrequerido por una tabla. Si seda a la anchura de la tabla un valor fijo por medio del atributowidthdel elementoTABLE, los agentes de usuario pueden representar la tabla incrementalmenteincluso con columnas proporcionales.

Sin embargo, si la tabla no tiene una anchura fija, los agentes de usuariodeben recibir todos los datos de la tabla antes de poder determinar el espaciohorizontal requerido por la tabla. Sólo entonces puede asignarse este espacioa las columnas proporcionales.

Si un autor no especifica información de anchura para una columna, un agentede usuario no puede dar formato a la tabla incrementalmente, ya que debe esperara que lleguen todos los datos de la columna para poder asignarle una anchuraadecuada.

Si las anchuras de las columnas resultan ser demasiado estrechas para loscontenidos de alguna de las celdas de la tabla, los agentes de usuario puedenoptar por remodelar la tabla.

La tabla de este ejemplo contiene seis columnas. La primera no pertenecea un grupo explícito de columnas. Las tres siguientes pertenecen al primergrupo explícito de columnas y las dos últimas pertenecen al segundo grupoexplícito de columnas. Esta tabla no puede ser formateada incrementalmenteya que contiene especificaciones de anchuras de columna proporcionales y nohay ningún valor para el atributowidth del elementoTABLE.

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 delespacio horizontal lo dividirá es seis porciones iguales (ya que 2* + 1* + 3* = 6porciones). La columna cuatro (2*) recibirá dos de estas porciones, la columnacinco (1*) recibirá una, y la columna seis (3*) recibirá tres.

    <TABLE><COLGROUP>   <COL width="30"><COLGROUP>   <COL width="30">   <COL width="0*">   <COL width="2*"><COLGROUP align="center">   <COL width="1*">   <COL width="3*" align="char" char=":"><THEAD><TR><TD>......filas...</TABLE>

Hemos establecido el valor del atributoalign del tercer grupo de columnas en"center". Todas las celdas de todas las columnas de este grupo heredarán estevalor, pero pueden anularlo. De hecho, elCOL hace justo eso, especificandoque 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 alagente de usuario dar formato a la tabla incrementalmente:

    <TABLE width="200"><COLGROUP span="10" width="15"><COLGROUP width="*">   <COL>   <COL><THEAD><TR><TD>......filas...</TABLE>

Las diez primeras columnas serán cada una de 15 píxeles de ancho. Las dos últimascolumnas recibirán cada una la mitad de los 50 píxeles restantes. Obsérvese que loselementosCOLsólo sirven para que pueda especificarse un valorid a las dos últimas columnas.

Nota. Aunque el atributowidth del elementoTABLE no está desaprobado,se aconseja a los autores usar hojas de estilo para especificar anchurasde tabla.

11.2.5Filas de una tabla: el elementoTR

<!ELEMENTTR       - O (TH|TD)+        -- fila de tabla --><!ATTLIST TR                           -- fila de tabla --%attrs;                              --%coreattrs,%i18n,%events --%cellhalign;                         -- alineación horizontal en las celdas --%cellvalign;                         -- alineación vertical en las celdas --  >

Etiqueta inicial:obligatoria, Etiqueta final:opcional

Atributos definidos en otros lugares

Los elementosTR actúan como contenedores de una fila de celdas de una tabla. La etiquetafinal puede omitirse.

Esta tabla de ejemplo contiene tres filas, cada una iniciada con el elementoTR:

<TABLE summary="Esta tabla muestra el número de tazas de                café consumidas por cada senador, el tipo                de café (descafeinado o normal), y si lo                toma con azúcar."><CAPTION>Tazas de café consumidas por cada senador</CAPTION><TR>...Una fila de encabezado...<TR>...Primera fila de datos...<TR>...Segunda fila de datos......el resto de la tabla...</TABLE>

11.2.6Celdas de una tabla: loselementosTH yTD

<!ELEMENT (TH|TD)  - O (%flow;)*       -- celda de encabezado de tabla,                                          celda de datos de tabla --><!-- Para las tablas normales scope es más simple que el atributo headers --><!ENTITY % Scope "(row|col|rowgroup|colgroup)"><!-- TH es para encabezados, TD es para datos,     y para celdas que actúen como ambos use TD --><!ATTLIST (TH|TD)                      -- celda de encabezado o de datos --%attrs;                              --%coreattrs,%i18n,%events --abbr%Text;         #IMPLIED  -- abreviatura para la celda de encabezado --axisCDATA          #IMPLIED  -- lista de encabezados relacionados                                          separados por comas --headersIDREFS         #IMPLIED  -- lista de id's de celdas de encabezado --scope%Scope;        #IMPLIED  -- campo de acción cubierto por las celdas                                          de encabezado --rowspanNUMBER         1         -- número de filas abarcado por la celda --colspanNUMBER         1         -- número de columnas abarcado por la celda --%cellhalign;                         -- alineación horizontal en las celdas --%cellvalign;                         -- alineación vertical en las celdas --  >

Etiqueta inicial:obligatoria, Etiqueta final:opcional

Definiciones de atributos

headers =idrefs[CS]
Este atributo especifica la lista de celdas de encabezado que proporcionaninformación de encabezado para la celda de datos actual. El valor de este atributoes una lista de nombres de celdas separados por comas; a estas celdas se lesdebe dar nombre estableciendo su atributoid. Generalmente los autores usanel atributoheaderspara ayudar a los agentes de usuario no visuales a representar información deencabezado sobre celdas de datos (p.ej., leyendo la información de encabezadoantes de los datos de la celda), pero el atributo también puede emplearsejunto con hojas de estilo. Véase también el atributoscope.
scope =scope-name[CI]
Este atributo especifica el conjunto de celdas de datos para lascuales la celda de encabezado actual proporciona información de encabezado.Este atributo puede usarse en lugar del atributoheaders, en particular en tablas sencillas.Si se especifica, este atributo debe tener uno de los siguientes valores:
  • row (fila): La celda actual proporciona informaciónde encabezado para el resto de la fila que la contiene (véase también lasección sobredireccionalidad de tablas).
  • col (columna): La celda actual proporciona informaciónde encabezado para el resto de la columna que la contiene.
  • rowgroup (grupo de filas): La celda de encabezado proporcionainformación de encabezado para el resto delgrupo de filasque la contiene.
  • colgroup (grupo de columnas): La celda de encabezado proporcionainformación de encabezado para el resto delgrupo de columnasque la contiene.
abbr =texto[CS]
Este atributo debería usarse para proporcionar una forma abreviada delcontenido de la celda; los agentes de usuario pueden representar esta formaabreviada en lugar del contenido de la celda cuando sea apropiado. Los nombresabreviados deberían ser cortos, ya que los agentes de usuario puedenrepresentarlos repetidas veces. Por ejemplo, los sintetizadores de voz puedenrepresentar los encabezados abreviados relacionados con una celda en particularantes de representar el contenido de esa celda.
axis =cdata[CI]
Este atributo puede utilizarse para situar una celda en categoríasconceptuales, las cuales pueden considerarse como ejes de un espacio n-dimensional.Los agentes de usuario pueden dar a los usuarios acceso a estas categorías(p.ej., el usuario puede pedir al agente de usuario todas las celdas quepertenecen a ciertas categorías, el agente usuario puede presentar una tablacon la forma de una tabla de contenidos, etc.). Consulte la sección sobrecategorización de celdas para más información.El valor de este atributo es una lista de nombres de categorías separados por comas.
rowspan =number[CN]
Este atributo especifica el número de filas abarcado por la celdaactual. El valor por defecto de este atributo es uno ("1"). El valor cero("0") significa que la celda abarca todas las filas desde la fila actualhasta la última fila de la sección de tabla (THEAD,TBODY, oTFOOT) en la que la celda estádefinida.
colspan =number[CN]
Este atributo especifica el número de columnas abarcado por la celda actual.El valor por defecto de este atributo es uno ("1"). El valor cero ("0") significaque la celda abarca todas las columnas desde la columna actual hasta la últimacolumna del grupo de columnas (COLGROUP) en que la celda está definida.
nowrap[CI]
Desaprobado. Siestá presente, este atributo booleano le dice a los agentes de usuario visualesque deshabiliten el ajuste automático de líneas (text wrapping) para esta celda.Para lograr efectos de ajuste de texto deberían usarsehojas de estilo en lugar de este atributo.Nota. Si se utiliza sin cuidado, este atributo puede resultar en celdas excesivamente anchas.
width =longitud[CN]
Desaprobado. Esteatributo proporciona a los agentes de usuario una anchura de celda recomendada.
height =longitud[CN]
Desaprobado. Esteatributo proporciona a los agentes de usuario una altura de celda recomendada.

Atributos definidos en otros lugares

Las celdas de una tabla pueden contener dos tipos de información:informaciónde encabezado ydatos. Esta distinciónpermite a los agentes de usuario representar celdas de encabezado y de datosde manera diferente, incluso en ausencia de hojas de estilo. Por ejemplo,los agentes de usuario visuales pueden presentar el texto de las celdas deencabezado con una fuente en negrita. Los sintetizadores de voz puedenrepresentar la información de encabezado con una inflexión de voz diferente.

El elementoTH define una celda que contiene información de encabezado. Los agentesde usuario tienen a su disposición dos piezas de información de encabezado: los contenidosdel elementoTHy el valor del atributoabbr. Los agentes de usuario deben representar obien los contenidos de la celda o bien el valor del atributoabbr. En medios visuales, el últimopuede ser apropiado cuando no hay espacio suficiente para representar loscontenidos completos de la celda. Para medios no visuales puede usarseabbrcomo abreviatura de los encabezados de la tabla cuando éstos se representenjunto con los contenidos de las celdas a las que se aplican.

Los atributosheaders yscope también permiten a los autores ayudar a los agentesde usuario no visuales a procesar información de encabezado. Consulte la secciónsobrerótulos de celdas para agentes de usuario novisuales para más información y ejemplos.

El elementoTD define una celda que contiene datos.

Las celdas pueden estar vacías (es decir, pueden no contener datos).

Por ejemplo, la siguiente tabla contiene cuatro columnas de datos, cadauna encabezada por una descripción de la columna.

<TABLE summary="Esta tabla muestra el número de tazas                de café consumidas por cada senador, el tipo                de café (descafeinado o normal), y si                lo toma con azúcar"><CAPTION>Tazas de café consumidas por cada senador</CAPTION><TR>   <TH>Nombre</TH>   <TH>Tazas</TH>   <TH>Tipo de Café</TH>   <TH>¿Azúcar?</TH><TR>   <TD>T. Sexton</TD>   <TD>10</TD>   <TD>Espresso</TD>   <TD>No</TD><TR>   <TD>J. Dinnen</TD>   <TD>5</TD>   <TD>Descafeinado</TD>   <TD>Sí</TD></TABLE>

Un agente de usuario que represente la salida en un dispositivo ttypodría mostrar esto como sigue:

Nombre       Tazas      Tipo de Café     ¿Azúcar?T. Sexton    10         Espresso         NoJ. Dinnen    5          Descafeinado     Sí

Celdas que abarcan varias filas ocolumnas 

Las celdas pueden abarcar varias filas o columnas. El número de filas o de columnasabarcado por una celda se establece con los atributosrowspan ycolspan de los elementosTH yTD.

En esta definición de tabla, especificamos que la celda de la fila cuatro,columna 2, debería abarcar un total de tres columnas, incluyendo la columnaactual.

<TABLE border="1"><CAPTION>Tazas de café consumidas por cada senador</CAPTION><TR><TH>Nombre<TH>Tazas<TH>Tipo de Café<TH>¿Azúcar?<TR><TD>T. Sexton<TD>10<TD>Espresso<TD>No<TR><TD>J. Dinnen<TD>5<TD>Descafeinado<TD>Sí<TR><TD>A. Soria<TD colspan="3"><em>No disponible</em></TABLE>

Un agente visual podría representar esta tabla en un dispositivo ttycomo sigue:

 Tazas de café consumidas por cada senador ----------------------------------------- |  Nombre |Tazas|Tipo de Café  |¿Azúcar?| ----------------------------------------- |T. Sexton|10   |Espresso      |No      | ----------------------------------------- |J. Dinnen|5    |Descafeinado  |Yes     | ----------------------------------------- |A. Soria |No disponible                | -----------------------------------------

El siguiente ejemplo ilustra (con la ayuda de los bordes de la tabla)cómo afectan las definiciones de celdas que abarcan más de una fila o de unacolumna a la definición de celdas posteriores. Consideremos la siguientedefinición de tabla:

<TABLE border="1"><TR><TD>1 <TD rowspan="2">2 <TD>3<TR><TD>4 <TD>6<TR><TD>7 <TD>8 <TD>9</TABLE>

Al abarcar la celda "2" la primera y la segunda filas, la definiciónde la segunda fila la tendrá en cuenta. Así, el segundoTD de la fila dos en realidaddefine la tercera celda de la fila. Visualmente, la tabla podría representarseen un dispositivo tty como sigue:

-------------| 1 | 2 | 3 | ----|   |----| 4 |   | 6 |----|---|----| 7 | 8 | 9 |-------------

mientras que un agente de usuario gráfico podría representarlo de esta forma:

Imagen de una tabla con rowspan=2

Obsérvese que si elTD que define la celda "6" hubiera sido omitido, el agente de usuariohabría añadido una celda adicional vacía para completar la fila.

Análogamente, en la siguiente definición de tabla:

<TABLE border="1"><TR><TD>1 <TD>2 <TD>3<TR><TD colspan="2">4 <TD>6<TR><TD>7 <TD>8 <TD>9</TABLE>

la celda "4" abarca dos columnas, de modo que el segundoTD de la fila en realidad define latercera celda ("6"):

-------------| 1 | 2 | 3 | --------|----| 4     | 6 |--------|----| 7 | 8 | 9 |-------------

Un agente de usuario gráfico podría representarlo de esta forma:

Imagen de una tabla con colspan=2

La definición de celdas superpuestas es un error. Los agentes de usuariopueden tratar este error de formas diferentes (p.ej., la representaciónpuede variar).

El siguiente ejemplo ilegal ilustra cómo podrían crearse celdassuperpuestas. En esta tabla, la celda "5" abarca dos filas y la celda "7"abarca dos columnas, de modo que hay una superposición en la celda que estáentre "7" y "9":

<TABLE border="1"><TR><TD>1 <TD>2 <TD>3<TR><TD>4 <TD rowspan="2">5 <TD>6<TR><TD colspan="2">7 <TD>9</TABLE>

11.3Formato de tablas por agentes de usuariovisuales

Nota. Las siguientes secciones describen los atributos HTMLrelacionados con el formato visual de tablas. Cuando esta especificación fuepublicada por primera vez en 1997,[CSS1] no ofrecía mecanismos para controlar todos los aspectosdel formato visual de tablas. Desde entonces,[CSS2] ha añadido propiedadespara permitir el formato visual de tablas.

HTML 4 incluye mecanismos para controlar:

11.3.1Bordes y líneas de división

Los atributos siguientes afectan al marco externo (frame) y a las líneas de división interiores(rules) de una tabla.

Definiciones de atributos

frame =void|above|below|hsides|lhs|rhs|vsides|box|border[CI]
Este atributo especifica qué lados del marco que rodea a una tablaserán visibles. Valores posibles:
  • void: Ningún lado. Este es el valor por defecto.
  • above: Sólo el borde superior.
  • below: Sólo el borde inferior.
  • hsides: Sólo los bordes superior e inferior.
  • vsides: Sólo los lados derecho e izquierdo.
  • lhs: Sólo el lado izquierdo.
  • rhs: Sólo el lado derecho.
  • box: Los cuatro lados.
  • border: Los cuatro lados.
rules =none|groups|rows|cols|all[CI]
Este atributo especifica qué líneas de división aparecerán entre las celdasde una tabla. La representación de las líneas de división depende del agente deusuario. Valores posibles:
  • none: Ninguna línea de división. Este es el valor por defecto.
  • groups: Sólo aparecerán líneas de división entre grupos de filas (verTHEAD,TFOOT yTBODY) y grupos de columnas (verCOLGROUP yCOL).
  • rows: Sólo aparecerán líneas de división entre filas.
  • cols: Sólo aparecerán líneas de división entre columnas.
  • all: Aparecerán líneas de división entre todas las filas y columnas.
border =píxeles[CN]
Este atributo especifica la anchura (sólo en píxeles) del marco querodea a una tabla (véase la Nota que se encuentra más abajo para más informaciónsobre este atributo).

Para ayudar a distinguir las celdas de una tabla, podemos establecerel atributoborder del elementoTABLE. Consideremos uno de losejemplos previos:

<TABLE border="1"        summary="Esta tabla muestra el número de tazas                de café consumidas por cada senador, el tipo                 de café (descafeinado o normal) y si lo                 toma con azúcar."><CAPTION>Tazas de café consumidas por cada senador</CAPTION><TR>   <TH>Nombre</TH>   <TH>Tazas</TH>   <TH>Tipo de Café</TH>   <TH>¿Azúcar?</TH><TR>   <TD>T. Sexton</TD>   <TD>10</TD>   <TD>Espresso</TD>   <TD>No</TD><TR>   <TD>J. Dinnen</TD>   <TD>5</TD>   <TD>Descafeinado</TD>   <TD>Sí</TD></TABLE>

En el siguiente ejemplo, el agente de usuario debería mostrarbordes de cinco píxeles de grosor en los lados izquierdo y derecho de latabla, con líneas de división entre cada dos columnas.

<TABLE border="5" frame="vsides" rules="cols"><TR> <TD>1 <TD>2 <TD>3<TR> <TD>4 <TD>5 <TD>6<TR> <TD>7 <TD>8 <TD>9</TABLE>

Los agentes de usuario deberían obedecer las siguientes especificacionespara conservar la compatibilidad con versiones anteriores.

Por ejemplo, las siguientes definiciones son equivalentes:

<TABLE border="2"><TABLE border="2" frame="border" rules="all">

así como las siguientes:

<TABLE border><TABLE frame="border" rules="all">

Nota. El atributoborder también define el comportamientode los bordes de los elementosOBJECT eIMG, pero toma valores diferentes para esoselementos.

11.3.2Alineación horizontal y vertical

Los siguientes atributos pueden especificarse para diferentes elementosde una tabla (véanse sus definiciones).

<!-- atributos de alineación horizontal de los contenidos de las celdas --><!ENTITY % cellhalign  "align      (left|center|right|justify|char) #IMPLIEDchar%Character;    #IMPLIED  -- carácter de alineación, p.ej. char=':' --charoff%Length;       #IMPLIED  -- offset del carácter de alineación --"  ><!-- atributos de alineación vertical para los contenidos de las celdas --><!ENTITY % cellvalign  "valign     (top|middle|bottom|baseline) #IMPLIED"  >

Definiciones de atributos

align =left|center|right|justify|char[CI]
Este atributo especifica la alineación de los datos y la justificacióndel texto de una celda. Valores posibles:
  • left: Datos a la izquierda/Texto justificado a la izquierda.
  • center: Datos centrados/Texto con justificación centrada.Este es el valor por defecto para los encabezados de las tablas.
  • right: Datos a la derecha/Texto justificado a la derecha.
  • justify: Texto doblemente justificado.
  • char: Alinear el texto alrededor de un carácter específico. Siun agente de usuario no soporta alineación alrededor de un carácter, elcomportamiento en presencia de este valor queda sin especificar.
valign =top|middle|bottom|baseline[CI]
Este atributo especifica la posición vertical de los datos dentrode una celda. Valores posibles:
  • top: Los datos de la celda se alinean con la parte superior de la celda.
  • middle: Los datos de la celda se centran verticalmente dentro de la celda.Este es el valor por defecto.
  • bottom: Los datos de la celda se alinean con la parte inferior de la celda.
  • baseline: Todas las celdas que estén en la misma fila que una celdacuyo atributovalign tenga este valor deberían tener sus datos textualesposicionados de tal modo que la primera línea de texto aparezca en una línea de basecomún para todas las celdas de la fila. Esta restricción no se aplica a las líneassubsiguientes de texto de estas celdas.
char =carácter[CN]
Este atributo especifica que un carácter individual dentro de unfragmento de texto actúe como eje de alineación. El valor por defecto paraeste atributo es el carácter de punto decimal para el idioma actual,definido por el atributolang (p.ej., el punto (".") en inglésy la coma (",") en francés). Los agentes de usuario no necesitansoportar este atributo.
charoff =longitud[CN]
Si está presente, este atributo especifica la distancia (offset) entre el bordey la primera aparición del carácter de alineación en cada línea.Si una línea no incluye el carácter de alineación, debería ser desplazadahorizontalmente hasta la posición de alineación.

Cuando se usacharoff para establecer el offset de un carácter de alineación,la dirección del desplazamiento está determinada por la dirección actualdel texto (establecida con el atributodir). En texto de izquierda a derecha (el valorpor defecto), el desplazamiento es desde el margen izquierdo. En textos dederecha a izquierda, el desplazamiento es desde el margen derecho. Losagentes de usuario no necesitan soportar este atributo.

La tabla de este ejemplo alinea una fila de valores monetarios alrededorde un punto decimal. Hemos establecido explícitamente el carácter dealineación "."

<TABLE border="1"><COLGROUP><COL><COL align="char" char="."><THEAD><TR><TH>Verdura <TH>Precio por kilo<TBODY><TR><TD>Lechuga    <TD>$1<TR><TD>Zanahorias <TD>$10.50<TR><TD>Nabos      <TD>$100.30</TABLE>

La tabla formateada puede parecerse a la siguiente:

-------------------------------|   Verdura   |Precio por kilo||-------------|---------------||Lechuga      |          $1   ||-------------|---------------||Zanahorias   |         $10.50||-------------|---------------||Nabos        |        $100.30|-------------------------------

Cuando los contenidos de una celda contienen más de una aparición delcarácter de alineación especificado porchar y los contenidos nocaben en una sola línea, el comportamiento del agente de usuario quedasin especificar. Los autores deberían por lo tanto tener cuidado cuandousenchar.

Nota. Los agentes de usuario visuales suelen representarlos elementosTHhorizontal y verticalmente centrados dentro de la celda y con una fuente ennegrita.

Herencia de las especificacionesde alineación 

La alineación de los contenidos de una celda puede especificarse independientementepara cada celda, o heredarse de los elementos que la contienen, como una fila, unacolumna, o la propia tabla.

El orden de precedencia (de más alta a más baja) de los atributosalign,char ycharoff es el siguiente:

  1. Un atributo de alineación establecido en un elemento dentro de los datosde la celda (p.ej.,P).
  2. Un atributo de alineación establecido en una celda (TH yTD).
  3. Un atributo de alineación establecido en un elemento de grupo de columnas (COL yCOLGROUP). Cuando la celda sea parte de un tramo que abarquevarias columnas, la propiedad de alineación se hereda de la definiciónde la celda al comienzo del tramo.
  4. Un atributo de alineación establecido en un elemento de fila o grupode filas (TR,THEAD,TFOOT yTBODY). Cuando una celda sea parte de un tramoque abarque varias filas, la propiedad de alineación se hereda de la definiciónde la celda al comienzo del tramo.
  5. Un atributo de alineación establecido en la tabla (TABLE).
  6. El valor por defecto de la alineación.

El orden de precedencia (de más alta a más baja) para el atributovalign(así como para los otros atributos heredadoslang,dir ystyle) es el siguiente:

  1. Un atributo establecido en un elemento dentro de los datos de la celda (p.ej.,P).
  2. Un atributo establecido en una celda (TH yTD).
  3. Un atributo establecido en un elemento de fila o grupo de filas (TR,THEAD,TFOOT yTBODY). Cuando la celda forme parte de un tramoque abarque varias filas, el valor del atributo se hereda de la definiciónde la celda al comienzo del tramo.
  4. Un atributo establecido en un elemento de grupo de columnas (COL yCOLGROUP). Cuando la celda forme parte de un tramo que abarquevarias columnas, el valor del atributo se hereda de la definición de la celdaal comienzo del tramo.
  5. Un atributo establecido en la tabla (TABLE).
  6. El valor por defecto del atributo.

Además de eso, cuando se representen celdas, para determinar la alineación horizontallas columnas tienen preferencia sobre las filas, mientras que para la alineación verticallas filas tienen preferencia sobre las columnas.

La alineación por defecto de las celdas depende del agente de usuario.Sin embargo, los agentes de usuario deberían establecer el atributo por defectosegún la direccionalidad actual (es decir, que no sea "left" en todos los casos).

Los agentes de usuario que no soporten el valor "justify" del atributoalign deberían usar en su lugar el valor heredado de la direccionalidad.

Nota. Obsérvese que una celda puede heredarun atributo no de su padre sino de la primera celda de un tramo. Esta es unaexcepción a las reglas generales de herencia de atributos.

11.3.3Márgenesde las celdas

Definiciones de atributos

cellspacing =longitud[CN]
Este atributo especifica cuánto espacio debería dejar el agente de usuarioentre el lado izquierdo de la tabla y el lado izquierdo de la columna queestá más a la izquierda, entre la parte superior de la tabla y el lado superiorde la fila que está más arriba, y lo mismo para los lados derecho e inferior.El atributo también especifica la cantidad de espacio entre celdas.
cellpadding =longitud[CN]
Este atributo especifica la cantidad de espacio entre el borde de la celday sus contenidos. Si el valor de este atributo es una longitud en píxeles,los cuatro bordes deberían estar a esta distancia de los contenidos. Si el valordel atributo es una longitud porcentual, los bordes superior e inferior deberíanestar igualmente separados del contenido según un porcentaje del espaciovertical disponible, y los bordes izquierdo y derecho deberían estarigualmente separados de los contenidos según un porcentaje del espaciohorizontal disponible.

Estos dos atributos controlan el espacio entre y dentro de las celdas.La siguiente ilustración explica cuál es la relación entre ellos:

Imagen que ilustra cómo se relacionan los atributos cellspacing y cellpadding

En el siguiente ejemplo, el atributocellspacing especifica que las celdasdeberían estar separadas entre sí y hasta el marco de la tabla por veintepíxeles. El atributocellpadding especifica que el margen superior de la celda y elmargen inferior de la celda estarán separados de los contenidos de la celda porel 10% del espacio vertical disponible (para un total del 20%). Análogamente,el borde izquierdo de la celda y el borde derecho de la celda estarán separadosde los contenidos de la celda por el 10% del espacio horizontal disponible (paraun total del 20%).

<TABLE cellspacing="20" cellpadding="20%"><TR> <TD>Dato1 <TD>Dato2 <TD>Dato3</TABLE>

Si una tabla o columna dada tiene una anchura fija,cellspacing ycellpadding pueden requerir másespacio que el asignado. Los agentes de usuario pueden dar a estos atributosprecedencia sobre el atributowidth cuando existan conflictos, pero no necesitan hacerlo.

11.4Representación de tablas por agentesde usuario no visuales

11.4.1Asociación de información deencabezado con celdas de datos

Los agentes de usuario no visuales tales como sintetizadores de vozo dispositivos Braille pueden usar los siguientes atributos de loselementosTD yTH para representar las celdas de las tablas másintuitivamente:

En el siguiente ejemplo, asignamos información de encabezado a celdaspor medio del atributoheaders. Todas las celdas de una misma columna se refieren a la mismacelda de encabezado (a través del atributoid).

<TABLE border="1"        summary="Esta tabla muestra el número de tazas                de café consumidas por cada senador, el tipo                 de café (descafeinado o normal), y si lo                 toma con azúcar."><CAPTION>Tazas de café consumidas por cada senador</CAPTION><TR>   <TH>Nombre</TH>   <TH>Tazas</TH>   <TH abbr="Tipo">Tipo de Café</TH>   <TH>¿Azúcar?</TH><TR>   <TD headers="t1">T. Sexton</TD>   <TD headers="t2">10</TD>   <TD headers="t3">Espresso</TD>   <TD headers="t4">No</TD><TR>   <TD headers="t1">J. Dinnen</TD>   <TD headers="t2">5</TD>   <TD headers="t3">Descafeinado</TD>   <TD headers="t4">Sí</TD></TABLE>

Un sintetizador de voz podría representar esta tabla de la forma siguiente:

Título:  Tazas de café consumidas por cada senadorResumen: Esta tabla muestra el número de tazas         de café consumidas por cada senador, el tipo          de café (descafeinado o normal), y si lo          toma con azúcar.Nombre: T. Sexton,  Tazas: 10,   Tipo: Espresso,  Azúcar: NoNombre: J. Dinnen,  Tazas: 5,    Tipo: Decaf,     Azúcar: Sí

Observe como se abrevia el encabezado "Tipo de Café" a "Tipo"usando el atributoabbr.

Aquí tenemos el mismo ejemplo, utilizando el atributoscope en lugar del atributoheaders. Obsérvese el valor "col" del atributoscope,que significa "todas las celdas de esta columna":

<TABLE border="1"        summary="Esta tabla muestra el número de tazas                de café consumidas por cada senador, el tipo                 de café (descafeinado o normal), y si lo                 toma con azúcar."><CAPTION>Tazas de café consumidas por cada senador</CAPTION><TR>   <TH scope="col">Nombre</TH>   <TH scope="col">Tazas</TH>   <TH scope="col" abbr="Tipo">Tipo de Café</TH>   <TH scope="col">¿Azúcar?</TH><TR>   <TD>T. Sexton</TD>   <TD>10</TD>   <TD>Espresso</TD>   <TD>No</TD><TR>   <TD>J. Dinnen</TD>   <TD>5</TD>   <TD>Descafeinado</TD>   <TD>Sí</TD></TABLE>

Aquí hay un ejemplo algo más complejo que ilustra otros valores delatributoscope:

<TABLE border="1" cellpadding="5" cellspacing="2"  summary="Cursos de historia ofrecidos en la comunidad de Bath           ordenados por nombre del curso, tutor, resumen,           código y tasas">  <TR>    <TH colspan="5" scope="colgroup">       Cursos de la Comunidad -- Bath Otoño de 1997    </TH>  </TR>  <TR>    <TH scope="col" abbr="Nombre">Nombre del Curso</TH>    <TH scope="col" abbr="Tutor">Tutor del Curso</TH>    <TH scope="col">Resumen</TH>    <TH scope="col">Código</TH>    <TH scope="col">Tasas</TH>  </TR>  <TR>    <TD scope="row">Tras la Guerra Civil</TD>    <TD>Dr. John Wroughton</TD>    <TD>       El curso examinará los años turbulentos que siguieron       a 1646 en Inglattera. <EM> Reuniones cada 6 semanas       a partir del lunes 13 de octubre.</EM>    </TD>    <TD>H27</TD>    <TD>&pound;32</TD>  </TR>  <TR>    <TD scope="row">Una introducción a la Inglaterra anglosajona</TD>    <TD>Mark Cottle</TD>    <TD>       Este curso de un día presenta una reconstrucción       de los anglosajones y de su sociedad en el       período medieval temprano. <EM>Sábado 18 de Octubre.</EM>    </TD>    <TD>H28</TD>    <TD>&pound;18</TD>  </TR>  <TR>    <TD scope="row">La gloriosa Grecia</TD>    <TD>Valerie Lorenz</TD>    <TD>      Lugar de nacimiento de la democracia y la filosofía, patria del teatro,      hogar de la discusión. Los romanos pueden haberlo hecho, pero los      griegos lo hicieron primero. <EM>Clases matutinas del sábado 25      de Octubre de 1997</EM>    </TD>    <TD>H30</TD>    <TD>&pound;18</TD>  </TR></TABLE>

Un agente de usuario gráfico podría representar esto así:

Una tabla con celdas fusionadas

Obsérvese que se usa el atributoscope con el valor "row". Aunque la primera celda de cadafila contiene datos y no información de encabezado, el atributoscopehace que la celda de datos se comporte como una celda de encabezado de fila. Estopermite a los sintetizadores de voz proporcionar el nombre del curso en cuestiónsi se le pide, o pronunciarlo inmediatamente antes del contenido de cada celda.

11.4.2Categorización deceldas

Los usuarios que navegan por una tabla con un agente de usuario basadoen voz pueden querer oír una explicación de los contenidos de una celda ademásde los propios contenidos. Un modo en que el agente de usuario podría proporcionaruna explicación es pronunciando la información de encabezado asociada antes depronunciar los contenidos de la celda de datos (véase la sección sobre laasociación de información de encabezado con celdas de datos).

Los usuarios también pueden querer información sobre más de una celda, encuyo caso proporcionar información de encabezado a nivel de celda (conheaders,scope yabbr) puede no ser lo más adecuado.Considérese la tabla siguiente, que clasifica los gastos de comida, hotely transporte en dos localidades (San Jose y Seattle) a lo largo de varios días:

Imagen de una tabla que enumera gastos de viaje en dos localidades: San Jose y Seattle, por fecha y categoría (comidas, hotel y transporte), mostrados con subtítulos

Los usuarios podrían querer extraer información de la tabla por mediode preguntas:

Cada pregunta implica un cálculo por parte del agente de usuario que puedeimplicar a cero o más celdas. Para determinar, por ejemplo, el coste de lascomidas del 25 de agosto, el agente de usuario debe saber qué celdas de la tablase refieren a "Comidas" (todas ellas), y cuáles se refieren a "Fechas" (enparticular al 25 de agosto), y encontrar la intersección de los dos conjuntos.

Para permitir este tipo de preguntas, el modelo de tablas de HTML 4 permitea los autores colocar encabezados y datos de tabla en categorías. Por ejemplo,para la tabla de gastos de viaje, un autor podría agrupar las celdas de encabezado"San Jose" y "Seattle" en la categoría "Localidad", los encabezados "Comidas", "Hotel",y "Transporte" en la categoría "Gastos", y los cuatro días en la categoría "Fecha".Las tres preguntas anteriores podrían tener entonces los significados siguientes:

Los autores categorizan una celda de encabezado o de datos estableciendoel atributoaxisde la celda. Por ejemplo, en la tabla de gastos de viaje, la celda que contiene lainformación "San Jose" podría ser colocada en la categoría "Localidad" como sigue:

  <TH axis="localidad">San Jose</TH>

Cualquier celda que contenga información relacionada con "San Jose"debería referirse a esta celda de encabezado o bien por medio del atributoheaders o bien por medio del atributoscope.Así, los gastos en comidas del 25/08/1997 deberían codificarse para quese refirieran al atributoid de la celda de encabezado "San Jose" (cuyo valor aquí es "a6"):

    <TD headers="a6">37.74</TD>

Cada atributoheaders proporciona una lista de referencias a valoresid. Los autores pueden asícategorizar una celda dada de diferentes maneras (o dicho de otra manera, porcualquier número de "headers", de ahí su nombre).

Abajo hemos codificado la tabla de gastos de viaje con información sobre categorías:

<TABLE border="1"       summary="Esta tabla resume los gastos                producidos durante los viajes a                San Jose y a Seattle en agosto"><CAPTION>  Informe de Gastos de Viaje</CAPTION><TR>  <TH></TH>  <TH axis="gastos">Comidas</TH>  <TH axis="gastos">Hotel</TH>  <TH axis="gastos">Transporte</TH>  <TD>subtotales</TD></TR><TR>  <TH axis="localidad">San Jose</TH>  <TH></TH>  <TH></TH>  <TH></TH>  <TD></TD></TR><TR>  <TD axis="fecha">25/08/1997</TD>  <TD headers="a6 a7 a2">37.74</TD>  <TD headers="a6 a7 a3">112.00</TD>  <TD headers="a6 a7 a4">45.00</TD>  <TD></TD></TR><TR>  <TD axis="fecha">26/08/1997</TD>  <TD headers="a6 a8 a2">27.28</TD>  <TD headers="a6 a8 a3">112.00</TD>  <TD headers="a6 a8 a4">45.00</TD>  <TD></TD></TR><TR>  <TD>subtotales</TD>  <TD>65.02</TD>  <TD>224.00</TD>  <TD>90.00</TD>  <TD>379.02</TD></TR><TR>  <TH axis="localidad">Seattle</TH>  <TH></TH>  <TH></TH>  <TH></TH>  <TD></TD></TR><TR>  <TD axis="fecha">27/08/1997</TD>  <TD headers="a10 a11 a2">96.25</TD>  <TD headers="a10 a11 a3">109.00</TD>  <TD headers="a10 a11 a4">36.00</TD>  <TD></TD></TR><TR>  <TD axis="fecha">28/08/1997</TD>  <TD headers="a10 a12 a2">35.00</TD>  <TD headers="a10 a12 a3">109.00</TD>  <TD headers="a10 a12 a4">36.00</TD>  <TD></TD></TR><TR>  <TD>subtotales</TD>  <TD>131.25</TD>  <TD>218.00</TD>  <TD>72.00</TD>  <TD>421.25</TD></TR><TR>  <TH>Totales</TH>  <TD>196.27</TD>  <TD>442.00</TD>  <TD>162.00</TD>  <TD>800.27</TD></TR></TABLE>

Obsérvese que al codificar la tabla de esta manera, los agentesde usuario pueden evitar confundir al usuario con información no deseada.Por ejemplo, si un sintetizador de voz tuviera que pronunciar todaslas cifras de la columna "Comidas" de esta tabla en respuesta a la pregunta"¿Cuánto me gasté en comidas?", un usuario no podría distinguir losgastos diarios subtotales de los totales. Categorizando cuidadosamentelos datos de las celdas, los autores permiten a los agentes de usuariohacer distinciones semánticas importantes en la representación.

Por supuesto, no hay límites en cuanto a la forma en que los autores puedencategorizar la información de una tabla. Por ejemplo, en la tabla de gastosde viaje, podríamos añadir las categorías adicionales "subtotales" y "totales".

Esta especificación no exige a los agentes de usuario que tratenla información proporcionada por el atributoaxis, ni hace ninguna recomendaciónsobre cómo pueden presentar los agentes de usuario la información deaxisa los usuarios, ni sobre cómo pueden preguntar los usuarios al agente de usuariosobre esta información.

Sin embargo, los agentes de usuario, en particular los sintetizadoresde voz, podrían extraer la información que las distintas celdasresultado de una pregunta tienen en común. Por ejemplo, si el usuariopregunta "¿Cuánto me gasté en comidas en San Jose?", el agente de usuario podríadeterminar primero las celdas en cuestión (25/08/1997: 37.74, 26/08/1997: 27.28),y después representar esta información. Un agente de usuario que pronuncieesta información podría leerla así:

   Localidad: San Jose. Fecha: 25/08/1997. Gastos, Comidas: 37.74   Localidad: San Jose. Fecha: 26/08/1997. Gastos, Comidas: 27.28

o más compacto:

   San Jose, 25/08/1997, Comidas: 37.74   San Jose, 26/08/1997, Comidas: 27.28

Se obtendría una representación aún más económica sacando la informacióncomún y reordenándola:

   San Jose, Comidas, 25/08/1997: 37.74                      26/08/1997: 27.28

Los agentes de usuario que soporten este tipo de representación deberíanpermitir a los usuarios personalizar la representación (p.ej., con hojas de estilo).

11.4.3Algoritmo para encontrarinformación de encabezado

En ausencia de información de encabezado de los atributosscope oheaders, los agentes de usuario pueden construir información deencabezado de acuerdo con el siguiente algoritmo. El fin del algoritmo esencontrar una lista ordenada de encabezados. (En la descripción del algoritmoque sigue, se supone que ladireccionalidadde la tabla es de izquierda a derecha.)

11.5Tabla de muestra

Esta muestra ilustra el agrupamiento de filas y columnas. Este ejemploestá adaptado de "Developing International Software", por Nadine Kano.

En "arte ascii", la siguiente tabla:

<TABLE border="2" frame="hsides" rules="groups"       summary="Páginas de códigos soportadas por las diferentes versiones                de MS Windows."><CAPTION>PAGINAS DE CODIGOS SOPORTADAS POR MICROSOFT WINDOWS</CAPTION><COLGROUP align="center"><COLGROUP align="left"><COLGROUP align="center" span="2"><COLGROUP align="center" span="3"><THEAD valign="top"><TR><TH>ID<BR>Code-Page<TH>Nombre<TH>ACP<TH>OEMCP<TH>Windows<BR>NT 3.1<TH>Windows<BR>NT 3.51<TH>Windows<BR>95<TBODY><TR><TD>1200<TD>Unicode (BMP de ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*<TR><TD>1250<TD>Windows 3.1 Europa del Este<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1251<TD>Windows 3.1 Cirílico<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1253<TD>Windows 3.1 Griego<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1254<TD>Windows 3.1 Turco<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1255<TD>Hebreo<TD>X<TD><TD><TD><TD>X<TR><TD>1256<TD>Árabe<TD>X<TD><TD><TD><TD>X<TR><TD>1257<TD>Bálticp<TD>X<TD><TD><TD><TD>X<TR><TD>1361<TD>Coreano (Johab)<TD>X<TD><TD><TD>**<TD>X<TBODY><TR><TD>437<TD>MS-DOS Estados Unidos<TD><TD>X<TD>X<TD>X<TD>X<TR><TD>708<TD>Árabe (ASMO 708)<TD><TD>X<TD><TD><TD>X<TR><TD>709<TD>Árabe (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X<TR><TD>710<TD>Árabe (Árabe Transparente)<TD><TD>X<TD><TD><TD>X<TR><TD>720<TD>Árabe (ASMO Transparente)<TD><TD>X<TD><TD><TD>X</TABLE>

se representaría de forma parecida a ésta:

              PAGINAS DE CODIGOS SOPORTADAS POR MICROSOFT WINDOWS===============================================================================    ID    | Nombre                       | ACP  OEMCP | Windows Windows WindowsCode-Page |                              |            |  NT 3.1 NT 3.51    95-------------------------------------------------------------------------------   1200   | Unicode (BMP de ISO 10646)   |            |    X       X       *   1250   | Windows 3.1 Europa del Este  |  X         |    X       X       X   1251   | Windows 3.1 Cirílico         |  X         |    X       X       X   1252   | Windows 3.1 US (ANSI)        |  X         |    X       X       X   1253   | Windows 3.1 Griego           |  X         |    X       X       X   1254   | Windows 3.1 Turco            |  X         |    X       X       X   1255   | Hebreo                       |  X         |                    X   1256   | Árabe                        |  X         |                    X   1257   | Báltico                      |  X         |                    X   1361   | Coreano (Johab)              |  X         |            **      X-------------------------------------------------------------------------------    437   | MS-DOS Estados Unidos        |        X   |    X       X       X    708   | Árabe (ASMO 708)             |        X   |                    X    709   | Árabe (ASMO 449+, BCON V4)   |        X   |                    X    710   | Árabe (Árabe Transparente)   |        X   |                    X    720   | Árabe (ASMO Transparente)    |        X   |                    X===============================================================================

Un agente de usuario gráfico podría representarlo así:

Una tabla con filas y columnas agrupadas

Este ejemplo ilustra cómo puede usarseCOLGROUP para agrupar columnas y paraestablecer la alineación por defecto de las columnas. Análogamente se utilizaTBODY paraagrupar filas. Los atributosframe yrules dicen al agente de usuario qué bordesy líneas de división representar.

anterior siguiente contenidos elementos atributos índice
[8]ページ先頭
©2009-2025 Movatter.jp