Tablas en HTML

Hola, bienvenido a una entrada más del blog de la materia Elaboración de páginas web.

Se puede hacer un buen diseño de una página web si esta combina imágenes y texto de una manera armónica, HTML nos ofrece la etiqueta TABLE, la cual nos ayuda a distribuir el contenido de muestra página web en secciones, tales como área de banners, menú lateral o menú superior.

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

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.

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

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

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

Fuente: HtmlQuick, en http://www.htmlquick.com, el 30/03/2012