Você está na página 1de 3

CREACIN DE TABLAS EN HTML

En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de informacin son las tablas. Hay
muchos sitios que por su naturaleza no usan tablas aunque existen algunas ocasiones en que el papel de
las tablas se vuelve esencial.

Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de
celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos bsicos: el elemento
TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento TD (celda).

La estructura general

una tabla es casi siempre la misma, y se requieren tres etiquetas para definir sus filas y sus
columnas.

CDIGO:

<TABLE>
<TR>
<TD>celda1</TD>
<TD>celda2</TD>
<TD>celda3</TD>
</TR>
<TR>
<TD>celda4</TD>
<TD>celda5</TD>
<TD>celda6</TD>
</TR>
</TABLE>

La etiqueta <TABLE> indica el inicio de una tabla. Cada etiqueta <TR> indica el inicio de una
nueva lnea, y cada etiqueta <TD> crea una nueva celda en la lnea actual.

Para marcar el final de las lneas, las celdas y toda la tabla, se utilizan las etiquetas </TR>,
</TD> y </TABLE>, respectivamente.

Borde y tamao
Al igual que muchos elementos HTML, se puede personalizar las tablas mediante una serie
completa de atributos.

La presentacin predeterminada de una tabla muestra sus bordes. La etiqueta <TABLE> acepta
tres atributos para controlar estos bordes:
* BORDER que define el grosor del borde visible en pxeles.
* CELLSPACING que define la separacin entre las celdas de una tabla, en pxeles.
* CELLPADING que define el espacio de relleno entre un borde de celda y su contenido, en
pxeles.

La etiqueta <TABLE> aceptar tambin los atributos WIDTH y HEIGHT que definen la anchura y
la altura de la tabla. Cuando no se especifica una anchura, el navegador la determina:

* Se puede especificar la anchura puede mediante un valor absoluto (<TABLE WIDTH="200">,


para 200 pxeles) o como un porcentaje del espacio horizontal disponible en la pgina (<TABLE
WIDTH="80%">).
* La altura es slo un valor mnimo. La altura real de la tabla puede ser mayor que el valor
indicado, si es ste demasiado pequeo para el contenido.

Las etiquetas <TD> y <TH> pueden depender de los mismos parmetros WIDTH y HEIGHT.

UNIFICACIN DE CELDAS Y UNIFICACIN HORIZONTAL CON COLSPAN

En algunas ocasiones, puede ser necesario unificar dos o ms 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 unificacin vertical) y colspan (para unificacin horizontal).

UNIFICACIN VERTICAL CON ROWSPAN

En este caso, para la unificacin vertical de celdas, utilizaremos el atributo de celda rowspan.

CELDAS DE ENCABEZADO

Hay dos tipos de celdas que pueden ser definidas en una tabla HTML. Una de ellas es la celda simple
(elemento TD), ya definido anteriormente, y la otra es un tipo especial de celda (elemento TH table header,
cabecera de tabla) que contiene informacin de encabezado para un conjunto de celdas especficas.

TTULO DE LAS TABLAS CON EL ELEMENTO CAPTION

Mediante el elemento caption, podemos definir el ttulo de una tabla. Este ttulo debera describir de una
manera breve y precisa el contenido y la naturaleza de la tabla y es habitualmente representado en algn
lugar cercano a la tabla.
Etiquetas y atributos para crear una tabla
Un resumen de las etiquetas y atributos tiles para crear una tabla: