Creación de tablas HTML

Jorge Ferrer

Victor García

Rodrigo García

Versión 1.0

Con su aparición las tablas y revolucionaron el diseño de las páginas web. Las tablas eran una herramienta perfecta para organizar datos de manera ordenada, pero su utilidad no se queda ahí, ya que escondiendo los bordes podremos usarlas también para definir la estructura de las páginas. En este capítulo aprenderemos todas las etiquetas y atributos que existen en el lenguaje HTML estándar para la creación de tablas y realizaremos numerosos ejemplos y ejercicios para ir cogiendo práctica, que es, al fin y al cabo, lo más importante a la hora de sacar el máximo partido a las tablas.

Armados con nuestros conocimientos sobre la etiqueta TABLE y después de haber realizado unos cuantos ejemplos simples para practicar, dedicaremos el resto del capítulo a la realización de dos prácticas. Con ellas nos daremos cuenta de las grandes posibilidades que nos ofrecen las tablas en el diseño de páginas Web.

Aviso Legal
Tabla de contenidos
1. Cómo se crea una tabla
1.1. Borde de las tablas
1.2. Insertar un título para la tabla
1.3. Tamaño de las tablas
1.4. Ejercicio 7.1
2. Alineamiento de tablas
3. Alineamiento de celdas y filas
4. Ancho de tablas y celdas
4.1. Tamaño de las celdas
4.2. EJERCICIO 7-2
4.3. El atributo NOWRAP
5. Celdas que abarcan varias filas o columnas
6. Márgenes y separación de celdas
6.1. Ejercicio 7.3
6.2. Conclusión
7. Anidamiento
8. Práctica 3 - Tabla de Datos.
8.1. Paso 1.
8.2. Paso 2.
8.3. Paso 3.
8.4. Paso 4.
8.5. Paso 5.
9. Práctica 4 - Página Web con una estructura creada con tablas.
9.1. Paso 1 - Planificación.
9.2. Paso 2 - Código básico.
9.3. Paso 3 - Estructura de la página principal.
9.4. Paso 4 - Estructura del resto de páginas.
9.5. Paso 5 - Contenido de la página principal.
9.6. Paso 6 - Contenido gráfico.
9.7. Paso 7 - Cambiar el fondo y color del texto.
9.8. Paso 8 - Realización del resto de las páginas.
9.9. Paso 9 - Retoques, pruebas, revisión y mantenimiento.

Con lo que hemos visto hasta ahora la disposición de los elementos de una página web es aún harto difícil. Tras estudiar los métodos de alineamiento empezamos a adquirir un mayor control sobre ellos, pero sin duda fueron las tablas las que van a darnos una mayor flexibilidad para decidir la disposición de los elementos en una página. En un principio las tablas pueden servir para mostrar una serie de datos de una manera ordenada, tal y como estamos acostumbrados a ver en numerosas situaciones, sin embargo las tablas en la web tienen una utilidad aún mayor. Podemos hacer que toda nuestra página, o una parte de ella, sea una tabla e ir colocando los diferentes elementos de los que conste en sus celdas. De esta forma sabremos con gran precisión donde estamos colocándolas. En la página de GNOME Hispano, figura 7.1, podemos ver un excelente ejemplo de ello.

Figura 7.1. En el web de GNOME Hispano encontramos multitud de elementos, gráficos y texto, con una disposición muy cuidada. ¿Cómo lo hacen? Con tablas.

Un inconveniente de las tablas radica en que si bien los navegadores gráficos tienen una gran libertad para colocar y distribuir los elementos, esto no ocurre así con los navegadores en modo texto. Por ello cuando vemos una página con tablas en uno de estos navegadores nuestra cuidada presentación puede caer por los suelos. Sin hablar de navegadores para ciegos o los usados en los coches, que leen las páginas. En estos casos el usar tablas para controlar la apariencia provoca que el navegador se líe y no interprete bien la página.

Por supuesto existen métodos o trucos para evitarlo en lo posible, y merecerán nuestra atención una vez nos hayamos convertido en unos expertos en la creación de tablas.