Tablas Y Formularios En HTML

TABLAS EN HTML

Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial.

En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.

Simple tables

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

Código

<table>

<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

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

Nota: los bordes en este ejemplo fueron establecidos mediante el uso de CSS para mejorar la visualización. Te recomiendo evitar el uso de atributos presentacionales como "border" ya que son candidatos a ser desaprobados en el futuro.

Además, nota que, las celdas vacías deben ser declaradas utilizando sus respectivos tags para lograr una correctitud en el código. cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (&nbsp;) como su contenido. Esto hará que tu página sea más compatible ya que algunos navegadores tienen problemas representando celdas vacías.

Unificación de celdas

Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificación vertical) y "colspan" (para unificación horizontal), ambos disponibles para celdas (tag HTML tdy tag HTML th).

Código

<table>

<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>

Vista

Campo 1 Campo 2 Campo 3

Campos 4 y 5 Campo 6

Campo 7 Campo 8 Campo 9

Mira en el ejemplo anterior cómo una definición de celda que unifica a dos, es el equivalente a dos definiciones de celdas simples. Esto también funciona para uificación vertical, con una pequeña diferencia debido a la naturaleza de las tables en HTML. Cuando se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificación deben ser omitidas. Mira el ejemplo, donde los campos 1, 4 y 7 son unificados:

Código

<table>

<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>

Vista

Campo unificado Campo 2 Campo 3

Campo 5 Campo 6

Campo 8 Campo 9

Debes tener cuidado al unificar filas y columnas de no encimar las celdas unificadas. Esto podría tener resultados inesperados.

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

...