17 Tablas

Contenidos

17.1 Introducción a las tablas

Las tablas representan relaciones entre datos. Los autores especifican estas relaciones en el lenguaje del documento y especifican su presentación en CSS, de dos maneras: visualmente y auditivamente.

Los autores pueden especificar el formato visual de una tabla como una grilla rectangular de celdas. Las filas y columnas de celdas pueden organizarse en grupos de filas y en grupos de columnas. Las filas, columnas, grupos de filas, grupos de columnas y las celdas pueden tener bordes dibujados alrededor de ellos (hay dos modelos de bordes en CSS2). Los autores pueden alinear los datos verticalmente u horizontalmente dentro de la celda y alinear los datos en todas las celdas de una fila o columna.

Los autores también pueden especificar el procesamiento auditivo de una tabla; cómo serán leídos los títulos y los datos. En el lenguaje del documento, los autores pueden etiquetar las celdas y los grupos de celdas de manera que cuando son procesadas auditivamente, los títulos de las celdas son expresados antes que los datos de la celda. En realidad, esto "serializa" la tabla: los usuarios que recorren la tabla auditivamente escuchan una secuencia de títulos seguidos por los datos.

Ejemplo(s):

Aquí hay una tabla simple descripta en HTML 4.0 de tres filas y tres columnas:

<TABLE>
<CAPTION>Esta es una tabla simple de 3x3</CAPTION>
<TR id="fila1">
   <TH>Título 1      <TD>Celda 1        <TD>Celda 2
<TR id="fila2">
   <TH>Título 2      <TD>Celda 3        <TD>Celda 4
<TR id="fila3">
   <TH>Título 3      <TD>Celda 5        <TD>Celda 6
</TABLE>

Este código crea una tabla (el elemento TABLE), tres filas (los elementos TR), tres celdas de título (los elementos TH) y seis celdas de datos (los elementos TD). Observe que las tres columnas de este ejemplo están especificadas implícitamente: hay tantas columnas en la tabla como se requiere para las celdas de los títulos y los datos.

La siguiente regla CSS centra horizontalmente el texto en las celdas de títulos y presenta los datos con una fuente en negritas:

TH { text-align: center; font-weight: bold }

Las siguientes reglas alínean el texto de las celdas de títulos por su línea de base y centra verticalmente el texto en cada celda de datos:

TH { vertical-align: baseline }
TD { vertical-align: middle }

Las reglas siguientes especifican que la fila superior será rodeada con un borde sólido azul de 3px y cada una de las otras filas serán rodeadas con un borde sólido negro de 1px:

TABLE   { border-collapse: collapse }
TR#fila1 { border-top: 3px solid blue }
TR#fila2 { border-top: 1px solid black }
TR#fila3 { border-top: 1px solid black }

Observe, sin embargo, que los bordes alrededor de las filas se superponen cuando las filas se juntan. ¿De qué color (negro o azul) y grosor (1px o 3px) será el borde entre fila1 y fila2? Discutiremos esto en la sección sobre resolución de los conflictos de borde.

La siguiente regla coloca el encabezado de la tabla encima de la tabla:

CAPTION { caption-side: top }

Finalmente, la siguiente regla especifica que, cuando sea procesada auditivamente, cada fila de datos se expresará con un "Título, Datos, Datos":

TH { speak-header: once }

Por ejemplo, la primer fila sería leída como "Titulo1 Celda1 Celda2". Por otra parte, con la siguiente regla:

TH { speak-header: always }

sería expresada como "Título1 Celda1 Título1 Celda2".

El ejemplo precedente muestra cómo CSS trabaja con los elementos de HTML 4.0; en HTML 4.0, la semántica de los distintos elementos de la tabla (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH y TD) están bien definidos. En otros lenguajes de documento (como las aplicaciones XML) pueden no existir elementos predefinidos para la tabla. Por eso, CSS2 permite a los autores "asignar" a los elementos del lenguaje del documento, elementos de la tabla a través de la propiedad 'display'. Por ejemplo, la siguiente regla hace que el elemento FOO actúe como un elemento HTML TABLE y el elemento BAR actúe como un elemento CAPTION:

FOO { display : table }
BAR { display : table-caption }

Discutiremos los diversos elementos de la tabla en la sección siguiente. En esta especificación, el término elemento de la tabla se refiere a cualquier elemento involucrado en la creación de una tabla. Un elemento "interno" de la tabla es uno que produce una fila, un grupo de filas, una columna, un grupo de columnas o una celda.

17.2 El modelo de tabla CSS

El modelo de tabla CSS está basado en el modelo de tabla de HTML 4.0, en el que la estructura de una tabla parangona estrechamente la composición visual de la tabla. En este modelo, una tabla consiste de un encabezamiento opcional y cualquier número de filas y columnas. Se dice que el modelo de tabla es "principalmente de filas" porque los autores especifican filas, no columnas, explícitamente en el lenguaje del documento. Las columnas se derivan una vez que las filas han sido especificadas (la primer celda de cada fila pertenece a la primer columna, la segunda a la segunda columna, etc.). Las filas y columnas pueden se agrupadas estructuralmente y este agrupación se refleja en la presentación (ej., puede dibujarse un borde alrededor de un grupo de filas).

Así, el modelo de tabla consiste en tablas, encabezados, filas, grupos de filas, columnas, grupos de columnas y celdas.

El modelo CSS no requiere que el lenguaje del documento incluya elementos que correspondan a cada uno estos componentes. Para lenguajes de documento (como las aplicaciones XML) que no tienen los elementos de la tabla predefinidos, los autores pueden asignar a los elementos del lenguaje de documento los elementos de la tabla; esto se hace con la propiedad 'display'. Los siguientes valores para 'display' asignan la semántica de la tabla a un elemento arbitrario:

