Tablas>>Crear tablas

Crear tablas

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.

Pulsando sobre el icono de la barra de herramientas o mediante el menú tablainsertartabla se accede a la ventana de creación de tabla. Como puedes ver hay dos modos de creación: el rápido que nos permite crear tablas de unas dimensiones máximas de 6 filas x 6 columnas mediante un simple movimiento de ratón o el preciso que me permite especificar un tamaño mayor, así como la anchura y el borde de la tabla.

Si pulsáramos sobre el botón accederíamos a una pantalla para establecer otras propiedades que se comentarán más adelante. Por el momento la sugerencia es que, en un primer momento, te limites a especificar el número de filas y columnas y el ancho que quieres adjudicarle a la tabla

Una vez que hemos tomado contacto 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.
• 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 actividad22.html y comprobamos los resultados en el navegador.

En el siguiente vídeo se muestra una una descripción de los diversos elementos que constituyen el panel de propiedades de la tabla..

A partir de la tabla base que hemos creado en la actividad 21 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.

Los cierres de las etiquetas </tr> y </td> son opcionales según las especificaciones del W3C. Sin embargo, el cierre de la etiqueta </table> es obligatorio, por lo que 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 </table> puede hacer que, según el navegador con el que se visualice, el contenido de la página no se muestre en pantalla.

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 actividad 22 y le añadiremos una fila por encima para agrupar los datos en Primer y Segundo Ciclo.

• Abre el archivo actividad22.html si lo habías cerrado.
• Pulsa con el botón derecho sobre cualquier celda de la primera fila y elige tabla  insertar  fila superior .
• Comprobarás que la fila se ha insertado por encima de la celda en la que nos encontrábamos.
• Sitúate ahora en la celda que se encuentra encima de la que contiene la referencia al curso 1º y, pulsando y arrastrando haz que queden marcadas esa celda y la que se encuentra a su derecha.
• Pulsa el botón derecho y elige unir celdas seleccionadas.
• 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 actividad23.html y comprueba los resultados en el navegador.

Tal vez te haya llamado la atención la existencia de unos pequeños iconos que aparecen en los bordes izquierdo y superior de la celda en la que se encuentra el cursor y que modifican su color cuando el ratón pasa sobre ellos.

Su función es la de facilitar la tarea de añadir o eliminar filas y columnas: la pulsación sobre eliminará la fila o columna a la que pertenezca la celda, mientras que la pulsación sobre las flechas añadirá una fila o columna en la posición que señalemos respecto a la celda activa.

Si necesitas copiar y pegar celdas notarás que N|VU pega el contenido dependiendo de la forma en la que se haya seleccionado el contenido original:

• Si ha sido mediante arrastrar para marcar un fragmento de texto, aunque sea todo el contenido de la celda se pegará el mismo como texto.
• Si se ha pulsado la tecla y se ha hecho clic lo que habremos copiado realmente es la celda completa, por lo que al pegarla veremos que aparece una celda anidada dentro de la celda de destino.