Como se ha comentado el la sección anterior, se puede cambiar el color de fondo de toda la tabla usando la etiqueta “bgcolor” con la etiqueta de inicio “table”, como en el ejemplo siguiente: <table bgcolor=”blue”>. Un color también puede ser asignado a una fila o columna dentro de la tabla. Simplemente añade bgcolor=”color” a cualquiera de las dos etiquetas <tr> o <td> para colorear esa específica porción de la tabla. Un ejemplo sería: <tr bgcolor=»blue»>
Otro aspecto importante es el tamaño de la tabla. El ancho y la altura de las filas y columnas en una tabla, se expandirán automáticamente para encajar el tamaño de los datos y/o el espacio de la ventana del navegador. Para especificar un ancho y altura, hay que incluir o píxeles o valores de porcentaje dentro de la etiqueta “table”:
- <table width=100 height=200>
El ancho y la altura también se pueden especificar para una celda de datos individual, en oposición a la tabla como un todo. Para hacer esto, añade width=”valor” a las etiquetas <tr> o <td>. De nuevo, es una buena idea experimentar con los valores de píxel y porcentajes para ver como se muestras en el navegador.
La etiqueta “cellpadding” y “cellspacing”
Esta etiqueta especifica (en píxeles) la cantidad de espacio entre los bordes de cada celda y los datos dentro de dicha celda. Se debe usa dentro de la etiqueta “table”. Prueba los siguientes ejemplos y compara los resultados para ver las diferencias de valores:
- <table border=1 cellpadding=6>
- <table border=1 cellpadding=18>
También tenemos la etiqueta “cellspacing” (en píxeles) que es la cantidad de espacio entre cada celda. Se usa también dentro de la tabla. Vuelve a comparar estos dos ejemplos para ver las diferencias entre los tamaños expuestos:
- <table border=1 cellspacing=6>
- <table border=1 cellspacing=18>
Alineamiento
Por defecto, todo el contenido dentro de una tabla (con excepción de las cabeceras en la tabla), alinean verticalmente centrado y a la izquierda justificada. Para hacer que el contenido de una celda se alineé de una diferente manera, hay que aplicar las siguientes etiquetas dentro de las etiquetas <td>, <th> o <tr>. Para alineamientos horizontales, los valores pueden ser “left”, “right” o “center”, y para los alineamientos verticales puede ser “top”, “bottom” o “middle”. Se ponen a continuación un ejemplo de ambos:
- <tr align=»right»>
- <tr align=»bottom»>
Se puede también organizar el alineamiento de una tabla completa, para decidir donde aparece en la página. Insertando las etiquetas <align=»right»> o <align=»left»> en la etiqueta inicial de “table”, el texto se pondrá como marca el código independientemente de donde esté en la table. Si quieres que la tabla completa no coja todo el código, se puede poner la etiqueta “division alignment” antes y después de toda la tabla.
El “Cell Spanning en las tablas”
El término ‘spanning’ ocurre cuando una celda se extiende dos o más celdas en la tabla. Un ejemplo de esto es el siguiente:
| Esta celda se extiende dos columnas | Esta celda se extiende una columna | |
| A | B | C |
Para el anterior ejemplo, se utilizó la etiqueta <colspan=valor> que se pone dentro de la etiqueta <td> donde se aplica. También se puede extender las filas utilizando la etiqueta <rowpan=valor> de la misma manera que la anterior. Nos quedaría de la siguiente manera:
| Esta celda se extiende dos filas | A | B |
| C | D |
Se pueden aplicar también muchos de los atributos que aprendimos en la última sección dentro de la tabla, como son las fuentes, tamaños, tipos y colores, insertar una imagen, añadir enlaces, etc. Simplemente se trata de añadir la etiqueta apropiada a la celda en particular que quieres dar formato, justamente detrás de la etiqueta <td> de la celda.
Experimenta y practica con la variedad de herramientas y etiquetas que has visto en este artículo. Las posibilidades creativas son innumerables cuando se trata de crear tablas en una página Web. Pon imágenes en tablas de diferentes tamaños y pon bordes coloreados para dar diferentes diseños, o todo lo que se te ocurra.
Con la imaginación y la práctica, se puede hacer cosas muy curiosas. En el siguiente capítulo del tutorial sobre páginas Web, veremos como se crean los marcos html. Haz clic aquí para ver el artículo:
