Desarrollo Plataforma Web: Uso de tablas en HTML

Tablas en HTML

Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo:

Código

Visualización

<table border="1" summary="Ejemplo de tabla simple.">
<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>

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Nota: Los bordes en este ejemplo son creados utilizando el atributo "border" para el tag HTML table, el cual es sólo utilizado para mejorar la visualización. Como los atributos de presentación van siendo desaprobados con cada versión del estándar HTML, y dado que los mismos efectos pueden lograrse usando hojas de estilo, recomendamos evitar el uso de atributos de presentación como "border".
Ten en cuenta que las celdas vacías igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud en el código. Cuando el contenido de una celda debe ser vacío, deberías usar siempre un espacio en blanco ( ) en su lugar. Esto hará que tu página sea más comatible, dado que ciertos navegadores tienen problemas al mostrar celdas vacías.

Tipos de celdas

Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla.

En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado:

Código

Visualización

<table border="1" summary="Ejemplo de tabla simple con celdas de encabezado.">
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>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>

Columna 1	Columna 2	Columna 3
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Las características de estas celdas pueden ser logradas visualmente usando una celda simple con atributos de presentación (texto centrado y en negrita), pero las celdas de encabezado proporcionan más información oculta que puede ser útil para navegadores no visuales (los navegadores hablados pueden decir a los usuarios el contenido de una celda asociándolo inmediatamente con el encabezado correspondiente) y arañas (como las de los motores de búsqueda lo que ayudaría en la promoción del sitio).
Otra forma de asociar celdas de encabezados con celdas simples es usando los atributos: "headers" para definir una lista de celdas que proveen información de encabezado para la celda actual y "scope" para definir una lista de celdas para las cuales la celda actual provee información de encabezado.

Unificando celdas

Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).

Código

Visualización

<table border="1" summary="Ejemplo de tabla simple con unificación de celdas de una fila.">
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>

Campo 1	Campo 2	Campo 3
Campos 4 y 5		Campo 6
Campo 7	Campo 8	Campo 9

Observa en el ejemplo anterior como una definición de celda unificando dos celdas, es el equivalente unificado de dos definiciones de celda simple. Esto también funciona para unificar verticalmente con una pequeña diferencia debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente, las definiciones de celda en la columna afectada deberán ser omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas:

Código

Visualización

<table border="1" summary="Ejemplo de tabla simple con unificación de celdas de una columna.">
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>

Campo unificado	Campo 2	Campo 3
	Campo 5	Campo 6
	Campo 8	Campo 9

Debes ser cuidadoso al unificar filas y columnas de modo de que no se encimen las celdas unificadas. Esto puede provocar un resultado indeseado.

Dimensionado tablas

El tamaño de una tabla en HTML puede establecerse usando los atributos "width" y "height". Estos atributos pueden ser definidos en varias partes de la tabla: celdas (tag HTML td), columnas (tag HTML col), grupos de columnas (tag HTML colgroup), filas (tag HTML tr) y la tabla misma (tag HTML table). Es recomendable definir estos atributos solo en columnas y filas (cuando sea posible) para evitar interpretaciones ambiguas. De todos modos, el tamaño de una tabla es usualmente no solo decidido por los valores de dichos atributos sino también basados en el espacio disponible para dibujarla. En algunos casos, los navegadores pueden suprimir los atributos dimensionales para hacer que una tabla quepa en la pantalla.
Estos dos atributos aceptan valores de tipo multi-lenght. En el próximo ejemplo definimos una tabla donde las dos primeras columnas reciben cada una el 15% del ancho de la tabla y el resto tiene un ancho de 35% cada una, mientras que el alto de la primera fila es de 50 píxeles.

Código

Visualización

1	2	3	4
5	6	7	8
9	10	11	12

Agrupación horizontal

