Introduccin a las tablas Las tablas son una de las herramientas mas tiles de que disponemos en HTML, ya que

nos van a permitir en cierto modo "maquetar" nuestro documento, ayudandonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la nica forma coherente de distribucin que haba antes de la introduccin de las Hojas de Estilo y de las capas. Es por esta facilidad a la hora de organizar con tablas nuestras paginas el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque estan "ocultas". Pero no todo es coser y cantar a la hora de trabajar con tablas, ya que a veces actan un poco "a su aire", por lo que podemos llegar a desesperarnos al pasar varias horas intentando que una tabla se comporte como nosotros queremos. Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseadas por cientficos de las universidades para contener y organizar informacin, no como una ayuda para el diseo grafico de la pagina, ya que en esa poca el lenguaje y las paginas web se conceban como una forma de transmitir texto plano, en monitores monocromos y de poca resolucin, y no fu hasta el posterior desarrollo de Internet, de la WWW y de la tecnologa de ordenadores personales avanzados cuando se empez a tener en cuenta la importancia del diseo visual de una pagina web como un medio global para transmitir no solo texto plano, si no tambien contenidos graficos y multimedia. Para solucionar estas carencias hace falta conocer bien todas las etiquetas y atributos de que disponemos para la creacin de tablas, as como unos cuantos truquillos que veremos mas en el desarrollo de este captulo.

Estructura de una tabla

Las tablas estan formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definindose una celda como el espacio formado por la interseccin de una fila y una columna.

columna 1

columna 2

columna 3

fila 1 celda(1,1) celda(1,2) celda(1,2) fila 2 celda(2,1) celda(2,2) celda(2,3) fila 3 celda(3,1) celda(3,2) celda(3,3) Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dnde empieza y dnde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>. Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo 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 nmero de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>. De esta forma, y siguiendo con nuestra tabla inicial deEjemplo, el esquema de etiquetas sera el siguiente: <TABLE> <TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR> <TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR> <TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR>

</TABLE> Este es el esquema general de toda tabla simple, que traducido a cdigo HTML quedara de la forma: <TABLE> <TR> <TD> celda(1,1) </TD> <TD> celda(1,2) </TD> <TD> celda(1,3) </TD>

</TR> <TR> <TD> celda(2,1) </TD> <TD> celda(2,2) </TD> <TD> celda(2,3) </TD> </TR> <TR> <TD> celda(3,1) </TD> <TD> celda(3,2) </TD> <TD> celda(3,3) </TD> </TR> </TABLE> La visualizacin de una tabla se genera automaticamente a partir de las filas y las columnas definidas. Sin embargo para un navegador no es facil interpretar a tiempo como debe aparecer la tabla. Primero tiene que leer la tabla completa antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso puede conducir a que en la pantalla aparecen espacios vacios desagradables mientras que la pagina se carga. HTML 4.0 ofrece una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas tiene. De esta manera el navegador puede cargar la tabla mucho mas rapido, o sea que una parte de la tabla es visualizada antes de que la totalidad de la tabla haya sido leda. Esto se debe implementar mediante las etiquetas <COLGROUP>...</COLGROUP> y sus hijas <COLS>. No obstante, estas etiquetas, que veremos mas adelante, slo son compatibles con Internet Explorer, cosa que las hace desaconsejables para nuestras paginas, pus debemos siempre crear paginas compatibles con todos los navegadores de cuarta generacin y todas las resoluciones habituales. Ademas de estas etiquetas basicas existen otras varias que nos van a permitir adaptar la tabla a nuestras necesidades. Y cada etiqueta posee ademas varios atributos, que van a modificar la forma en que se comportan, que empezaremos a ver en el prximo captulo. Etiqueta <TABLE> y sus atributos <TABLE> y </TABLE> son las etiquetas principales de

definicin de una tabla, que acotan el espacio en el que podemos definir filas y celdas. Sus principales atributos son: * WIDTH="p", donde p puede venir expresado en pxeles en tanto por ciento (%). Este atributo determina la anchura que va a tener la tabla. Si le damos un valor en pxeles la anchura sera absoluta, con esa medida independientemente del tamao de la pantalla o del elemento que contenga la tabla, mientras que si le damos un valor en % la anchura sera relativa al tamao de pantalla del elemento UNO contenga DOS que la tabla. As, si queremos que la tabla ocupe toda la ventana del navegador, bastara con especificar WIDTH="100%". <TABLE WIDTH="100" BORDER="1"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

<TABLE WIDTH="50%" BORDER="1"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> UNO DOS

<TABLE WIDTH="100%" BORDER="1"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

UNO

DOS

* HEIGHT= "p", donde p puede venir expresado como un entero (pxeles) como tanto por ciento (%). Este atributo nos permite determinar lo alta que va a ser la tabla, y con l ocurre ocurre igual que con WIDTH en lo que respecta a los valores abolutos (pxeles) y relativos (%). Normalmente el alto de la tabla no se especifica, ya que su valor lo va a determinar el texto y/o las imagenes que vamos a introducir en las celdas de la misma. Ejemplo<TABLE WIDTH="100" HEIGHT="100" BORDER="1"> UNO DOS <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> * BORDER= "n", donde n es un nmero entero. Este atributo va a permitir que veamos los bordes de la tabla y de las celdas que la componen, que van a tener una anchura de n pxeles, Si no se usa este atributo no veremos los bordes, ya que su valor por defecto es BORDER=0.Las celdas sin contenido no apareceran con bordes, por lo que si queremos que se muestren deberemos insertar en la celda un gif transparente de 1x1 pxeles, un espacio (&nbsp o una etiqueta <BR>. Ejemplo<TABLE WIDTH="100" BORDER="0"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> UNO DOS

<TABLE WIDTH="100" BORDER="5"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

UNO DOS

* BORDERCOLOR= "color", donde color puede venir expresado mediante su nombre web en ingls mediante su cdigo hexadecimal. Ntense las comillas que encierran la definicin del color.Este atributo nos permite definir el color en que se vera el borde, pero mientras que en Iexplorer se veran de ese color tanto los bordes exteriores de la tabla como los interiores de las celdas, en Nestcape slo se veran del color especificado los bordes exteriores de la tabla, permaneciendo los interiores del color gris predeterminado. Otra diferencia entre ambos navegadores es que en Iexplorer se ven los bordes lisos, mientras que en Nestcape se ven con estilo slido.Lgicamente, para que se vean los bordes de color esta etiqueta debe ir acompaada de BORDER=1,2,., es decir, tenemos que haber definido previamente un ancho de borde. Ademas, existen dos atributos de color de borde que slo se ven en Internet Explorer: - BORDECOLORDARK, que establece los colores exteriores del borde derecho y del borde inferior y los interiores del borde izquierdo y del borde superior. - BORDECOLORLIGHT, que los establece al contrario. Ejemplos.<TABLE BORDER="1" BORDERCOLOR="red" CELLSPACING="0"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

UNO DOS

<TABLE BORDER="5" BORDERCOLOR="#003366" CELLSPACING="0"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>