table (En HTML: TABLE)
Especifica que un elemento define una tabla a nivel de bloque: es un bloque rectangular que participa de un contexto de formato de bloque.
inline-table (En HTML: TABLE)
Especifica que un elemento define una tabla a nivel de línea: es un bloque rectangular que participa de un contexto de formato de línea).
table-row (En HTML: TR)
Especifica que un elemento es una fila de celdas.
table-row-group (En HTML: TBODY)
Especifica que un elemento agrupa una o más filas.
table-header-group (En HTML: THEAD)
Como 'table-row-group', pero para el formato visual, el grupo de filas es siempre mostrado antes que todas las otras filas y grupos de filas y después de los encabezados superiores. Las aplicaciones del usuario que imprimen pueden repetir las filas de encabezado de página en cada página ocupada por una tabla.
table-footer-group (En HTML: TFOOT)
Como 'tabla-row-group', pero para el formato visual, el grupo de filas es siempre mostrado después que todas las otras filas y grupos de filas y antes de los encabezamientos inferiores. Las aplicaciones del usuario que imprimen pueden repetir las filas de pie de página en cada página ocupada por una tabla.
table-column (En HTML: COL)
Especifica que un elemento describe una columna de celdas.
table-column-group (En HTML: COLGROUP)
Especifica que un elemento agrupa una o más columnas.
table-cell (En HTML: TD, TH)
Especifica que un elemento representa una celda de la tabla.
table-caption (En HTML: CAPTION)
Especifica un encabezado para la tabla.

Los elementos con 'display' definido como 'table-column' o 'table-column-group' no son procesados (exactamente como si tuvieran 'display: none'), pero son útiles porque pueden tener atributos que inducen a cierto estilo para las columnas que representan.

La hoja de estilo predeterminada para HTML 4.0 en el apéndice, ilustra el uso de estos valores en HTML 4.0:

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

Las aplicaciones del usuario pueden ignorar estos valores para la propiedad 'display' en documentos HTML, ya que los autores no deben alterar el comportamiento esperado de un elemento.

17.2.1 Objetos anónimos de la tabla

Otros lenguajes de documento fuera de HTML pueden no contener todos los elementos del modelo de tabla CSS2. En este caso, los elementos "faltantes" deben asumirse para que el modelo de tabla funcione. Los elementos faltantes generan objetos anónimos (ej., cajas anónimas en la composición visual de la tabla) de acuerdo con las siguientes reglas:

  1. Cualquier elemento de la tabla generará automáticamente, alrededor de sí mismo, los objetos anónimos de tabla necesarios, que consisten en tres objetos anidados correspondientes a un elemento 'table'/'inline-table', un elemento 'table-row' y un elemento 'table-cell'.
  2. Si el padre P de un elemento 'table-cell' T no es un elemento 'table-row', un objeto correspondiente a 'table-row' será generado entre P y T. Este objeto abarcará todos los hermanos 'table-cell' consecutivos (en la estructura del documento) de T.
  3. Si el padre P de un elemento 'table-row' T no es un elemento 'table', 'inline-table' o 'table-row-group', un objeto correspondiente al elemento 'table' será generado entre P y T. Esto objeto abarcará todos los hermanos consecutivos (en la estructura del documento) de T que requieran un padre 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' y 'caption'.
  4. Si el padre P de un elemento 'table-row-group' (o 'table-header-group' o 'table-footer-group') T no es un elemento 'table' o 'inline-table', un objeto correspondiente a un elemento 'table' será generado entre P y T. Este objeto abarcará todos los hermanos consecutivos (en la estructura del documento) de T que requieran un padre 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' y 'caption'.
  5. Si un hijo T de un elemento 'table-row' P no es un elemento 'table-cell', un objeto correspondiente a un elemento 'table-cell' será generado entre P y T. Este objeto abarcará todos los hermanos consecutivos de T que no sean elementos 'table-cell'.

Ejemplo(s):

En este ejemplo XML, un elemento 'table' se asume para contener al elemento HBOX:

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

porque la hoja de estilo asociada es:

HBOX { display: table-row }
VBOX { display: table-cell }

Ejemplo(s):

En este ejemplo, tres elementos 'table-cell' se asumen para contener el texto de cada FILA. Observe que el texto es además encapsulado en cajas de línea anónimas, como se explica en el modelo de formato visual:

<PILA>
  <FILA>Esta es la fila <D>superior</D>.</FILA>
  <FILA>Esta es la fila <D>media</D>.</FILA>
  <FILA>Esta es la fila <D>inferior</D>.</FILA>
</PILA>

La hoja de estilo es:

PILA { display: inline-table }
FILA   { display: table-row }
D     { display: inline; font-weight: bolder }

No se exige a las aplicaciones del usuario HTML que creen objetos anónimos según las reglas anteriores.

17.3 Selectores de columnas

Las celdas de la tabla pueden pertenecer a dos contextos: filas y columnas. Sin embargo, en el documento fuente las celdas son descendientes de las filas, nunca de las columnas. No obstante, algunos aspectos de las celdas pueden ser influenciados poniendo propiedades a las columnas.

Las siguientes propiedades se aplican a los elementos columna y grupo de columnas:

'border'
Las distintas propiedades de borde se aplican a las columnas sólo si 'border-collapse' es definido como 'collapse' en el elemento tabla. En ese caso, los bordes definidos para las columnas y grupos de columnas son introducidos al algoritmo de resolución de conflictos que elige el estilo de borde para cada lado de la celda.
'background'
Las propiedades background determinan el fondo de las celdas en la columna, pero sólo si tanto la celda como la fila tienen fondos transparentes. Ver "Capas y transparencia de la tabla".
'width'
La propiedad 'width' determina el ancho mínimo de la columna.
'visibility'
Si en una columna, 'visibility' es puesta como 'collapse' ninguna de las celdas de la columna es procesada, y las celdas que abarcan otras columnas son recortadas. Además, el ancho de la tabla es disminuido en el ancho de la columna que se hubiera quitado. Ver "Efectos dinámicos" abajo. Otros valores para 'visibility' no tienen ningún efecto.

