CREACIN DE

TABLAS HTML

TABLAS
En un principio las tablas pueden servir para mostrar una
serie de datos de una manera ordenada, tal y como estamos
acostumbrados a ver en numerosas situaciones, sin
embargo las tablas en la web tienen una utilidad an mayor.
Podemos hacer que toda nuestra pgina, o una parte de
ella, sea una tabla e ir colocando los diferentes elementos
de los que conste en sus celdas. De esta forma sabremos
con gran precisin donde estamos colocndolas.

 Un inconveniente de las tablas radica en que si bien los

navegadores grficos tienen una gran libertad para colocar y
distribuir los elementos, esto no ocurre as con los
navegadores en modo texto. Por ello cuando vemos una
pgina con tablas en uno de estos navegadores nuestra
cuidada presentacin puede caer por los suelos. Sin hablar de
navegadores para ciegos o los usados en los coches, que leen
las pginas. En estos casos el usar tablas para controlar la
apariencia provoca que el navegador se le y no interprete
bien la pgina.

CMO SE CREA UNA TABLA

Para crear las tablas ser necesario usar una nueva
etiqueta: TABLE, que significa, en ingls, tabla. Esta
etiqueta consta de instruccin de inicio, <TABLE> , e
instruccin de fin, </TABLE> . Entre ambas debemos
introducir otras tres etiquetas, que definirn la
estructura de la tabla. Estas etiquetas son:

<TR> FILA
La etiqueta Table Row nos permitir insertar filas en la
tabla. La tabla tendr tantas filas como apariciones de esta
etiqueta haya entre <TABLE> y </TABLE>. La instruccin
de inicio de TR, <TR>, marca el comienzo de la lnea, la
instruccin de fin, </TR>, marca su final. La instruccin de
fin es optativa, si no se usa se considera que una lnea ha
acabado cuando comienza otra o cuando acaba la tabla.
Entre el comienzo y el fin de la lnea debemos insertar las
celdas de la tabla
.

 Por ejemplo, para crear una tabla con cinco filas

escribiramos:
<table>

<tr>...</tr>

<tr>...</tr>

<tr>...</tr>

<tr>...</tr>

<tr>...</tr>

</table>

COLUMNA O CELDA <TD>

El nombre de la etiqueta, Table Data (Datos de tabla), nos induce
a pensar que su funcin ser introducir todos los datos que
queramos en las celdillas definidas de esta forma. Y as ser, de
hecho podemos insertar cualquier elemento de HTML: imgenes,
listas, texto formateado e incluso otras tablas. La diferencia de
esta celda con la anterior es pequea, y su existencia separada
slo tiene sentido si consideramos el carcter descriptivo del
HTML. En la prctica la diferencia principal es que el texto de los
encabezados de tabla aparecer resaltado y centrado y el de las
celdas normales (TD) no.

 Para crear una tabla no basta con especificar el nmero de

filas, es necesario tambin especificar el nmero de columnas.
Una celda es el resultado de la interseccin entre una fila y una
columna, por lo que podremos especificar el nmero de celdas
por fila, que equivale a especificar el nmero de columnas por
fila. Es necesario insertar las etiquetas<td>y</td>por cada
una de las celdas que compongan cada una de las filas de la
tabla. Por lo tanto, habr que insertar esas etiquetas entre las
etiquetas<tr>y</tr>.

Entre las etiquetas<td>y</td>se podr especificar el

contenido de cada una de las celdas. Por ejemplo, para insertar
la siguiente tabla:

<TH> ENCABEZADO
Este es otro de los dos tipos de celdas existentes en el
lenguaje HTML. El nombre de la etiqueta proviene del
ingls Table Header, encabezado de tabla. Al igual que la
etiqueta anterior el comienzo del encabezado viene dado
por la instruccin de inicio, <TH> y finaliza con la
instruccin de fin, </TH>, o con el comienzo de otra celda.
En general entre el comienzo y el fin se suele insertar
texto, que ser mostrado en negrita o subrayado y
centrado.

POR EJEMPLO, SI ESCRIBIRAMOS EL

SIGUIENTE CDIGO:

NOTA
El uso de las instrucciones de fin de TR, TD y TH es,
como hemos dicho, optativo. Sin embargo en las
primeras versiones del lenguaje HTML era obligatorio
usarlas y por esta razn algunos navegadores
antiguos las necesitan para poder entender las
tablas. Es por ello que nuestra recomendacin es
usar siempre dichas instrucciones de fin para seguir
con nuestro objetivo de llegar a la mayor cantidad de
pblico posible.

BORDE DE LAS TABLAS

El siguiente paso en el aprendizaje de las tablas consiste en
aadirles un borde. Esto es tan sencillo como aadir un
nuevo atributo a la instruccin de inicio de la etiqueta
TABLE. El atributo del que hablamos es BORDER, que
significa borde en ingls. Este atributo puede tomar un valor
en pixeles que representa el grosor del borde a mostrar. Si
incluimos BORDER sin ningn valor es equivalente a
BORDER="1" Repitamos el segundo de los ejemplos vistos
antes pero aadindole un borde de grosor 5.

FORMATO DE LA TABLA

 Con esto indicamos que el ancho (width) de la tabla

debe ocupar el 50% del ancho de la ventana (lo
puedes comprobar cambiando el ancho de la ventana
de tu navegador y vers que el ancho de la tabla
vara para ocupar siempre la mitad de la ventana),
que el borde (border) tiene un grosor de dos pxeles
(es ms ancho que las separaciones internas de la
tabla que tienen grosor 1), que la tabla est alineada
al centro (center) de la ventana, que no hay espacio
entre las celdas (cellspacing="0"), que el borde la
tabla es negro (#000000) y el fondo naranja
(#FFCC99).

FORMATO DE LAS CELDAS

 Tambin es posible modificar estos atributos de toda

una fila, especificndolos en la etiqueta<tr>, en
lugar de en la etiqueta<td>.
Hay que tener en cuenta que los atributos tienen ms
prioridad cuando son establecidos para una celda que
cuando son establecidos para una fila completa. Al
mismo tiempo, tienen ms prioridad los atributos
establecidos para una fila que los establecidos para
toda la tabla.