Ejercicio con Tablas   HTML

Este serie de ejercicios trata sobre el elemento table de HTML. No están encaminados al uso de estilos CSS, solo la estructura de tabla. Recuerda que en HTML5 las tablas solo deben usarse para mostrar información tabulada, como catálagos, listas de precios y similares. No se recomienda utilizar tablas para maquetar la página.

Recuerda también que el uso de tablas en páginas responsive es un poco complejo, ya que su estructura no facilita el redimensionado. En diseños responsive es habitual que las tablas provoquen scroll horizontales.

Por últmo verás que las tablas que construyas en estos ejercicios no quedan muy vistosas, ten paciencia porque luego haremos ejercicios CSS donde ya usaremos estilos y quedarán más bonitas. Ahora se trata de conocer y usar el elemento table de html

 

Tabla simple

Crea una página web con la tabla sencilla como la mostrada en esta imagen. La página deberá tener una primera linea con el texto Temperaturas de la semana en un encabezado nivel 1. el título de la página será Tabla de temperaturas
Tabla simple

Tabla con cabeceras

La tabla que tienes que construir en esta ocasión es similar a la del ejemplo anterior, pero en este caso cada columna debe tener un título tal como se muestra en la imagen

La primera linea de la página llevará el encabezado El tiempo semanal, el título de la página será Tabla del timepo en la semana

Tabla simple

Tabla con título

Tienes que crar una tabla como la de la figura. Esta tabla tiene un titulo (Turnos de almacén) y cada columna tiene su cabecera Dia, Mañana y Tarde.

La página tendrá como título Turnos semanales, con formato encabezado nivel 2. Solo debes usar elementos de table.

Tabla simple

Uniendo celdas

En este ejercicio vas a ponerle un pie a la tabla uniendo todas las celdas de la última fila. En el pie irá la nota aclaratoria "La masa es relativa a la masa de la tierra" y tendrá formato de encabezado nivel 5.

La tabla tendrá un tútulo: El sistema solar que irá con formato de encabezado nivel 3. El tídulo de la página web será Planetas del sistema solar.

Tabla simple

Más celdas combinadas

Vas a crear la talba de la imagen. Como ves esta tabla combina todas las celdas de la primera columna para colocar una imagen de Júpiter, con el atributo  alt igual a Planeta Jupiter. También se unen la segunda y tercera celdas de cabecera para poner el texto Datos. La tabla posee un título El Planeta Júpiter colocado en el caption.

Por suparte el título de la página será Planeta Júpiter

Tabla simple

Horario

Vas a crear una tabla para anotar un horario de clases. Fíjate en la imagen para ver el resultado final. La página tendrá como título Horario de Clases. Observa que las celdas de recreo son cinco celdas combinadas. El titular de la tabla (Horario del curso) está en negrita.

Tabla simple

Tabla con titular y pie

Esta página que vas a crear se titula Tabla con Caption inferior y contendrá una tabla en la que el titular está en la parte inferior e indicará que las temperaturas están en la escala Celsius.

Tabla simple

Más celdas combinadas

Crea una página con título Ventas de almacenes. La primera linea contendrá un encabezado nivel 2 con el texto Ventas totals de almacenes Gracias. Debajo de es linea aparecerá la tabla, como se muestra en eta imagen. Como se ve los nombres de ciudades están en celdas combinadas, entre el grupo de sucrusales de cada ciudad hay una fila completa cuyas celdas contienen un espacio ($nbsp;).

Tabla simple

Tabla compleja

Crea la página con título Resultados del curso. La tabla tiene como caption el mismo texto. Combina celdas y usa los elementos de tabla adecuados para conseguir un atabla como la mostrada en la figura.

Tabla simple

Una catálogo con tablas.

Construye este catáloo de ofertas inmobiliarias con una tabla cuyo caption (Oferta de casas) es un encabezamiento de nivel 3. El t´tiulo de la página es Catálogo de casas.

Tabla simple