Ejemplo(s):

Aquí hay algunos ejemplos de reglas de estilo que ponen propiedades a las columnas. Las primeras dos reglas juntas implementan el atributo "rules" de HTML 4.0 con un valor de "cols". La tercer regla hace que la columna "totales" sea azul, las dos reglas finales muestran cómo hacer una columna de tamaño fijo, usando el algoritmo de estructura fija.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totales { background: blue }
TABLE { table-layout: fixed }
COL.totales { width: 5em }

17.4 Las tablas en el modelo de formato visual

En los términos del modelo de formato visual, una tabla debe funcionar como un elemento a nivel de bloque o un elemento a niel de línea reemplazado. Las tablas tienen contenido, relleno, bordes y márgenes.

En ambos casos, el elemento tabla genera una caja anónima que contiene a la propia caja de la tabla y a la caja del encabezado (si está presente). Las cajas de la tabla y el encabezado retienen sus propias áreas de contenido, relleno, márgenes y bordes, y las dimensiones de la caja rectangular anónima son las mínimas requeridas para contener a ambas. Los márgenes verticales se cierran donde la caja de la tabla y la caja del encabezado se tocan. Cualquier reposicionamiento de la tabla debe mover la caja anónima entera, no sólo la caja de la tabla, de modo que el encabezado siga a la tabla.

Una tabla con un encabezado encima de ella; ambos tienen márgenes y los márgenes entre ellas se cierran, como es normal con los márgenes verticales.   [D]

Diagrama de una tabla con un encabezado encima de ella; el margen inferior del encabezado se cierra con el margen superior de la tabla.

17.4.1 Posición y alineación del encabezado

'caption-side'
Valor:  top | bottom | left | right | inherit
Inicial:  top
Se aplica a:  los elementos 'table-caption'
Se hereda:  si
Porcentajes:  N/A
Medios:  visuales

Esta propiedad especifica la posición de la caja del encabezado con respecto a la caja de la tabla. Los valores tienen los siguientes significados:

top
Coloca la caja del encabezado encima de la caja de la tabla.
bottom
Coloca la caja del encabezado abajo de la caja de la tabla.
left
Coloca la caja del encabezado a la izquierda de la caja de la tabla.
right
Coloca la caja del encabezado a la derecha de la caja de la tabla.

Los encabezados encima o debajo del elemento 'table' son estructurados mucho más como si fueran un elemento de bloque antes o después de la tabla, excepto que (1) heredan las propiedades hereditables de la tabla, y (2) no se consideran como una caja de bloque para el próposito de ningún elemento 'compact' o 'run-in' que pueda preceder a la tabla.

Un encabezado que está arriba o debajo de una caja de tabla también se comporta como una caja de bloque para el cálculo del ancho; el ancho es computado con respecto al ancho del bloque de contención de la caja de la tabla.

Para un encabezado que está a la izquierda o a la derecha de la caja de la tabla, por otro lado, un valor distinto a 'auto' en 'width' pone el ancho explícitamente, pero 'auto' le dice a la aplicación del usuario que elija un "ancho razonable". Este puede variar entre "la caja más angosta posible" y "una sola línea", de modo que recomendamos que los usuarios no especifiquen 'auto' para el ancho de los encabezados sobre la izquierda o derecha.

Para alinear horizontalmente el contenido del encabezado dentro de la caja del encabezado, use la propiedad 'text-align'. Para la alineación vertical de una caja de encabezado sobre la izquierda o derecha con respecto a la caja de la tabla, use la propiedad 'vertical-align'. Los únicos valores significativos en este caso son 'top', 'middle' y 'bottom'. Todos los demás valores son tratados como 'top'.

Ejemplo(s):

En este ejemplo, la propiedad 'caption-side' coloca los encabezados debajo de las tablas. El encabezado será tan ancho como el padre de la tabla y el texto del encabezado estará justificado a la izquierda.

CAPTION { caption-side: bottom; 
          width: auto;
          text-align: left }

Ejemplo(s):

El siguiente ejemplo muestra como poner un encabezado en el margen izquierdo. La tabla en sí misma está centrada, definiendo sus márgenes izquierdo y derecho como 'auto', y la caja global con la tabla y el encabezado es desplazada dentro del margen izquierdo en la misma medida que el ancho del encabezado.

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}

Asumiendo que el ancho de la tabla es menor que el ancho disponible, el formato será similar a esto:

Una tabla centrada con un encabezado sobre el margen izquierdo de la página   [D]

Diagrama mostrando una tabla centrada con el encabezado extendido dentro del margen izquierdo, como resultado de una propiedad 'margin-left' negativa.

17.5 Composición visual del contenido de las tablas

Como otros elementos del lenguaje del documento, los elementos internos de la tabla generan cajas rectangulares con contenido, relleno y bordes. No tienen márgenes, sin embargo.

