 Anterior |
 Siguiente |
Una lección interesante porque las tablas se utilizan en HTML para dos cosas. La primera y obvia para tabular datos. La segunda y más importante para hacer presentaciones bonitas. Desgraciadamente en HTML no es fácil hacer cosas que, acostumbrados a trabajar con cualquier procesador de textos nos parecen triviales. Simplemente el poner una imagen y un texto descriptivo a su derecha puede traer quebraderos de cabeza a más de uno si este texto es largo. Probarlo y ya me contareis el resultado de vuestros experimentos :).
El tag para crear una tabla es <table> (nada más sencillo). El tag para saltar a la siguiente fila de la tabla es <tr> y para pasar a la siguiente columna <td>. Con esto ya podemos crear una tabla básica vacía (me salto todo el código de uso general y paso directamente al ejemplo).
Bien, cómo está claro el código anterior es una auténtica estupidez. Pasamos a cosas más interesantes.
Por ejemplo: ¿por qué la tabla anterior no parece una tabla? Lo que es más ¿por qué no parece nada? :) Sencillo, el borde por defecto de una tabla es 0 o, lo que es lo mismo, ninguno. Para indicar el grosor del borde usamos en el tag <table> el atributo border="valor". Como valor podemos poner 0, 1, 2, ... según el grosor que queramos. Otro atributo útil para este tag es el ancho del que queremos que sea la tabla. Podemos especificarlo como número de pixeles (puntos en la pantalla), como milímetros, centímetros o en tanto por ciento relativo a la página. Se realiza mediante el atributo (volvemos a usar CSS) style="width:ancho" donde ancho es un valor más una unidad. Estas pueden ser: % (tanto por ciento) ; cm (centímetros) ; mm (milímetros o bien px (pixeles). Esta última viene en el estándar CSS que se puede usar pero puede dar problemas con las tablas :(.
Muchas más cosas. Empezamos por un par mas de tags que se pueden usar con las tablas para pasar a unos cuantos atributos útiles.
<caption> es un tag que se coloca justo debajo de <table> (un ejemplo se puede ver más abajo) y sirve para dar título a la tabla.
<th> se puede usar como <td> pero indica que el contenido de esa celda es una cabecera por lo que el texto aparece como negrita (salvo que lo modifiquemos usando estilos).
Para poner un dibujo de fondo en una tabla o en una celda usamos el atributo background="url/fichero.ext" o, para ser más pofesionales podemos usar estilos de la siguiente manera: style="background-image: url(path/fichero.ext)" donde lo único configurable es path/fichero.ext.
Para poner un color de fondo en una tabla, en una fila de una tabla o en una celda podemos hacerlo mediante el atributo bgcolor="color" o bien mediante style="background-color: color". La definición de los colores fue vista en la lección 1.
Si queremos que una celda de una fila ocupe el espacio equivalente a dos celdas de otra columna lo hacemos mediante el atributo rowspan="valor" donde valor es el número de filas que queremos que ocupe.
Similarmente si queremos que una celda ocupe el equivalente a dos celdas en otra fila se hace mediante colspan="valor".
Un ejemplo para ver estas cosas. Necesitamos para su correcta ejecuación un fichero gráfico de nombre file.gif.
Fin de la lección 3.