PDF de programación - Edición HTML - Tablas

MINISTERIO
DE EDUCACIÓN
Y CIENCIA

SECRETARÍA GENERAL
DE EDUCACIÓN
Y FORMACIÓN PROFESIONAL

DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA

CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA

Edición HTML

Tablas

C/ TORRELAGUNA, 58
28027 - MADRID

Índice de contenido

Cuestiones previas sobre el uso de tablas........................................................................... 3
Crear tablas.......................................................................................................................... 4
Propiedades de la celda, fila o columna............................................................................... 7
Unir y dividir celdas.............................................................................................................. 8
Creación de una tabla a partir de un texto........................................................................... 8
Tablas anidadas................................................................................................................... 9
Estructuración de las tablas............................................................................................... 12
Atributos en las opciones de edición avanzada................................................................. 13
Ejemplos del atributo frames.......................................................................................... 15
Ejemplos del atributo rules............................................................................................. 16

Tablas

2 de 16

CUESTIONES PREVIAS SOBRE EL USO DE TABLAS
CUESTIONES PREVIAS SOBRE EL USO DE TABLAS

Cuando nos enfrentamos a la creación de nuestra primera página WEB es inevitable que
pretendamos reproducir aquello a lo que estamos acostumbrados al trabajar con un
procesador de textos. Sin embargo, las cosas no son tan sencillas en HTML.

Si utilizamos HTML básico, y ese es el contenido central de este curso en su modalidad de
iniciación, la situación de los elementos de la página es una tarea que tiene un cierto grado de
complicación. 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. El motivo es que, el lenguaje HTML no nació
con vocación de servir para dar formato a la presentación, sino para apoyar la estructuración
del contenido. Por ello, una primera aproximación al formato pasa por la utilización de las
tablas para una función que no es la que originalmente tenían adjudicada.

Antes de continuar es importante señalar una cuestión: el posicionamiento utilizando tablas
está desaconsejado por las recomendaciones del organismo internacional encargado de dictar
las especificaciones de estandarización de los lenguajes para la web, el W3C. A pesar de ello
trataremos esta técnica como primera aproximación al posicionamiento por una cuestión muy
evidente: una gran mayoría de los sitios web publicados siguen utilizando, en contra de las
especificaciones mencionadas, el posicionamiento mediante tablas por lo que es muy probable
que cuando intentes aprender mirando el código de otras páginas encuentres esta técnica.

La alternativa estaría en la utilización del posicionamiento mediante la utilización de hojas de
estilo en cascada (CSS) e incluso la combinación con lenguaje JavaScript. Aunque el
lenguaje Javascript sería materia para un curso específico, si que se tratará en el nivel de
profundización del trabajo con hojas de estilo que permitirá separar el contenido de las páginas
de su diseño visual.

Una vez hechas las consideraciones previas vamos a hacernos una idea del
método utilizaremos para situar los elementos de una página mediante tablas. Para
ello podemos pensar en la tarea que realizaban los cajistas de las imprentas cuando
trabajaban con tipos de plomo. Su primera tarea consistía en recoger el diseño de la página y
repartir la plancha utilizando tablillas que delimitaban las diferentes zonas. Una vez hecha esta
primera distribución de "masas" iban introduciendo los tipos en cada una de las zonas que se
habían creado para componer el texto de las noticias.

Pues bien, la forma en la que vamos a repartir los diferentes contenidos dentro de nuestra
página va a ser la misma que si trabajáramos en una de estas viejas imprentas. En lugar de
utilizar pequeños listones de madera vamos a crear tablas cuyos límites entre celdas harán la
función de separación entre las zonas.

Como idea general puede servirnos de orientación para establecer un paralelismo, aunque hay
un detalle que hace inconsistente la comparación: la hoja del periódico tiene un tamaño fijo,
igual que los tipos de plomo que se utilizan para rellenar cada una de las zonas, mientras que
una página web tiene un tamaño variable, igual que los tipos que solemos utilizar para escribir
en ella, por lo que no podemos garantizar la estabilidad con la que contaban nuestros
tipógrafos de referencia. Queda pues apuntada esta cuestión para que tengamos en cuenta
que el paralelismo no es perfecto.

Por otra parte no podemos olvidar que, independientemente de su inestimable colaboración
para diseñar una página, las tablas tienen una función consustancial a su propia estructura:
presentar información susceptible de organizarse en unos ejes cartesianos en los que
encontremos un dato como combinación única de otros dos definidos en los ejes horizontal y
vertical. Será esta función la que tendrán que adoptar finalmente cuando tengamos suficiente
dominio de los mecanismos de posicionamiento del HTML.

Empezcemos pues a acercarnos a las tablas como elemento de posicionamiento considerando
su evolución desde el menor grado posible de complejidad:

Tablas

3 de 16

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.



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ú TABLA

INSERTAR TABLA 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.

Tablas

4 de 16

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 la documentación en HTML encontrarás un vídeo que muestra una descripción de los
diversos elementos que constituyen el panel de propiedades de la tabla.

Cuando hagas alguna prueba de lo que se acaba de decir verás que parece que no
funciona cuando la tabla está alineada a la izquierda.

El motivo es que cuando se utiliza la alineación izquierda el programa elimina el atributo
align="left">, mientras que mantiene correctamente align="right" cuando se alinea a
la derecha. Para corregir este pequeño error tendrás que introducir manualmente este
atributo en la etiqueta <table>
Si la tabla ocupa menos del 100% de la ventana y elegimos una alineación a la izquierda o a la
derecha el texto fluirá por el espacio que haya quedado libre en el lado opuesto.

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.

<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í