Tablas en HTML

Las tablas son uno de los recursos más utilizados en HTML, ya que su uso a la hora de tabular y presentar contenido es fundamental.

Un ejemplo de tabla es el siguiente:

	Ingresos	Gastos
Enero	81 $	16 $
Febrero	109 $	23 $

El código que define la tabla anterior es el siguiente:

<table border="1" width="30%">
<tr>
<td width="33%"> </td>
<td width="33%">Ingresos</td>
<td width="34%">Gastos</td>
</tr>
<tr>
<td width="33%">Enero</td>
<td width="33%">81 $</td>
<td width="34%">16 $</td>
</tr>
<tr>
<td width="33%">Febrero</td>
<td width="33%">109 $</td>
<td width="34%">23 $</td>
</tr>
</table>

Analizemos paso por paso el código HTML del ejemplo:

En primer lugar, y tal y como observamos en el ejemplo, toda tabla viene definida entre las etiquetas <table> y </table>, y dentro de estas etiquetas se define el cuerpo de la tabla. En el ejemplo observamos que esta etiqueta contiene 2 parámetros (luego veremos que puede contener muchos otros más) que definen ciertas características de la tabla. En primer lugar tenemos el parámetro border="1", que indica al navegador que la tabla debe representarse con un grosor de borde de 1 píxel. El otro parámetro, width="30%", indica al navegador que la tabla debe ocupar el 30% del ancho disponible.

En el cuerpo de la tabla, vemos varias veces repetidas las etiquetas <tr> y <td> (y sus correspondientes cierres de etiqueta, </tr> y </td>. Estas etiquetas sirven para definir las celdas que contiene la tabla, en forma de filas y columnas.

La etiqueta <tr> define el comienzo de una nueva fila (del inglés table row), y </tr> indica el final o cierre de esa fila. En nuestro ejemplo vemos que la tabla contiene 2 veces esta etiqueta, porque tiene 2 filas.

Las etiquetas <td>…</td> indican las celdas dentro de esa fila, y como vemos en el ejemplo tenemos 2 celdas por cada fila. Podriamos definir un diferente número de celdas por cada fila, como podemos observar en el siguiente ejemplo:

<table border="0" width="30%">
<tr>
<td width="25%"> </td>
<td width="25%">Ingresos</td>
<td width="25%">Gastos</td>
<td width="25%">Gastos2</td>
</tr>
<tr>
<td width="25%">Enero</td>
<td width="25%">81 $</td>
<td width="25%">16 $</td>
</tr>
<tr>
<td width="25%">Febrero</td>
<td width="25%">109 $</td>
<td width="25%">23 $</td>
<td width="25%">60 $</td>
</tr>
</table>

Que se mostraría de esta forma en nuestro navegador:

	Ingresos	Gastos	Gastos2
Enero	81 $	16 $
Febrero	109 $	23 $	60 $

Como podemos observar, en la fila 2 no hemos insertado la cuarta columna, por lo que esta no se muestra. También observamos que en este ejemplo no se muestran los bordes de la tabla, debido a que hemos insertado el parámetro border="0" en la definición de la tabla, lo cual nos abre un abanico de posibilidades enorme a la hora de tabular el contenido.

A continuación podemos ver todos los parámetros posibles a la hora de definir una tabla en HTML:

<table
cellpadding= 0 o mayor
cellspacing= 0 o mayor
border= 0 o mayor
width= pixels o porcentaje
height= pixels o porcentaje
bgcolor= "#RRGGBB"
>
<tr
bgcolor= "#RRGGBB"
>
<td
align= "left|center|right"
valign= "top|middle|bottom"
width= pixels o porcentaje
bgcolor= "#RRGGBB"
colspan= 1 o mayor
rowspan= 1 o mayor
>
(…)
</table>

cellpadding : anchura interior de celda, en píxeles.
cellspacing : espacio entre celdas, en píxeles.
border : grosor de la tabla, en píxeles.
width : ancho de la tabla (ó celda), en píxeles ó porcentaje respecto del ancho disponible.
height : altura de la tabla (ó celda), en pixels ó porcentaje respecto de la altura disponible.
bgcolor : color de fondo de la tabla (ó celda), expresado en su valor RGB hexadecimal (rojo, verde y azul, de 00h a FFh).
align : alineación horizontal del contenido dentro de la celda.
valign : alineación vertical del contenido dentro de la celda.
colspan : indica el número de columnas que ocupa la celda en cuestión respecto de las demás celdas de la tabla.
rowspan : indica el número de filas que ocupa la celda en cuestión respecto de las demás celdas de la tabla.

Hay que tener en cuenta que todos estos parámetros son opcionales, por lo que sólo debemos definirlos en el caso de que sea necesario.

Una característica importante que ofrecen las tablas son la posibilidad de anidamiento, es decir, que podemos insertar una nueva tabla dentro de la celda de otra tabla, por ejemplo.

Las tablas nos ofrecen múltiples posibilidades y combinaciones, las cuales debemos explorar nosotros mismos. Esto es muy importante, ya que la experiencia nos enseñará más y más posibilidades a la hora de dar uso a las tablas. No olvideis que es un recurso muy importante, y que casi siempre el contenido se muestra utilizando tablas, ya que sus posibilidades de ordenación y tabulación del contenido son muy amplias.

VitaminaWEB.com 2001-2008
[Portada] · [Datos legales] · [Buzón de contacto] · [Mapa de la web]

Enlaces patrocinados:
Gratis | Concursos | Juegos | Casino online

Hosting recomendado:
Alojamiento web Grito.net