La composición visual de estas cajas está gobernada por una grilla rectangular e irregular de filas y columnas. Cada caja ocupa un número entero de celdas de la grilla, determinado de acuerdo a las siguientes reglas. Estas reglas no se aplican a HTML 4.0 o a versiones más antiguas de HTML; HTML impone sus propias limitaciones al alcance de las filas y columnas.

  1. Cada caja de fila ocupa un fila de celdas de la grilla. Juntas, las cajas de filas llenan la tabla desde arriba hacia abajo en el orden en que aparecen en el documento fuente (es decir, la tabla ocupa exactamente tantas filas de la grilla como elementos fila existen).
  2. Un grupo de filas ocupa tantas celdas de la grilla como las filas que contiene.
  3. Una caja de columna ocupa una o más columnas de celdas de la grilla. Las cajas de columnas son colocadas una al lado de otra en el orden en que aparecen. La primer caja de columna puede estar a la izquierda o a la derecha, depende del valor de la propiedad 'direction' de la tabla.
  4. Una caja de un grupo de columnas ocupan tantas celdas de la grilla como las columnas que contiene.
  5. Las celdas pueden abarcar varias filas o columnas. (Aunque CSS2 no define como se determina el número de filas y columnas abarcadas, una aplicación del usuario puede tener un conocimiento especial acerca del documento fuente; una versión futura de CSS puede proporcionar una manera de expresar este conocimiento en la sintaxis de CSS.) Cada celda es, en consecuencia, una caja rectangular, de una o más celdas de la grilla de ancho y de alto. La fila superior de este rectángulo es la fila especificada por el padre de la celda. El rectángulo debe estar tan a la izquierda como sea posible, pero no puede encimarse con ninguna otra caja de celda, y debe estar a la derecha de todas las celdas de la misma fila que aparecen antes en el documento fuente. (Esta restricción se mantiene mientras la propiedad 'direction' de la tabla sea 'ltr'; si 'direction' es 'rtl', intercambie "izquierda" y "derecha" en la oración anterior.)
  6. Una caja de celda no puede extenderse más allá de la caja de la última fila o grupo de filas de una tabla; las aplicaciones del usuario deben acortarla hasta que se ajuste.

Nota. Las celdas de la tabla pueden ser posicionadas relativa y absolutamente, pero no se recomienda: el posicionamiento y la flotación quitan a una caja del flujo, afectando la alineación de la tabla.

Aquí hay dos ejemplos. El primero se supone que aparece en un documento HTML:

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>
<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

La segunda tabla es estructurada como en la figura de la derecha. Sin embargo, el procesamiento de las tablas en HTML está explícitamente indefinido por HTML, y CSS no trata de definirlo. Las aplicaciones del usuario son libres de procesarlas, por ejemplo, como en la figura de la izquierda.

Una tabla con celdas superpuestas y una sin superposición   [D]

A la izquierda, un posible procesamiento de una equivocada tabla en HTML 4.0; a la derecha, el único formato posible de una tabla no HTML similar.

17.5.1 Capas y transparencia en la tabla

Con el propósito de encontrar el fondo de cada celda de la tabla, los distintos elementos de la tabla pueden considerarse como si estuvieran en seis capas superpuestas. El fondo aplicado a un elemento de una de estas capas sólo será visible si las capas encima de ella tienen un fondo transparente.

esquema de las capas de la tabla   [D]

Esquema de las capas de la tabla.

  1. La capa inferior es un simple plano, representando la caja de la tabla en sí. Como todas las cajas, puede ser transparente.

  2. La capa siguiente contiene los grupos de columnas. Los grupos de columnas son tan altos como la tabla, pero no necesariamente cubren horizontalmente toda la tabla.

  3. Sobre los grupos de columnas están las áreas representando las cajas de las columnas. Como los grupos de columnas, las columnas son tan altas como la tabla, pero no necesariamente cubren horizontalmente toda la tabla.

  4. La siguiente es la capa que contiene los grupos de filas. Cada grupo de filas es tan ancho como la tabla. Juntos, los grupos de filas cubren completamente la tabla desde arriba hasta abajo.

  5. La penúltima capa contiene las filas. Las filas también cubren toda la tabla.

  6. La capa superior contiene las propias celdas. Como muestra la figura, aunque todas las filas contienen el mismo número de celdas, puede que no todas las celdas tengan especificado un contenido. Estas celdas "vacías" son transparentes, dejando ver a través de ellas las capas inferiores.

En el siguiente ejemplo, la primer fila contiene cuatro celdas, pero la segunda fila no contiene ninguna celda, y así el fondo de la tabla se distingue a través, excepto donde una celda de la primera fila alcanza hasta esta fila. El siguiente código HTML y reglas de estilo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1 
        <TD rowspan="2"> 2
        <TD> 3 
        <TD> 4 
      </TR>
      <TR><TD></TD></TR>
    </TABLE> 
  </BODY>
</HTML>

podría tener el siguiente formato:

Tabla con tres celdas vacías en la fila inferior   [D]

Tabla con tres celdas vacías en la fila inferior.

17.5.2 Algoritmos para el ancho de la tabla: la propiedad 'table-layout'

CSS no define una composición "óptima" para las tablas porque, en muchos casos, lo óptimo es una cuestión de gustos. CSS define restricciones que las aplicaciones del usuario deben respetar cuando componen una tabla. Las aplicaciones del usuario pueden usar el algoritmo que deseen para hacerlo y tienen libertad para privilegiar la velocidad de procesamiento por sobre la precisión, excepto cuando se selecciona el "algoritmo de estructura fija"

'table-layout'
Valor:  auto | fixed | inherit
Inicial:  auto
Se aplica a:  los elementos 'table' e 'inline-table'
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales

La propiedad 'table-layout' controla el algoritmo usado para armar las celdas, filas y columnas de la tabla. Los valores tienen los siguientes significados:

fixed
Se usa el algoritmo de estructura fija
auto
Se usa cualquier algoritmo automático de composición de tablas

Los dos algoritmos se describen abajo.

Composición fija de la tabla

Con este (rápido) algoritmo, la composición horizontal de la tabla no depende del contenido de las celdas; sólo depende del ancho de la tabla, el ancho de las columnas y los bordes o espaciado de las celdas.

El ancho de la tabla puede especificarse explícitamente con la propiedad 'width'. Un valor 'auto' (tanto para 'display: table' como para 'display: inline-table') significa que se usa el algoritmo de estructura automática de la tabla.

En el algoritmo de estructura fija de la tabla, el ancho de cada columna se determina de la siguiente manera:

  1. Un elemento columna con un valor distinto a 'auto' para la propiedad 'width' determina el ancho de esa columna.
  2. Si no, una celda de la primer fila con un valor distinto a 'auto' para la propiedad 'width' determina el ancho de esa columna. Si la celda abarca más de una columna, el ancho se divide entre las columnas.
  3. Las columnas restantes se dividen el espacio horizontal restante de la tabla (menos los bordes o el espaciado de las celdas).