Una tabla HTML puede agruparse horizontalmente en tres grupos: el encabezado (tag HTML thead), el cuerpo o cuerpos (tag HTML tbody) y el pie (tag HTML tfoot). Cada uno de estos tags encierra un grupo de filas. Estas divisiones pueden ayudar a hacer las tablas más fáciles de comprender, especialmente cuando deben ser mostradas en más de una página (por ejemplo, cuando una tabla larga se imprime). En dicho caso, los encabezados y pies pueden ser mostrados en cada página.
También es posible hacer dichas agrupaciones visibles con los atributos de la tabla. Estos atributos serán estudiados posteriormente en este mismo tutorial al definir el aspecto visual de una tabla.

Código

Visualización

<table border="1" summary="Ejemplo de agrupación horizontal en una tabla HTML.">
<thead>
<tr>
<th>Mes</th>
<th>Vitamina A</th>
<th>Vitamina B</th>
<th>Vitamina C</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Todos</td>
<td>32.8</td>
<td>104.2</td>
<td>21.0</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Enero</td>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
</tr>
<tr>
<td>Febrero</td>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
</tr>
<tr>
<td>Marzo</td>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
</tr>
</tbody>
</table>

Mes	Vitamina A	Vitamina B	Vitamina C
Todos	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 en el código, el pie es colocado preferentemente justo debajo del encabezado al comienzo de la tabla. Esto se debe a que tablas realmente grandes pueden tardar un tiempo en descargarse completamente (hasta algunos minutos), y los navegadores pueden optar por mostrar el pie aún antes de que todas las celdas del cuerpo hayan sido recibidas.
Una sola tabla puede tener más de un cuerpo. Esto proporciona a los autores una forma de agrupar o separar filas. Por ejemplo, en la tabla anterior los meses pueden ser agrupados por trimestres, generando de este modo 4 cuerpos en la tabla.

Agrupación vertical

La otra forma de agrupar celdas en una tabla es agrupando verticalmente. Esto no solo permite agrupar columnas temáticamente, sino que además permite asignar atributos a columnas enteras de la tabla. La agrupación puede llevarse a cabo usando dos tags: el tag HTML colgroup y el tag HTML col. Estos dos tags pueden ser usados independientemente o de manera conjunta.
En el ejemplo siguiente insertaremos una tabla muy simple que definirá atributos para las columnas usando el tag HTML col:

Código

Visualización

<table border="1" summary="Ejemplo de agrupación de características de columnas en una tabla HTML con el tag HTML col.">
<col style="width: 7em;" />
<col style="width: 3em;" span="3" align="right" />
<tr>
<td>Enero</td>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
</tr>
<tr>
<td>Febrero</td>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
</tr>
<tr>
<td>Marzo</td>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
</tr>
</table>

Enero	12.8	42.6	5.2
Febrero	10.5	30.1	10.4
Marzo	9.5	31.5	5.4

Nota el tag de cierre utilizado (" />") que sirve para adaptar el documento al estandard de código XHTML. Para aprender más acerca de los atributos usados en este ejemplo, refiérete la descripción del tag HTML col.

Este ejemplo ha colaborado a definir atributos comunes para celdas de las columnas afectadas, pero no se pueden definir grupos de columnas sin usar el tag HTML colgroup:

Código

Visualización

<table border="1" summary="Ejemplo de agrupación vertical en una tabla HTML con el tag HTML colgroup.">
<colgroup style="width: 6em" />
<colgroup style="width: 3em" span="3" align="right" />
<colgroup style="width: 7em" />
<tr>
<td>Enero</td>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
<td>Incompleto</td>
</tr>
<tr>
<td>Febrero</td>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
<td>Incompleto</td>
</tr>
<tr>
<td>Marzo</td>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
<td>Completo</td>
</tr>
</table>

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 grupos de columnas. Para aprender más acerca de esto lee la descripción del tag HTML colgroup. De todos modos todas las columnas afectadas por un grupo de columnas deben compartir los mismos atributos. Esto puede ser un inconveniente para los casos en que las columnas en un grupo de columnas necesitan tener distintas características. Para resolver este problema los autores pueden utilizar ambos tags a la vez:

