Para empezar a trabajar con tablas lo haremos considerando unos datos que se prestan a su representación por medio de este recurso.

Necesitamos publicar en la página WEB del centro los datos de matriculación en los que vamos a incluir el número de alumnos matriculados en cada uno de los dos grupos de cada uno de los niveles de Educación Secundaria Obligatoria.

La forma de acceder a la herramienta de creación de tablas es diferente en cada uno de los editores que estamos utilizando:

En Front Page Express disponemos de un icono que nos puede inducir a equivocarnos ya que, visualmente, parece que sugiere una organización en columnas más que una tabla. Sin embargo, al presionarlo se despliega una ventana que nos informa que estamos construyendo una tabla y el número de celdas que la forman según vamos arrastrando el ratón.

En el caso de Composer el icono es, gráficamente mucho más adecuado, pero al presionarlo no se produce una selección gráfica de las dimensiones de la tabla, sino que se presenta una pantalla con una buena colección de opciones.

La imagen que he capturado presenta las opciones que aparecen por defecto al crear una nueva tabla. Como iremos viendo en su momento lo que suponen las variaciones en cada una de ellas te sugiero que, en un primer momento, te limites a especificar el número de filas y columnas. Una vez que hemos tomado contacto con ambos entornos vamos a empezar a realizar alguna práctica con las tablas.

• Creamos en el editor un documento nuevo e insertamos en él una tabla con 3 filas y 5 columnas.
• Dejamos, de momento, todos los apartados con los valores por defecto que nos ofrece el programa.
• 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. En la zona superior colocaremos los identificadores de 1º, 2º, 3º y 4º y en la izquierda los correspondientes a los grupos A y B. Inventamos unos datos de matrícula para cada uno de los ocho grupos.
• Guardamos el trabajo como practica16.htm y comprobamos los resultados en el navegador.

• Creamos en el editor un documento nuevo e insertamos en él una tabla con 3 filas y 5 columnas.
• 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. En la zona superior colocaremos los identificadores de 1º, 2º, 3º y 4º y en la izquierda los correspondientes a los grupos A y B. Inventamos unos datos de matrícula para cada uno de los ocho grupos.
• Guardamos el trabajo como practica16.htm y comprobamos los resultados en el navegador.

Si te has tomado la molestia de hacer el ejercicio 16 con ambos editores habrás comprobado que los resultados obtenidos con uno y otro editor no son exactamente iguales. Ello se debe a que los valores que aplican por defecto no son los mismos. Así pues, es el momento de que revises cuales son los efectos que se provocan al modificar alguno de ellos.

Explorar la pantalla de opciones de tabla de:

• Composer
• Front Page Express

A partir de la tabla base que hemos creado en la práctica 16 vamos a ir haciendo añadidos para completarla. Iremos comprobando a través de los siguientes ejercicios que el trabajo con tablas puede resultar ciertamente complicado debido a las características de lenguaje HTML . Por ello vamos 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.

Antes de pasar al siguiente ejercicio vamos a dejar constancia de cuáles son las etiquetas básicas que intervienen en la definición de una tabla.

<table> Aquí se inicia la tabla
<tr> Esta etiqueta indica el inicio de una fila
<td>Entre estas etiquetas irá el contenido de la primera celda</td>
<td>Y aquí el de la segunda</td>
</tr> Esta indica el fin de la primera fila.
A continuación empezaría la siguiente fila con una nueva etiqueta <tr> y las correspondientes a las celdas hasta el cierre de la nueva fila con </tr>
</table>

Si en alguna ocasión modificas una tabla trabajando directamente sobre el código ten en cuenta que la ausencia de una etiqueta de cierre puede hacer que el contenido de la página se haga invisible, especialmente si se visita la página con Netscape, ya que Explorer es algo más tolerante a este tipo de errores en el código de la página.

Iremos viendo más adelante los atributos que pueden acompañar a las etiquetas, pero por el momento nos resultará suficiente lo que acabamos de ver para continuar avanzando en las prácticas.

Vamos a partir de la tabla que creamos en la práctica 16 y le añadiremos una fila por encima para agrupar los datos en Primer y Segundo Ciclo.

• Abre el archivo practica16.htm si lo habías cerrado
• Pulsa con el botón derecho sobre cualquier celda de la primera fila y elige Insertar / Fila 
• Comprobarás que, desgraciadamente, la fila se ha insertado a continuación, con lo que necesitarás 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). 
• Sitúate ahora en la celda que se encuentra encima de la que contiene la referencia al curso 1º y, pulsando con el botón derecho, selecciona Propiedades de la tabla / pestaña Celda. En las casillas que aparecen tras la alineación horizontal y vertical indica 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º comprobarás que 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)
• Rellena las celdas superiores con el texto Primer Ciclo y Segundo Ciclo respectivamente.
• Guarda el trabajo como practica17.htm y comprueba los resultados en el navegador.

Vamos a partir de la tabla que creamos en la práctica 16 y le añadiremos una fila por encima para agrupar los datos en Primer y Segundo Ciclo.

• Abre el archivo practica16.htm si lo habías cerrado
• Pincha con el ratón en alguna de las celdas de la primera fila
• Acudimos al menú Tabla, seleccionamos Insertar filas o columnas y especificamos en la ventana de diálogo que queremos una fila situada encima del punto en que se encuentra el cursor.  
• Sitúate ahora en la celda que se encuentra encima de la que contiene la referencia al curso 1º. Arrastra el ratón para seleccionar esa celda y la que está a su derecha y utiliza el menú Tabla / Combinar celdas
• Repite la operación con la celda situada encima de la referencia a 3º.
• Rellena las celdas superiores con el texto Primer Ciclo y Segundo Ciclo respectivamente.
• Guarda el trabajo como practica17.htm y comprueba los resultados en el navegador.

Independientemente del editor que hayas utilizado habrás comprobado que para asegurarte de los resultados obtenidos lo más recomendable es cargar la página en un navegador.

Cuando deseamos borrar alguna celda (no su contenido) es sencillo si se está utilizando Front Page Express, ya que basta con pulsar la tecla suprimir. Sin embargo, si se utiliza Composer habrá que pulsar el botón derecho y elegir Eliminar celda ya que si lo hacemos por teclado nos dirá que no hay nada que suprimir.

A la hora de copiar o cortar varias celdas a la vez notarás una importante diferencia: mientras que Composer no salta los códigos de definición de celda y lanza un mensaje de error si lo intentamos, Front Page Express copia o corta los datos y los códigos que delimitan las celdas sin ningún problema.