Tablas

El lenguaje HTML atraviesa en el momento actual una fase decisiva: su evolución hacia una definición que permita escribir páginas con mayor facilidad y mejores resultados se ve amenazada por la pugna entre Miscrosoft y Netscape para imponer sus criterios acerca de las etiquetas que se utilizarán. Este es el motivo por el que, aunque existan propuestas para la utilización del llamado HTML dinámico que permiten dar forma a la página de manera mucho más flexible, tengamos que recurrir a trucos algo más complejos.

 Es posible que a estas alturas te hayas dado cuenta de que no resulta fácil fijar tabulaciones o encolumnar el texto de una página. Para llevar a cabo estas tareas vamos a tener que recurrir a las tablas.

Ahora bien, antes de pasar a utilizar las tablas como recurso para realizar otras tareas nos detendremos en su utilidad más inmediata: presentar información que se preste a organizarse en un formato de doble entrada.

 

Partiendo de la forma más simple, la de una tabla con una fila y una columna, a la que podríamos considerar como un marco alrededor del texto, podemos ir complicando la forma...
...mediante la adición de filas y columnas...

                            
                             

...o la fusión de las celdas que la constituyen según lo requiera la información presentada.

 

                                
       
     

Para empezar crearemos una tabla con unos datos sobre el número de alumnos matriculados en dos hipotéticos grupos de cada uno de los niveles de Educación Secundaria Obligatoria. 
 

Práctica 7

  • Creamos en el editor un documento nuevo e insertamos en el una tabla con 3 filas y 5 columnas. (Para hacerlo pulsaremos en el icono que representa una tabla). 
  • Dejamos, de momento la sección de atributos tal como aparece y en el apartado Alineación de la tabla elegimos centro y pulsamos en el botón aceptar. 
  • Como aún no tiene datos nuestra flamante tabla presentará un aspecto bastante "esquelético". Vamos ahora rellenando las celdas con la información pertinente. 
  • Guardamos el trabajo como ej7.htm y lo visualizamos en el navegador. 
 

Sobre esta tabla base vamos a ir haciendo añadidos para completarla. Iremos comprobando a través de los siguientes ejercicios que el editor de Netscape no se caracteriza por ser muy ágil, y ello nos lleva a formular un consejo esencial para trabajar rápidamente con tablas: Si nuestro objetivo es lograr una tabla compleja debemos partir de un esquema realizado en papel y, una vez creada la estructura, rellenar los datos.

Vamos añadir una fila por encima de las actuales para agrupar los datos en Primer y segundo Ciclo.

 