Código

Visualización

<table border="1" summary="Ejemplo de agrupación vertical en una tabla HTML con el tag HTML colgroup y el tag HTML col.">
<colgroup style="width: 6.08em" />
<colgroup align="right">
<col style="width: 3em" span="2" />
<col style="width: 3em" />
</colgroup>
<colgroup style="width: 7em" />
<tr>
<td>Enero</td>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
<td>Incompleto</td>
</tr>
<tr>
<td>Febrero</td>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
<td>Incompleto</td>
</tr>
<tr>
<td>Marzo</td>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
<td>Completo</td>
</tr>
</table>

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 este modo aún estamos definiendo tres grupos de columnas, pero dando a las columnas características específicas sin importar si pertenecen al mismo grupo de columnas o no.

Características visuales

Advertencia: Recomiendo fuertemente no utilizar los atributos visuales descriptos a continuación mientras que sus resultados puedan ser logrados mediante el uso de hojas de estilos. Estas hojas de estilos están pensadas para reemplazar a los atributos de presentación de HTML, de modo que los atributos descriptos aqui pueden ser desaprobados en el futuro o con tecnologias actuales emergentes.

Existen muchos atributos que definen el aspecto visual de una tabla en HTML, pero la mayoría de ellos pueden ser logrados mediante hojas de estilo. Los beneficios de usar hojas de estilo son muchos y la mejor forma de usarlos es mediante archivos externos. De este modo puedes definir clases que pueden posteriormente ser usadas en el documento con el atributo "class". Cada tag que inserte elementos visuales posee este atributo "class". También recomendamos fuertemente utilizar hojas de estilo para reemplazar a los tags y atributos desaprobados en HTML.

Primero que nada mostraremos un ejemplo donde algunos atributos son definidos para establecer algunas de las características visuales de la tabla. Estos atributos son: cellpadding, cellspacing, frame, rules y border. Para aprender más acerca de estos atributos (y las páginas de todos los otros tags usados en tablas). Esto te ayudará a aprender la funcionalidad de los tags.

Código

Visualización

<table border="1" frame="void" rules="groups" cellpadding="5" summary="Ejemplo para algunas características visuales en una tabla con agrupaciones.">
<colgroup style="width: 5em" />
<colgroup align="right" span="3" style="width: 3em" />
<colgroup style="width: 7em" />
<thead>
<tr>
<th>Mes</th>
<th>VIT A</th>
<th>VIT B</th>
<th>VIT C</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enero</td>
<td>12.8</td>
<td>42.6</td>
<td>5.2</td>
<td>Incompleto</td>
</tr>
<tr>
<td>Febrero</td>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
<td>Incompleto</td>
</tr>
<tr>
<td>Marzo</td>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
<td>Completo</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Abril</td>
<td>10.5</td>
<td>40.6</td>
<td>7.4</td>
<td>Completo</td>
</tr>
<tr>
<td>Mayo</td>
<td>15.6</td>
<td>25.2</td>
<td>15.1</td>
<td>Completo</td>
</tr>
<tr>
<td>Junio</td>
<td>10.1</td>
<td>36.6</td>
<td>4.8</td>
<td>Completo</td>
</tr>
</tbody>
</table>

Mes	VIT A	VIT B	VIT C	Balance
Enero	12.8	42.6	5.2	Incompleto
Febrero	10.5	30.1	10.4	Incompleto
Marzo	9.5	31.5	5.4	Completo
Abril	10.5	40.6	7.4	Completo
Mayo	15.6	25.2	15.1	Completo
Junio	10.1	36.6	4.8	Completo