El ancho de la tabla es entonces el mayor valor de la propiedad 'width' para el elemento tabla y la suma de los anchos de las columnas (más el espaciado de las celdas o los bordes). Si la tabla es más ancha que las columnas, el espacio extra debe ser distribuido entre las columnas.

De esta manera, la aplicación del usuario puede comenzar a construir la tabla una vez que ha recibido la primer fila completa. Las celdas de las filas subsecuentes no afectan el ancho de las columnas. Cualquier celda con un contenido que la desborda utiliza la propiedad 'overflow' para determinar si recorta el contenido que desborda.

Composición automática de la tabla

En este algoritmo (que generalmente no requiere más de dos pasos), el ancho de la tabla está dado por el ancho de sus columnas (y los bordes que intervienen). Este algoritmo refleja el comportamiento de algunas populares aplicaciones del usuario HTML en el momento de redactar esta especificación. Las AU no necesitan implementar este algoritmo para determinar la estructura de composición de la tabla en el caso en que 'table-layout' sea 'auto'; pueden usar cualquier otro algoritmo.

Este algoritmo puede resultar ineficiente dado que requiere a las aplicaciones del usario tener acceso a todo el contenido de la tabla antes de determinar la composición final y puede demandar más de una pasada.

El ancho de las columnas se determina del siguiente modo:

  1. Se calcula el ancho mínimo del contenido (AMC) de cada celda: el contenido estructurado puede abarcar cualquier cantidad de líneas pero no puede desbordar la caja de la celda. Si el ancho (A) especificado para la celda es mayor que AMC, A es el ancho mínimo de la celda. Un valor de 'auto' significa que AMC es el mínimo ancho de la celda.

    Además, se calcula el ancho "máximo" de celda de cada una de las celdas: se da formato entonces al contenido sin cortes de línea salvo donde aparecen cortes de línea explícitos.

  2. Para cada columna, se determina un ancho máximo y mínimo de columna con las celdas que ocupan sólo esta columna. El mínimo es el que requiere la celda con el mayor ancho mínimo de celda (o el ancho especificado para la columna, cualquiera sea mayor). El máximo es el que requiere la celda con el mayor ancho máximo de celda (o el ancho especificado para la columna, cualquiera sea mayor).
  3. Por cada celda que abarca más de una columna, se incrementan los anchos mínimos de las columnas que abarca de modo que, juntas, ellas sean al menos tan anchas como la celda. Se hace lo mismo con los anchos máximos. Si es posible, se ensanchan las columnas abarcadas en aproximadamente el mismo valor.

Esto da un ancho máximo y mínimo para cada columna. Los anchos de las columnas influyen en el ancho final de tabla del siguiente modo:

  1. Si la propiedad 'width' del elemento 'table' o 'inline-table' tiene especificado un valor (A) distinto a 'auto', el valor computado de la propiedad es el que resulte mayor entre A y el ancho mínimo requerido por todas las columnas más el espaciado de las celdas y los bordes (MIN). Si A es mayor que MIN, el ancho extra deberá ser distribuido entre las columnas.
  2. Si el elemento 'table' o 'inline-table' tiene definido 'width: auto', el ancho computado de la tabla es el que resulte mayor entre el ancho del bloque de contención de la tabla y MIN. Sin embargo, si el ancho máximo requerido por las columnas más el espaciado de las celdas y los bordes (MAX) es menor que el del bloque de contención, se usa MAX.

Un valor de porcentaje para el ancho de una columna es relativo al ancho de la tabla. Si la tabla tiene definido 'width: auto', un porcentaje representa una condición en el ancho de la columna, la que una AU deberá tratar de satisfacer. (Obviamente, esto no siempre es posible: si el ancho de la columna es '110%', la condición no puede satisfacerse.)

Nota. En este algoritmo, tanto las filas (y grupos de filas) y las columnas (y grupos de columnas) restringen y son restringidas por las dimensiones de las celdas que contienen. Colocando el ancho a una columna se puede influir indirectamente en la altura de una fila, y viceversa.

17.5.3 Algoritmos para la altura de la tabla

La altura de una tabla está dada por la propiedad 'height' del elemento 'table' o 'inline-table'. Un valor de 'auto' significa que la altura es la suma de las alturas de las filas más cualquier espaciado de celdas y bordes. Cualquier otro valor especifica la altura explícitamente; la tabla puede resultar de este modo más larga o más corta que la altura de sus filas. CSS2 no especifica un procesamiento cuando la altura especificada de una tabla difiere de la altura del contenido, en particular si la altura del contenido debe sustituir la altura especificada; si no, cómo debe distribuirse el espacio extra entre las filas que sumadas resultan menores que la altura especificada para la tabla; o, en caso de que la altura del contenido exceda la altura especificada de la tabla, si la AU debe proporcionar un mecanismo de desplazamiento. Nota. Las futuras versiones de CSS pueden especificar esto mejor.

La altura de la caja del elemento 'table-row' se calcula una vez que la aplicación del usuario tiene disponible todas las celdas de la fila: es la máxima altura ('height') especificada para la fila y la mínima altura (MIN) requerida por las celdas. Un valor 'auto' para la propiedad 'height' de 'table-row' significa que la altura computada de la fila es MIN. MIN depende de las alturas de las cajas de las celdas y la alineación de las cajas de las celdas (muy parecido al cálculo de la altura de una caja de línea). CSS2 no define a qué se refieren los valores de porcentaje en 'height' cuando se especifican para las filas o grupos de filas de la tabla.

En CSS2, la altura de una caja de celda es la máxima de la propiedad 'height' de las celdas de la tabla y la mínima altura requerida por el contenido (MIN). Un valor 'auto' para 'height' implica un valor computado de MIN. CSS2 no define a qué se refieren los valores de porcentaje en 'height' cuando se especifican para las celdas de la tabla.

