Tablas en HTML
Las tablas son una de las herramientas más útiles de que disponemos en HTML, ya que nos van a permitir en cierto modo “maquetar” nuestro documento, ayudándonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente que había antes de la introducción de las Hojas de Estilo y de las etiquetas.
Es por esta facilidad a la hora deorganizar con tablas nuestras páginas el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque están “ocultas”.
Estructura de una tabla
Las tablas están formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado esuna columna, definiéndose una celda como el espacio formado por laintersección de una fila y una columna.
Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio y su correspondiente de cierre .
Seguidamente debemos decirle cuantas filas, cosa que hacemos con las etiqueta de inicio de fila > y su correspondiente de cierre de fila, porlo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.
Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas y .
Por ejemplo:
Este es el esquema general de toda tabla simple, quetraducido a código HTML quedaría de la forma:
celda(1,1)
celda(1,2)
celda(1,3)
celda(2,1)
celda(2,2)
celda(2,3)
celda(3,1)
celda(3,2)
celda(3,3)
La cantidad de celdas debe ser el mismo en cada uno de las filas, para que la tabla tenga la misma cantidad de columnas. Se debe definir la cantidad de columnas que va a tener la tabla medianteel número de celdas que definamos en la primera fila.
Uso de las tablas (I)
De esta forma, si queremos distribuir el contenido de una página en columnas tendremos que crear un tabla que tenga tantas celdas en una fila como columnas deseemos en nuestra página, y en cada una de las celdas colocaremos el contenido de cada columna. Eso sí, deberemos tener especial cuidado en no sobrepasar con elcontenido en alto de cada celda en la página, ya que si no es así se nos descolocará todo, al intentar adaptarse la celda a su contenido. Por esto, es conveniente siempre establecer una alineación vertical a las celdas, para evitar descompensaciones, mediante el atributo VALIGN=”top”. Introduciremos por ahora un valor CELLPADDING=”8″, para que no se nos junten los bloques de texto.
Convienecomenzar asignando un borde de 1 píxel a la tabla, para referenciarnos bien, y cuando hayamos finalizado le quitamos el borde. Esto es lo que se llama una “tabla oculta”.
Ejemplo,-
Este es el contenido de la primera columna de nuestra maravillosa página web…
Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional….
Y acabamos con todo lo quequeramos poner en la última columna. ¿A que ha quedado todo muy bonito?.
¿ Y si queremos que entre las columnas haya una línea vertical de color?.
Bueno, podríamos pensa que mediante el atributo BORDERCOLOR Podríamos lograr algo parecido, pero esta no es la solución adecuada, ya que los atributos de borde de color sólo los posee Internet Explorer, y si los quisieramos de color gris,asequibles para ambos navegadores, se nos pintarían todos los bordes, con lo que no conseguiríamos el efecto deseado.
La solución correcta pasa por introducir celdas que contengan una imagen en formato gif, del color que deseemos, que tenga un ancho igual al que nosotros deseemos para la línea de separación y un ancho igual al alto de la celda. El inconveniente de este método es que según la…
