Entradas populares

*Publicidad

3/3/12

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 (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), elelemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:

<table border="2">
<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

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 td y tag HTML th).


<table border="2">
<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

En este ejemplo utilizaremos el rowspan:

<table border="2">
<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

No hay comentarios:

Publicar un comentario

Entrar