CSS2 no especifica cómo las celdas que abarcan más de una fila afectan el cálculo de la altura de la fila excepto que la suma de las alturas de las filas involucradas debe ser suficiente para contener a la celda que abarca las filas.

La propiedad 'vertical-align' de cada celda de la tabla determina su alineación dentro de la fila. Cada contenido de una celda tiene una línea de base, una parte superior, una parte media y una parte inferior, como la propia fila. En el contexto de las tablas, los valores para 'vertical-align' tienen los siguientes significados:

baseline
La línea de base de la celda se pone a la misma altura que la línea de base de la primera de las filas que abarca (ver abajo la definición de líneas de base de celdas y filas).
top
La parte superior de la caja de la celda es alineada con la parte superior de la primer fila que abarca.
bottom
La parte inferior de la caja de la celda es alineada con la parte inferior de la última fila que abarca.
middle
El centro de la celda es alinado con el centro de las filas que abarca.
sub, super, text-top, text-bottom
Estos valores no se aplican a las celdas; en cambio la celda es alineada por la línea de base.

La línea de base de una celda es la línea de base de la primer caja de línea en la celda. Si no hay texto, la línea de base es la de cualquier objeto que es mostrado en la celda, o, si no hay ninguno, la parte inferior de la caja de la celda. La distancia máxima entre la parte superior de la caja de la celda y la línea de base en todas las celdas que tengan 'vertical-align: baseline' es usada por poner la línea de base de la fila. Aquí hay un ejemplo:

Ejemplo de alineación vertical de las celdas   [D]

Diagrama mostrando el efecto de los distintos valores de 'vertical-align' sobre las celdas de una tabla.

Las cajas de las celdas 1 y 2 están alineadas por sus líneas de base. La caja de la celda 2 tiene mayor altura por sobre la línea de base, de modo que determina la línea de base de la fila. Observe que si no hay ninguna caja de celda alineada por su línea de base, la fila no tendrá (ni necesitará) una línea de base.

Para evitar situaciones ambiguas, la alineación de las celdas sigue el siguiente orden:

  1. Primero son posicionadas las celdas que están alineadas por su línea de base. Esto establecerá la línea de base de la fila. Después se posicionan la celdas con 'vertical-align: top'.
  2. La fila ahora tiene una parte superior, posiblemente una línea de base, y una altura provisoria, que es la distancia desde la parte superior hasta la base más baja de las celdas posicionadas hasta el momento. (Ver las condiciones sobre el relleno de la celda más abajo.)
  3. Si alguna de las celdas restantes, aquellas alineadas por la base o la mitad, tiene una altura mayor que la altura actual de la fila, la altura de la fila será incrementada al máximo de aquellas celdas, bajando la base.
  4. Finalmente se posicionan las celdas restantes.

Las cajas de celdas que son más pequeñas que la altura de la fila reciben relleno superior e inferior extra.

17.5.4 Alineación horizontal en una columna

La alineación horizontal del contenido de una celda dentro de una caja de celda se especifica con la propiedad 'text-align'.

Cuando la propiedad 'text-align' de más de una celda en una columna es puesta con el valor de una <cadena>, el contenido de esas celdas es alineado a través de un eje vertical. El comienzo de la cadena toca este eje. La direccionalidad de los caracteres determina si la cadena queda a la izquierda o a la derecha del eje.

El texto alineado de este modo solamente es útil si el texto cabe en una línea. El resultado es indefinido si el contenido de la celda ocupa más de una línea.

Si el valor de 'text-align' en una celda de una tabla es una cadena pero la cadena no aparece en el contenido de la celda, el final del contenido de la celda toca el eje vertical de alineación.

Observe que las cadenas no tienen que ser las mismas para cada celda, aunque usualmente lo son.

CSS no proporciona una forma de especificar el desplazamiento del eje de alineación vertical con respecto al borde de la caja de una columna.

Ejemplo(s):

La siguiente hoja de estilo:

   TD { text-align: "." }
   TD:before { content: "$" }

provocará que la columna de las cifras en pesos de la siguiente tabla HTML:

  <TABLE>
  <COL width="40">
  <TR> <TH>Llamadas de larga distancia
  <TR> <TD> 1.30
  <TR> <TD> 2.50
  <TR> <TD> 10.80
  <TR> <TD> 111.01
  <TR> <TD> 85.
  <TR> <TD> 90
  <TR> <TD> .05
  <TR> <TD> .06
  </TABLE>

se alinee por el punto decimal. En chiste, hemos usado el pseudo-elemento :before para colocar un signo pesos antes de cada cifra. La tabla podría ser procesada del siguiente modo:

Llamadas de larga distancia
              $1.30      
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06

17.5.5 Efectos dinámicos en filas y columnas

La propiedad 'visibility' toma el valor 'collapse' para filas, grupos de filas, columnas y grupos de columnas. Este valor provoca que la fila o columna completa sea quitada de la pantalla, y el espacio normalmente ocupado por la fila o columna quede disponible para otro contenido. La supresión de la fila o columna, sin embargo, no afecta de ningún otro modo la composición de la tabla. Esto permite efectos dinámicos al quitar la filas o columnas sin forzar una recomposición de la tabla para calcular el cambio potencial en los requerimientos de la columna.

17.6 Bordes

Existen dos modelos distintos para definir los bordes de las celdas de una tabla en CSS. Uno es más conveniente para los llamados bordes separados alrededor de las celdas individuales, el otro es mejor para los bordes continuos de una punta a otra de la tabla. Muchos estilos de bordes pueden conseguirse con cualquier modelo, de modo que es a menudo una cuestión de gustos cuál de ellos se elige.