Práctica 7-b

  • Volvemos al editor y nos situamos en una de las celdas de la primera fila. Pulsamos con el botón derecho y elegimos Insertar / Fila 
  • Comprobamos que, desgraciadamente, la fila se ha insertado a continuación, con lo que nos vemos obligados a mover los datos a su lugar correcto. (Dado que no son muy extensos es preferible volver a teclearlos en vez de estar cortando y pegando). 
  • Nos situamos ahora en la celda que se encuentra encima de la que contiene la referencia al curso 1º y, pulsando con el botón derecho, seleccionamos Propiedades de la tabla / pestaña Celda. En las casillas que aparecen tras la alineación horizontal y vertical pondremos que la celda debe abarcar 1 fila y 2 columnas. 
  • Tras repetir la operación con la celda situada encima de la referencia a 3º comprobamos que nos han aparecido un par de celdas vacías a la derecha. A partir de este momento, cada vez que aparezcan celdas vacías después de una modificación procederemos a borrarlas (Botón derecho / Eliminar / Celda
  • Rellenamos las celdas superiores con el texto Primer Ciclo y Segundo Ciclo respectivamente. 
  • Guardamos el trabajo como ej7b.htm 
 

Una vez que hemos comprobado las dificultades que puede acarrear la modificación de tablas con el editor de Netscape podría ser interesante conocer el procedimiento para crear tablas tecleando directamente el código. Aunque inicialmente pueda parecernos un procedimiento antipático comprobaremos que resulta mucho más rápido siempre que tengamos nuestro boceto en papel.

Para lanzarnos a la creación directa tenemos que conocer las etiquetas que sirven para definir las tablas.
 
<TABLE> y </TABLE> Son las etiquetas de apertura y cierre de la tabla. Entre ellas irán las etiquetas y los contenidos de cada una de las filas y celdas
<TR> y </TR> Son las etiquetas que indican el principio y final de una fila. Entre ellas habrá que incluir las etiquetas y contenidos de las celdas que la forman.
<TD> y </TD> Con ellas delimitamos cada una de las celdas. Entre ambas incluiremos el contenido correspondiente

Además de estas etiquetas hay que conocer dos atributos que sirven para hacer que una celda ocupe más de una fila o una columna. 

Los atributos, de los que no hemos hablado hasta ahora, aunque los hemos utilizado sin darnos cuenta, son modificadores de las etiquetas que se escriben a continuación del código y antes de poner el ángulo de cierre de la misma.

 
BORDER=n Se aplica en la etiqueta de apertura de la tabla para indicar el grosor de los bordes que delimitan las celdas. Cuando estamos creando la estructura de la tabla es interesante ponerlo para que podamos ver la tabla al pasar al editor gráfico, aunque finalmente decidamos eliminarlo después de introducir los contenidos. Así pues deberíamos abrir la tabla con <TABLE BORDER=1>
ROWSPAN=n Sirve para indicar el número de filas que ocupará una celda. Por ejemplo: <TD ROWSPAN=2></TD> nos serviría para crear una celda que visualmente sería el resultado de unir verticalmente dos celdas de la misma columna 
COLSPAN=n Lo utilizamos para unir celdas horizontalmente. Así <TD COLSPAN=3></TD> produciría una celda que se extendería horizontalmente a lo largo de 3 columnas.

Una vez conocidas las tres etiquetas y sus modificadores es conveniente establecer un método para que el trabajo resulte ágil. 

  • Dibujamos un boceto de la estructura de la tabla. 
  • Creamos un archivo con las etiquetas básicas de un documento HTML. (Puede valernos una plantilla vacía que hayamos creado previamente) 
  • Escribimos las etiquetas de apertura y cierre de la tabla (no olvidando poner BORDER=1 en la apertura) separándolas con varias pulsaciones de la tecla INTRO para que nos resulte cómoda la inserción de las etiquetas intermedias. 
  • Escribimos tantas etiquetas de apertura y cierre de filas como vayamos a necesitar. (Dejamos espacios intermedios para insertar las celdas). 
  • Introducimos las etiquetas de celdas en cada fila con sus modificadores correspondientes. La clave del éxito consiste en tener en cuenta que todas las filas deben tener el mismo número de celdas, por lo que tenemos que contar los atributos: una fila en la que sólo tenemos dos etiquetas de celda, pero cada una se extiende por dos columnas y además hay una celda de filas anteriores que se ha extendido verticalmente hasta ésta tiene en realidad 5 celdas (1+2+2). 
  • Para facilitar la visualización en Netscape debemos introducir en cada celda que creemos los caracteres &nbsp; que corresponden al código que el navegador interpreta como un espacio. La forma más cómoda es escribirlos una vez cuando hemos creado la tabla, copiarlos e irlos pegando en el interior de cada una de las celdas. (Más adelante veremos el truco de la imagen de 1 pixel
  • Para llevar el control de las celdas creadas puede ayudarnos el irlas tachando sobre el boceto a medida que las vamos haciendo, considerando siempre la retícula formada por el número total de filas y columnas. 
  • Cuando está creada la estructura de la tabla guardamos el archivo con extensión .htm y lo abrimos en el editor de Netscape para introducir los contenidos de las celdas y modificar otros atributos, tales como la posición, grosor de bordes, etc, de forma más cómoda. 
 

Práctica 7-c

  • Creamos un documento HTML nuevo, utilizando el Bloc de notas o un editor que nos permita introducir directamente el código. 
  • Mediante la incorporación de etiquetas creamos una tabla como la siguiente:

  •  
                         
                         
             
           
             
  • Salvamos el documento como ej7c.htm y lo cargamos en el navegador para rellenar las celdas y comprobar el resultado final. (Dado que lo importante es la estructura, los datos que introduzcamos en cada celda serán aleatorios) 
 
 
© Raúl Luna '98