Clase No. 5

TABLAS

Una tabla está compuesta por columnas y filas que conforman un conjunto
de celdas que permiten mostrar información de manera organizada. En una celda se
puede incluir indistintamente texto, imágenes o cualquier otro elemento soportado
por   HTML.

Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos atributos principales son:

WIDTH ="95%"   Ancho de la tabla con respecto al tamaño de la página. En este caso la tabla ocupará el 95%; o WIDTH ="600", con lo que la tabla tendrá un ancho de 600 píxeles.

BORDER ="1"   Ancho en puntos de los bordes exteriores de la tabla.
CELLSPACING ="0"   Ancho en puntos entre los bordes de las celdas

CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de su contenido.

BGCOLOR ="#0000ff"   Color del fondo de tabla. En el ejemplo azul. 

  En la etiqueta <TABLE> se definen las características principales de la tabla, pero no se dice de cuántas filas y columnas estará compuesta ni cuál será su contenido. En   realidad   existen   tres   etiquetas   adicionales,   que   colocadas adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el número de filas y columnas, además de otras características:

<TR> Se utiliza para definir una nueva fila.

<TD> Permite agregar una celda o columna dentro de una fila

<TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella será escrito en negrilla.

Lo  anterior  significa  que  una  tabla  en  HTML  tendrá  tantas  filas  como etiquetas <TR> contenga y una fila estará compuesta por un número de celdas igual al de etiquetas <TD> o <TH> que la misma tenga.

Las siguientes líneas ilustran el uso de estas etiquetas para crear una tabla sencilla, compuesta por dos filas y dos columnas: 

 

  

Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten controlar: el color del fondo de la celda (BGCOLOR=”color”), la alineación del texto o de la imagen dentro de la celda (ALIGN=”alineación”), y que funcionan de manera idéntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de los atributos importante de estas dos etiquetas, es el que permite indicar el número de columnas o de filas que ocupará una celda en particular. Suponga que se debe crear una tabla similar a la siguiente:

TÍTULO DE LA TABLA

 

Observe que la tabla está compuesta por dos filas y dos columnas, y que lacelda del título ocupa dos columnas. Cuando este es el caso, es decir que una celda está distribuida en dos o mas columnas o filas, se utiliza para su definición el  Atributo  COLSPAN=”X”  o  ROWSPAN=”X”  respectivamente.  X  obviamente corresponde al número de columnas o filas sobre las que se distribuirá la celda.

Para crear la tabla que se muestra arriba, se debe escribir:

Y si lo que se desea es crear una tabla como la siguiente: 

Se debe escribir: 

   

EJERCICIO PROPUESTO