'border-collapse'
Valor:  collapse | separate | inherit
Inicial:  collapse
Se aplica a:  los elementos 'table' e 'inline-table'
Se hereda:  si
Porcentajes:  N/A
Medios:  visuales

Esta propiedad selecciona un modelo de borde de la tabla. El valor 'separate' elige el modelo de bordes separados. El valor 'collapse' selecciona el modelo de bordes cerrados. Los modelos se describen abajo.

17.6.1 El modelo de bordes separados

'border-spacing'
Valor:  <medida> <medida>? | inherit
Inicial:  0
Se aplica a:  los elementos table' e 'inline-table'
Se hereda:  si
Porcentajes:  N/A
Medios:  visuales

Las medidas especifican la distancia que separa los bordes de las celdas adyacentes. Si se especifica una medida, ésta da el espacio horizontal y vertical. Si se especifican dos, la primera da el espacio horizontal y la segunda el espacio vertical. Las medidas no pueden ser negativas.

En este modelo, cada celda tiene un borde individual. La propiedad 'border-spacing' especifica la distancia entre los bordes de celdas adyacentes. Este espacio es llenado con el fondo del elemento tabla. Las filas, columnas, grupos de filas y grupos de columnas no pueden tener bordes (es decir, las aplicaciones del usuario deben ignorar las propiedades de bordes para estos elementos).

Ejemplo(s):

La tabla de la imagen de abajo podría ser el resultado de una hoja de estilo como ésta:

  TABLE      { border: outset 10pt; 
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.especial { border: inset 10pt }  /* La celda superior izquierda */

Una tabla con border-spacing   [D]

Una tabla con 'border-spacing' puesto con un valor de medida. Vea que cada celda tiene su propio borde y la tabla también tiene un borde separado.

Bordes alrededor de celdas vacías: la propiedad 'empty-cells'

'empty-cells'
Valor:  show | hide | inherit
Inicial:  show
Se aplica a:  los elementos 'table-cell'
Se hereda:  si
Porcentajes:  N/A
Medios:  visuales

En el modelo de bordes separados, esta propiedad controla el procesamiento de los bordes alrededor de las celdas que no tienen ningún contenido visible. Las celdas vacías y las celdas con la propiedad 'visibility' definida como 'hidden' son consideradas de no tener un contenido visible. El contenido visible incluye "&nbsp;" y otros espacios en blanco excepto ASCII CR ("\0D"), LF ("\0A"), tab ("\09") y space ("\20").

Cuando esta propiedad tiene el valor 'show', los bordes son dibujados alrededor de las celdas vacías (como las celdas normales).

Un valor de 'hide' significa que no se dibujará ningún borde alrededor de las celdas vacías. Más aún, si todas las celdas de una fila tienen un valor de 'hide' y no tienen contenido visible, toda la fila se comporta como si tuviera 'display: none'.

Ejemplo(s):

La siguiente regla provoca que los bordes sean dibujados alrededor de todas las celdas:

TABLE { empty-cells: show }

17.6.2 El modelo de bordes cerrados

En el modelo de bordes cerrados, es posible especificar los bordes que rodean a toda o parte de una celda, fila, grupo de filas, columna y grupo de columnas. Los bordes para los atributos "rules" de HTML pueden especificarse de este modo.

Los bordes son centrados con las líneas de la grilla entre las celdas. Las aplicaciones del usuario deben encontrar una regla consistente para redondear en caso de un número impar de unidades contínuas (pixels de pantalla, puntos de impresora).

El diagrama de más abajo muestra cómo interactúan el ancho de la tabla, el ancho de los bordes, el relleno y el ancho de la celda. Su relación está dada por la siguiente ecuación, que se mantiene para cada fila de la tabla:

row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)

Aquí n es el número de celdas en la fila y border-widthi se refiere al borde entre las celdas i é i + 1. Observe que sólo la mitad de los dos bordes exteriores se cuentan en el ancho de la tabla; las otras dos mitades de esos dos bordes quedan en el área de los márgenes.

Esquema mostrando el ancho de las celdas y los bordes y el relleno de las celdas   [D]

Esquema mostrando el ancho de las celdas y los bordes y el relleno de las celdas.

Observe que en este modelo, el ancho de la tabla incluye la mitad del borde de la tabla. Además, en este modelo, una tabla no tiene relleno (pero tiene márgenes).

Resolución de conflictos de bordes

En el modelo de bordes cerrados, los bordes de cada lado de cada celda pueden ser especificados con las propiedades de bordes para cada elemento que se juntan en ese lado (celdas, filas, grupos de filas, columnas, grupos de columnas y la misma tabla), y esos bordes pueden variar en grosor, estilo y color. La regla de manejo es que en cada lado se elige el estilo más "atractivo" de borde, excepto que cualquier aparición del estilo 'hidden' elimina incondicionalmente el borde.

Las siguientes reglas determinan qué estilo de borde "gana" en caso de conflicto:

  1. Los bordes con 'border-style' como 'hidden' tiene precedencia por sobre todos los demás bordes en conflicto. Cualquier borde con este valor suprime todos los bordes en esta ubicación.
  2. Los bordes con un estilo 'none' tiene la más baja prioridad. Sólo si las propiedades de borde de todos los elementos que se encuentran en este lado son 'none' el borde será omitido (pero observe que 'none' es el valor predeterminado para el estilo de borde).
  3. Si ninguno de los estilos es 'hidden' y al menos uno de ellos no es 'none', los bordes angostos son descartados en favor de los más gruesos. Si varios tienen el mismo 'border-width' los estilos son preferidos en este orden: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', y el más bajo: 'inset'.
  4. Si los estilos de borde difieren sólo en el color, entonces un estilo adjudicado a una celda gana a uno adjudicado a una fila, que gana a un grupo de filas, columna, grupo de columnas y, finalmente, tabla.

Ejemplo(s):

El ejemplo siguiente ilustra la aplicación de estas reglas de precedencia. Esta hoja de estilo:

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

