Você está na página 1de 10

HTML - Tablas

TABLAS EN HTML
Las tablas son la herramienta perfecta
para
organizar
datos
de
manera
ordenada, pero su utilidad no se queda
ah, ya que escondiendo los bordes
podremos usarlas tambin para denir la
estructura de las pginas
Para crear las tablas ser necesario usar
la etiqueta: TABLE, que signica, en
ingls, tabla. Esta etiqueta consta de
instruccin de inicio, <TABLE>, e
instruccin de n, </TABLE> . Entre
ambas debemos introducir otras tres
etiquetas, que denirn la estructura de

TABLAS EN HTML
TR: La etiqueta Table Row nos permitir
insertar las en la tabla.
La tabla tendr tantas las como apariciones
de esta etiqueta haya entre <TABLE> y
</TABLE>. La instruccin de inicio <TR>,
marca el comienzo de la lnea, la instruccin de
n, </TR>; marca su nal. La instruccin de n
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
n de la lnea debemos insertar las celdas de la
tabla.

TABLAS EN HTML

TH: Este es el primero de los dos tipos de


celdas existentes en el lenguaje HTML. Table
Header, (encabezado de tabla). Al igual que la
etiqueta anterior el comienzo del encabezado
viene dado por la instruccin de inicio, <TH> y
naliza con la instruccin de n, </TH>, o con el
comienzo de otra celda. En general entre el
comienzo y el n se suele insertar texto, que
ser mostrado en negrita o subrayado y
centrado.

TABLAS EN HTML
TD: Este es el segundo tipo de celda de las
tablas HTML. El nombre de la etiqueta, Table
Data (Datos de tabla), su funcin ser
introducir todos los datos que queramos en las
celdillas denidas de esta forma. 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, 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.

Pasos para elaborar Tablas en HTML

Para empezar crearemos una tabla


sencilla de dos las y dos elementos.
Vayamos por pasos:
1. En primer lugar ponemos la instruccin
de inicio y n de la etiqueta TABLE
dejando un espacio entre ellas para
insertar posteriormente el resto de
etiquetas:
<TABLE> ...Otras etiquetas... </TABLE>
159
Creacin de tablas HTML

Pasos para elaborar Tablas en HTML

2. A continuacin insertamos las las. La


tabla que nos hemos propuesto crear
consta de dos las. Por tanto debemos
usar la etiqueta TR dos veces. Lo que
insertemos en la primera (entre la
instruccin de inicio y la instruccin de
n) ser el contenido de la primera la y
lo que insertemos en la segunda ser el
contenido de la segunda la:
<TABLE>
<TR> </TR> <TR> </TR>
</TABLE>

Pasos para elaborar Tablas en HTML

3. Denir el contenido de cada la. la tabla


tiene dos columnas en cada la debemos
insertar dos celdas en cada una. Como
hemos explicado antes, para crear una celda
debemos usar la etiqueta TD. Entre la
instruccin de inicio y la instruccin de n de
est etiqueta ser donde insertaremos el
verdadero contenido de la tabla. En este
primer ejemplo sencillo ser simplemente
texto, pero puede ser cualquier otro
elemento web como imgenes o listas.
escribir el siguiente cdigo:
<TR>

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 signica 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.

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 signica 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.