Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Tutoriales HTML > Tablas en HTML > Tablas en HTML (página 2)

Bypass main content

Tablas en HTML (página 2)

Páginas:<12345>
Bypass main content

Celdas de encabezado

Dos tipos de celda pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elemento HTML td), ya definido en los ejemplos anteriores, y la otra es un tipo especial de celda (elemento HTML th) 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>&nbsp;</td>
<th id="h1">H1</th>
<th id="h2">H2</th>
<th id="h3">H3</th>
<td>&nbsp;</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>&nbsp;</td>
<th id="h10">H10</th>
<th id="h11">H11</th>
<th id="h12">H12</th>
<td>&nbsp;</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.

Páginas:<12345>

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona