CELDAS DE ENCABEZADO
Dos tipos de celda pueden ser definidas en una tabla HTML.
Una de ellas es la celda simple (elementoHTML td), ya definido en
los ejemplos anteriores, y la otra es un tipo especial de celda (
elemento HTMLth)
que contiene información de encabezado para un conjunto de celdas específicas.
Los navegadores pueden representar el contenido de las
celdas de encabezado de una forma especial (usualmente como texto centrado y en
negrita), atributos que pueden ser visualmente logrados con la utilización de
celdas normales (elemento HTML td) con atributos
presentacionales (texto centrado y en negrita). Pero las celdas de encabezado
proveen más información que puede ser útil para navegadores no visuales (los
navegadores hablados pueden hablar al usuario el contenido de la celda e
inmediatamente asociarlo a la celda de encabezado) y motores de búsqueda.
EL ATRIBUTO "SCOPE"
Las celdas afectadas por una celda de encabezado pueden ser
definidas de diferentes maneras, pero la más común de todas es hacerlo a través
del atributo "scope". Utilizado en ambos, el tag HTML td y el
tag HTML th, este atributo
puede tomar cuatro valores: "row" y "col" afectando
respectivamente a la fila o columna contenedora, y "rowgroup" y
"colgroup" afectando respectivamente al grupo de filas o columnas
contenedora (descriptos más adelante en este tutorial).
En el ejemplo siguiente la misma "tabla simple" es
definida pero esta vez con celdas de encabezado que utilizan el atributo
"scope":
Código
<table>
<tr>
<th scope="col">Columna 1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Vista
|
Columna 1
|
Columna 2
|
Columna 3
|
|
Celda
1
|
Celda
2
|
Celda
3
|
|
Celda
4
|
Celda
5
|
Celda
6
|
Como podemos deducir del párrafo anterior, en este ejemplo,
la columna 1 provee información de encabezado para las celdas 1 y 4, la columna
2 para las celdas 2 y 5 y la columna 3 para las celdas 3 y 6.
Nota que, como este atributo puede también ser definido en
celdas normales (tag HTML td), las celdas
normales también pueden ser usadas como celdas de encabezado. Este es el caso
en que una celda provee ambas, información de encabezado y contenido. En
cualquier otro caso se deben utilizar celdas de encabezado (
tag HTML th).
EL ATRIBUTO "HEADERS"
Otra forma de asociar celdas de encabezado a celdas normales
es a través del atributo "headers". Este atributo es definido en
celdas normales (tag HTML td) y enuncia un
conjunto de celdas (usando sus atributos "id", separados por
espacios) que proveen información de encabezado para la misma.
Existe un escaso número de casos (y son muy raros) en que
este atributo no puede ser reemplazado por el atributo "scope". El
próximo ejemplo muestra una tabla superpuesta, donde existe una línea oblícua
de celdas que va desde la esquina superior izquierda a la esquina inferior
derecha y sirve como límite para definir qué celdas reciben los encabezados
superiores y de la derecha, y cuáles los inferiores y de la izquierda.
Código
<table>
<tr>
<td> </td>
<th id="h1">H1</th>
<th id="h2">H2</th>
<th id="h3">H3</th>
<td> </td>
</tr>
<tr>
<th id="h4">H4</th>
<td headers="h1 h4 h7 h10">C1</td>
<td headers="h2 h7">T1</td>
<td headers="h3 h7">T2</td>
<th id="h7">H7</th>
</tr>
<tr>
<th id="h5">H5</th>
<td headers="h1 h5">B1</td>
<td headers="h2 h5 h8 h11">C2</td>
<td headers="h3 h8">T3</td>
<th id="h8">H8</th>
</tr>
<tr>
<th id="h6">H6</th>
<td headers="h1 h6">B2</td>
<td headers="h2 h6">B3</td>
<td headers="h3 h6 h9 h12">C3</td>
<th id="h9">H9</th>
</tr>
<tr>
<td> </td>
<th id="h10">H10</th>
<th id="h11">H11</th>
<th id="h12">H12</th>
<td> </td>
</tr>
</table>
Vista
|
|
H1
|
H2
|
H3
|
|
|
H4
|
C1
|
T1
|
T2
|
H7
|
|
H5
|
B1
|
C2
|
T3
|
H8
|
|
H6
|
B2
|
B3
|
C3
|
H9
|
|
|
H10
|
H11
|
H12
|
|
La información en esta
tabla no es completamente visible, pero semánticamente provee un muy bien
definido conjunto de encabezados para cada celda. Por ejemplo, la celda
"C1" (en el eje oblícuo) con cuatro encabezados (H1, H4, H7 y H10), y
la celda T1 (por encima del eje) con dos (H2 y H7).
Este tipo de tablas es uno
de los pocos usos donde el atributo "scope" (la forma simple) no
funcionaría, y es mayormente utilizado para mostrar información científica.
EL ATRIBUTO "AXIS"
Este atributo, que puede
ser definido tanto para celdas de encabezado como para celdas normales, agrupa
encabezados e información en categorías, en las que las celdas pueden ser
clasificadas. Auque su uso es un tanto complejo, provee formas nuevas y más
amplias de proveer información de encabezado, especialmente en el caso de
navegadores hablados para gente ciega.
El siguiente ejemplo
ilustra el uso del atributo "axis" como una forma de hacer a la
información más legible y fácil de entender.
Código
<table>
<tr>
<th scope="col">País</th>
<th scope="col"
axis="ingresos">Automóbiles</th>
<th scope="col" axis="ingresos">Repuestos</th>
<th scope="col" axis="egresos">Insumos</th>
<th scope="col">Balance</th>
</tr>
<tr>
<td scope="row" axis="América">Estados
Unidos</td>
<td>$5.432.551</td>
<td>$3.275.268</td>
<td>-$2.235,528</td>
<td>$6,472,291</td>
</tr>
<tr>
<td scope="row" axis="Europa">Reino Unido</td>
<td>$3,763,221</td>
<td>$1,342,231</td>
<td>-$982,268</td>
<td>$4,123,184</td>
</tr>
<tr>
<td scope="row" axis="Europa">Francia</td>
<td>$2.458.197</td>
<td>$2.456.841</td>
<td>-$1.315,548</td>
<td>$3,599,490</td>
</tr>
<tr>
<td scope="row" axis="América">Canadá</td>
<td>$1.846.548</td>
<td>$448.556</td>
<td>-$351,559</td>
<td>$1,943,545</td>
</tr>
</table>
Vista
|
País
|
Automóbiles
|
Repuestos
|
Insumos
|
Balance
|
|
Estados
Unidos
|
$5.432.551
|
$3.275.268
|
-$2.235,528
|
$6,472,291
|
|
Reino
unido
|
$3,763,221
|
$1,342,231
|
-$982,268
|
$4,123,184
|
|
Francia
|
$2.458.197
|
$2.456.841
|
-$1.315,548
|
$3,599,490
|
|
Canadá
|
$1.846.548
|
$448.556
|
-$351,559
|
$1,943,545
|
Este ejemplo establece dos tipos de ejes o categorías: una
categoría de región (Europa y América) y una categoría de ingresos/egresos. En
los navegadores hablados esta información no visual tiene mucho sentido y ayuda
a mejorar la comprensión de tablas con estructuras complicadas.
AGRUPACIÓN HORIZONTAL
Una tabla HTML puede
ser organizada horizontalmente en tres grupos: el encabezado (elemento HTMLthead), el cuerpo o
cuerpos (elemento HTML tbody) y el pie (elemento HTML tfoot). Cada uno
de estos elementos encierra un grupo de filas. Estas divisiones pueden ayudar a
hacer las tablas más fáciles de leer, especialmente cuando la tabla se debe
mostrar en más de una página (por ejemplo, cuando una tabla grande debe ser
impresa). Es estos casos, el encabezado y el pie son mostrados en cada página
para mejorar la comprensión.
Código
<table>
<thead>
<tr>
<th scope="col">Mes</th>
<th scope="col">Vitamina A</th>
<th scope="col">Vitamina B</th>
<th scope="col">Vitamina C</th>
</tr>
</thead>
<tfoot>
<tr>
<td scope="row">Todo</td>
<td>32.8</td>
<td>104.2</td>
<td>21.0</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope="row">Enero</td>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
</tr>
<tr>
<td scope="row">Febrero</td>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
</tr>
<tr>
<td scope="row">Marzo</td>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
</tr>
</tbody>
</table>
Vista
HTML table.">
|
Mes
|
Vitamina A
|
Vitamina B
|
Vitamina C
|
|
Todo
|
32.8
|
104.2
|
21.0
|
|
Enero
|
12.8
|
42.6
|
5.2
|
|
Febrero
|
10.5
|
30.1
|
10.4
|
|
Marzo
|
9.5
|
31.5
|
5.4
|
Nota que el pie es ubicado en el código, preferentemente justo debajo
del encabezado al comienzo de la tabla. Esto se debe a que en tablas muy
largas, que pueden tomar algún tiempo en descargarse completamente (hasta
minutos), los navegadores pueden decidir mostrar el pie aún antes de que todo
el cuerpo hay sido recibido.
Una sola tabla puede tener más de un cuerpo. Esto permite a los autores
dividir las filas en grupos. Por ejemplo, en la tabla de arriba (si abarcase
todo el año) los meses podrían ser agrupados en cuatrimestres, generando así
tres cuerpos.
Agrupación vertical
La otra forma de agrupar celdas en una tabla es mediante la agrupación
vertical. Esto no solo es útil para agrupar columnas temáticamente, sino
también para asignar atributos a columas enteras de una tabla. La agrupación
puede lograrse usando dos tags: el tag HTML colgroup y el tag HTML col. Estos dos tags
pueden ser usados por separado o conjuntamente.
En el ejemplo siguiente insertaremos una tabla muy simple que definirá
atributos a la columna usando eltag HTML col:
<table>
<col style="width: 200px" />
<col style="width: 100px" span="3" />
<tr>
<th scope="row">Enero</th>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
</tr>
<tr>
<th scope="row">Febrero</th>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
</tr>
<tr>
<th scope="row">Marzo</th>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
</tr>
</table>
HTML table with the HTML col tag.">
|
Enero
|
12.8
|
42.6
|
5.2
|
|
Febrero
|
10.5
|
30.1
|
10.4
|
|
Marzo
|
9.5
|
31.5
|
5.4
|
Nota el cierre del tag
utilizado (" />"), con el fin de hacer el código compatible con XHTML. Para aprender más acerca de los atributos utilizados en
este ejemplo, visita la página de referencia del tagHTML col.
En el ejemplo anterior,
atributos comunes han sido definidos para todas las celdas de las columnas
afectadas de una sola vez, pero no se pueden definir grupos de columnas
semánticamente sin usar eltag HTML colgroup:
<table>
<colgroup style="width: 150px" />
<colgroup style="width: 50px" span="3" />
<colgroup style="width: 100px" />
<tr>
<th scope="row">Enero</th>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
<td>Incompleto</td>
</tr>
<tr>
<th scope="row">Febrero</th>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
<td>Incompleto</td>
</tr>
<tr>
<th scope="row">Marzo</th>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
<td>Completo</td>
</tr>
</table>
HTML table with the HTML colgroup tag.">
|
Enero
|
12.8
|
42.6
|
5.2
|
Incompleto
|
|
Febrero
|
10.5
|
30.1
|
10.4
|
Incompleto
|
|
Marzo
|
9.5
|
31.5
|
5.4
|
Completo
|
Ahora en este ejemplo
tenemos tres verdaderos, semánticamente hablando, grupos de columnas con los
atributos para todas las celdas del grupo correctamente establecidos.
Entonces, ¿para qué sirve
el tag HTML col entonces?
Existen algunos casos en que los autores necesitan establecer grupos de
columnas (semánticamente) pero aplicando diferentes atributos a las columnas en
un mismo grupo de columnas. Para resolver este problema, pueden utilizarse
ambos tags anidados:
<table>
<colgroup style="width: 150px" />
<colgroup>
<col style="width: 50px" span="2" />
<col style="width: 75px" />
</colgroup>
<colgroup style="width: 100px" />
<tr>
<th scope="row">Enero</th>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
<td>Incompleto</td>
</tr>
<tr>
<th scope="row">Febrero</th>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
<td>Incompleto</td>
</tr>
<tr>
<th scope="row">Marzo</th>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
<td>Completo</td>
</tr>
</table>
HTML table with the HTML colgroup tag and the HTML col
tag.">
|
Enero
|
12.8
|
42.6
|
5.2
|
Incompleto
|
|
Febrero
|
10.5
|
30.1
|
10.4
|
Incompleto
|
|
Marzo
|
9.5
|
31.5
|
5.4
|
Completo
|
De esta forma aún estamos definiendo tres grupos de columnas pero a la
vez damos a las columnas atributos específicos sin importar si pertenecen al
mismo grupo de columnas o no.
EL
TÍTULO DE UNA TABLA
El título de una tabla, definido mediante el elemento HTML caption,
debería describir breve y precisamente el contenido y la naturaleza de la tabla
y es habitualmente representado en algún lugar cercano a la tabla (su posición
puede ser establecida usando hojas de estilo). Recuerda que el elementoHTML caption solo
está permitido si va justo después del tag de apertura de la tabla.
<table>
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
|
Título
de la tabla
|
|
Contenido 1
|
Contenido 2
|
Contenido 3
|
|
Contenido 4
|
Contenido 5
|
Contenido 6
|
SUMARIOS
También puedes agregar unformación acerca del contenido y la naturaleza
de la tabla usando el atributo "summary", el cual debe ser definido
en el tag HTML table.
El valor de este atributo está pensado para describir la tabla en una forma más
larga que el título, ayudando a mejor el entendimiento del contenido de la
misma.
<table summary="Esta tabla muestra la temperatura media en los
meses de Junio, Julio y Agosto en la ciudad de Londres">
<caption>Gráfico de temperatura de Londres</caption>
<tr>
<th scope="col">Junio</th>
<th scope="col">Julio</th>
<th scope="col">Agosto</th>
</tr>
<tr>
<td>60ºF</td>
<td>65ºF</td>
<td>62ºF</td>
</tr>
</table>
|
Gráfico
de temperatura de Londres
|
|
Junio
|
Julio
|
Agosto
|
|
60ºF
|
65ºF
|
62ºF
|