Como esta practica está dirigida a enseñar todo acerca de las tablas en HTML solamente, definiremos un ejemplo simple acerca de cómo los atributos de presentación de una tabla son definidos usando hojas de estilo en cascada. Para aprender más acerca de las hojas de estilo busquemos un tutorial "Hojas de estilo en cascada (CSS)". En este ejemplo usaremos el tag HTML style, que debe ser definido en algún lugar del encabezado del documento, para establecer las clases CSS. Las clases de estilo para este ejemplo se definirán así:

Comienzo del código

Fin del código

Y la aplicación de estas clases a una tabla se debe hacerse así:

Código

Visualización

<table class="exampletable" cellpadding="5" summary="Ejemplo para algunas características visuales en una tabla usando hojas de estilo en cascada.">
<colgroup style="width: 5em" class="exampleheadercell" />
<colgroup align="right" span="3" style="width: 3em" class="examplelightcell" />
<colgroup style="width: 7em" class="exampledarkcell" />
<thead>
<tr class="exampleheadercell">
<th>Mes</th>
<th>VIT A</th>
<th>VIT B</th>
<th>VIT C</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enero</td>
<td>12.8</td>
<td class="exampleredcell">42.6</td>
<td>5.2</td>
<td>Incompleto</td>
</tr>
<tr>
<td>Febrero</td>
<td>10.5</td>
<td>30.1</td>
<td>10.4</td>
<td>Incompleto</td>
</tr>
<tr>
<td>Marzo</td>
<td>9.5</td>
<td>31.5</td>
<td>5.4</td>
<td>Completo</td>
</tr>
</tbody>
</table>

Mes	VIT A	VIT B	VIT C	Balance
Enero	12.8	42.6	5.2	Incompleto
Febrero	10.5	30.1	10.4	Incompleto
Marzo	9.5	31.5	5.4	Completo

Nota como algunas celdas reciben varias definiciones de clases (de celdas, filas y columnas). Para resolver estas ambigüedades, las hojas de estilo en cascada usan una jerarquía que para este caso es "celda > fila > columna" y va a través de la misma buscando atributos de presentación (la primera definición suprime al resto).

Información extra

Existen más tags y atributos, algunos de ellos visuales, que ofrecen más información a los navegadores o arañas acerca de la tabla. Como tal vez ya has leído en este sitio, muchos de los tags y atributos producen un efecto visual que puede ser logrado por otros medios, pero por alguna razón siguen vigentes y no han sido desaprobados. La principal razón para la mayoría de ellos es que proveen información no visual que está disponible para muchos otros programas que pueden surfear tu sitio (por ejemplo, navegadores hablados, navegadores braille, arañas de los motores de búsqueda, navegadores de teléfonos móviles, etc.).
Uno de ellos, tal vez el más importante, es el título de una tabla. Definido mediante el tag HTML caption, el título debe describir brevemente la naturaleza de la tabla y es usualmente mostrado en algún lugar cercano a la tabla (la posición puede ser ajustada usando hojas de estilo). Recuerda que el tag del título de la tabla solo está permitido justo después del tag de apertura de la tabla.

Código

Visualización

<table border="1">
<caption>Título de la tabla</caption>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>

Título de la tabla
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

También se puede agregar información acerca de la naturaleza de la tabla usando el atributo "summary". El valor de este atributo debería describir la naturaleza de una tabla en una forma más detallada que el título, ayudando a comprender de una mejor manera el contenido de la misma.
Cada celda posee asimismo el atributo "abbr", el cual provee una versión abreviada del contenido de la misma. La aplicación de este atributo está sujeta a decisiones del navegador, y será probablemente utilizada en lugar del contenido de la celda cuando el espacio disponible sea reducido.

Espero hagan todos los ejemplos y los prueben en su navegador.

Desarrollo Plataforma Web

miércoles, 8 de julio de 2015

Uso de tablas en HTML

Tablas en HTML

Tipos de celdas

Unificando celdas

Dimensionado tablas

Agrupación horizontal

Agrupación vertical

Características visuales

Información extra

1 comentario:

Archivo del blog