con esta fuente HTML:

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4 
    <TD class="solid-blue"> 5
    <TD class="solid-green"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

producirá algo como esto:

Un ejemplo de una tabla con bordes cerrados   [D]

Un ejemplo de una tabla con bordes cerrados.

Ejemplo(s):

El ejemplo siguiente muestra una tabla con líneas horizontales entre las filas. El borde superior de la tabla está definido como 'hidden' para suprimir el borde superior de la primer fila. Esto implementa el atributo "rules" de HTML 4.0 (rules="rows").

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse; 
                       border-top: hidden }

Tabla con líneas horizontales   [D]

Tabla con líneas horizontales entre las filas.

En este caso el mismo efecto puede lograrse sin colocar un borde 'hidden' en TABLE, suprimiendo la primer fila separadamente. El método que se prefiera es una cuestión de gustos.

TR:first-child { border-top: none }
TR { border-top: solid }

Ejemplo(s):

Aquí hay otro ejemplo de bordes cerrados ocultos:

Tabla con dos bordes omitidos   [D]

Tabla con dos bordes internos omitidos.

Fuente HTML:

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

17.6.3 Estilos de bordes

Algunos valores de 'border-style' tienen un significado distinto para las tablas que en otros elementos. En la lista de abajo están marcados con un asterisco.

none
Ningún borde.
*hidden
Lo mismo que 'none', pero en el modelo de bordes cerrados, también inhibe cualquier otro borde (ver la sección sobre conflictos de bordes).
dotted
El borde es una serie de puntos.
dashed
El borde es una serie de segmentos cortos de línea.
solid
El borde es un único segmento de línea.
double
El borde son dos líneas sólidas. La suma de las dos líneas y el espacio entre ellas equivalen al valor de 'border-width'.
groove
El borde parece como tallado en el lienzo.
ridge
Lo opuesto a 'groove': el borde parece estar sobresaliendo del lienzo.
*inset
En el modelo de bordes separados, el borde provoca que toda la caja luzca como si estuviera en bajorrelieve en el lienzo. En el modelo de bordes cerrados, es igual a 'groove'.
*outset
En el modelo de bordes separados, el borde provoca que toda la caja luzca como si estuviera en relieve sobre el lienzo. En el modelo de bordes cerrados, es igual a 'ridge'.

17.7 Procesamiento sonoro de las tablas

Cuando una tabla es expresada por un generador de voz, la relación entre las celdas de datos y las celdas de título deben ser expresada de distinto modo que por la alineación horizontal y vertical. Algunos browser sonoros pueden permitir al usuario moverse alrededor de un espacio bidimensional, de este modo le dan la oportunidad de localizar las relaciones representadas espacialmente. Cuando eso no es posible, la hoja de estilo debe especificar en qué punto son expresados los títulos.

17.7.1 Lectura de títulos: la propiedad 'speak-header'

'speak-header'
Valor:  once | always | inherit
Inicial:  once
Se aplica a:  los elementos que tienen la información de títulos en una tabla
Se hereda:  si
Porcentajes:  N/A
Medios:  auditivos

Esta propiedad especifica si los títulos de la tabla son expresados antes de cada celda, o sólo antes de una celda cuando la celda está asociada con un título diferente a la celda anterior. Los valores tienen los siguientes significados:

once
El título se dice una vez, antes de una serie de celdas.
always
El título se dice antes de cada celda pertinente.

Cada lenguaje de documento puede tener distintos mecanismos que permitan a los autores especificar los títulos. Por ejemplo, en HTML 4.0 ([HTML40]), es posible especificar la información de los títulos con tres atributos distintos ("headers", "scope" y "axis"), y la especificación brinda un algoritmo para determinar la información de los títulos cuando estos atributos no han sido especificados.

Imagen de una tabla creada con MS
Word   [D]

Imagen de una tabla con celdas de títulos ("Buenos Aires" y "Córdoba") que no se encuentran en la misma columna o fila que los datos a los que se aplican.

Este ejemplo HTML presenta el dinero gastado en comida, hotel y transporte en dos localidades (Buenos Aires y Córdoba) en días sucesivos. Conceptualmente, puede considerar la tabla en términos de un espacio dimensional n. Los títulos de este espacio son: localidad, día, categoría y subtotal. Algunas celdas definen las marcas en un eje mientras otras dan el gasto de dinero en cierto punto de este espacio. El código de esta tabla es:

<TABLE>
<CAPTION>Informe de gastos de viaje</CAPTION>
<TR>
  <TH></TH>
  <TH>Comida</TH>
  <TH>Hotel</TH>
  <TH>Transporte</TH>
  <TH>subtotales</TH>
</TR>
<TR>
  <TH id="buenos-aires" axis="buenos-aires">Buenos Aires</TH>
</TR>
<TR>
  <TH headers="buenos-aires">25-Ago-97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="buenos-aires">26-Ago-97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="buenos-aires">subtotales</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="cordoba" axis="cordoba">Córdoba</TH>
</TR>
<TR>
  <TH headers="cordoba">27-Ago-97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="cordoba">28-Ago-97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="cordoba">subtotales</TH>
  <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>

Proporcionando el modelo de datos de este modo, los autores hacen posible que los browsers con capacidades de voz exploren la tabla productivamente, por ej., cada celda puede ser leída como una lista, repitiendo los títulos aplicables antes de cada celda de datos:

  Buenos Aires, 25-Ago-97, Comida:  37.74
  Buenos Aires, 25-Ago-97, Hotel:  112.00
  Buenos Aires, 25-Ago-97, Transporte:  45.00
 ...

El browser puede leer los títulos sólo cuando cambian:

Buenos Aires, 25-Ago-97, Comida: 37.74
    Hotel: 112.00
    Transporte: 45.00
  26-Ago-97, Comida: 27.28
    Hotel: 112.00
...




Copyright  ©  1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.

Traducción: Carlos Benavidez