TABLAS

La mayoría de las páginas Web basan su diseño en tablas, ya que son de gran utilidad en su diseño. En las páginas Web todos los objetos se alinean por defecto a la izquierda, pero el uso de tablas permite distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.

El HTML básico para utilizar tablas se compone de las siguientes etiquetas:

• <table> y </table> que se utiliza para crear una tabla.
• <tr> y </tr> que identifica el principio de una fila en una tabla.
• <td> y </td> que identifica una celda dentro de una fila. Las celdas, son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.

Por ejemplo para crear la siguiente tabla. Enero Febrero Recursamiento Cursos Flash y HTML Bases de datos

Escribimos el siguiente código <table border="1"> <tr> <td>Enero</td> <td>Febrero</td> </tr> <tr> <td>Recursamiento</td> <td>Cursos</td> </tr> <tr> <td>Flash y HTML</td> <td>Bases de datos</td> </tr> </table>

Atributos de tablas Atributo Significado Valores width Ancho de la tabla Número de pixels, o un % cuando se desee ajustar al ancho de la ventana height Espacio entre el contenido de las celdas y el borde Número de pixels, o un % cuando se desee ajustar al ancho de la ventana cellpadding Espacio entre el contenido de las celdas y el borde Número de pixels cellspacing Espacio entre celdas Número de pixels border Espesor del borde Número de pixels align Alineación de la tabla dentro de la página Left    (izquierda) Right   (derecha) Center   (centro) bgcolor Color de fondo Número hexadecimal o nombre del color background Imagen de fondo Uso de <img> con src bordercolor Color del borde Número hexadecimal o nombre del color.

La tabla anterior contiene otra etiqueta que se utliza para encabezados de columna y es <th>. Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>.

Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas.

Si deseamos modificar la tabla de nuestro ejemplo, aplicándolo algún color:

Para ver la tabla de esta manera. Enero Febrero Recursamiento Cursos Flash y HTML Bases de datos

Escribimos el siguiente código <table border="1"> <tr> <td bgcolor="#FFFF66">Enero</td> <td bgcolor="#FF99CC">Febrero</td> </tr> <tr> <td bgcolor="#66FFFF">Recursamiento</td> <td bgcolor="#66FFFF">Cursos</td> </tr> <tr> <td bgcolor="#66FFFF">Flash y HTML</td> <td bgcolor="#66FFFF">Bases de datos</td> </tr> </table>

Si lo que deseamos es insertar una imagen en una celda de la tabla escribimos el siguiente código:

<td> <img src="images/iwebn_m.jpg"></td>

Para colocar una imagen de fondo en una celda:

<td background="images/iwebn_m.jpg" bgcolor="#66FFFF">

Otros atributos que pueden ser utilizados en el diseño de tablas:

align - Nos sirve para alinear las tablas y tiene 3 valores: left que alinea la tabla a la izquierda; right que alinea la tabla a la derecha; center que alinea la tabla al centro.

valign - Este atributo se usa para alinear el contenido vertical de celdas y filas y acepta 4 valores: top coloca el contenido en la parte superior de celda; middle coloca el contenido en el centro de la celda; bottom coloca el contenido en la parte inferior de la celda; baseline coloca el contenido en la línea de base.

Si aplicamos los atributos anteriores en la etiqueta <tr>, en lugar de la etiqueta <td> podemos modificar toda la fila. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando se establecen para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los que se establecen para toda la tabla.

Combinar celdas

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A través del atributo colspan se especifica el número de columnas que serán combinadas, y a través del atributo rowspan se especifica el número de filas que se combinarán.

Se presenta un ejemplo en el que se aplican ambos atributos: colspan y rowspan

NUMEROS REALES	POSITIVOS	RACIONALES	ENTEROS	NUMEROS NATURALES
			FRACCIONES	COMUNES (QUEBRADOS)
				DECIMALES
		IRRACIONALES
	NEGATIVOS	RACIONALES	ENTEROS
			FRACCIONES	COMUNES (QUEBRADOS)
				DECIMALES
		IRRACIONALES