Ejercicios unidad 6: Tablas

Ejercicio 1: Practicar con tablas

Vamos a crear una nueva versión de la página index.html que habíamos creado en ejercicios anteriores, a esta nueva versión le llamaremos index_tablas.html. Para ello abre el archivo index.html de la carpeta ejercicios/cursos-aulaclic, que creamos anteriormente. Deberás tener el siguiente código:

<!doctype html>
	  <html lang="es">
	  <head>
	  <meta charset="utf-8" />
	  <title>aulaClic. Cursos gratis</title>
	  <link rel="stylesheet" type="text/css" href="css/aulaclic.css" />
	  </head>
	  <body>
	  <a href="https://www.aulaclic.es">
	  <picture>
	  <source media="(orientation: portrait) and  (max-width: 500px)" srcset="graficos/logo_aulaclic_pequeno.png" >

	  <img src="graficos/logo_aulaclic.png" alt="logo aulaClic">
	  </picture>
  </a>
  <p>La primera web en español sobre cursos de informática gratis on-line.</p>
  <ul>
  <li><h2>Cursos de aulaClic</h2></li>
  <ol>
  <li>Access 2016</li>
  <li>Excel 2016</li>
  <li>Internet</li>
  <li>Windows</li>
  </ol>
  <li><h2>Cursos de colaboradores</h2></li>
  <ol start="5">
  <li>autoCAD 2015</li>
  <li>Estadística con Excel</li>
  <li>Joomla</li> 
  </ol>
  </ul>
  <hr>
  <p><a href="https://www.aulaclic.es/portada/Política_cookies.html" target="_blank"> <b>Política de cookies</b></a> </p> 
  </body>
  </html>

Guarda una copia de este archivo con el nombre index_tablas.html dentro de la carpeta ejercicios/cursos-aulaclic. Sobre este nuevo archivo debes realizar las siguientes modificaciones:

a) Vamos a colocar los elementos de la página en las celdas de una tabla. Lo haremos en varios pasos. El primero será crear una tabla de 6 filas y 4 columnas, y colocar los elementos de la página tal y como muestra la siguiente imagen. En la columna de la derecha hemos añadido varios textos. Los bordes de las celdas sólo son para que se vea más clara la distribución de las celdas.

Ej. propuesto 6, a

b) A continuación utilizando colspan cambia la distribución para que quede como muestra la siguiente imagen.

c) En el siguiente paso hay que agrupar la primera fila dentro de thead, las filas 2 a 5 en tbody, y la fila 6 en tfoot. La primera fila tendrá en la primera celda el logo de aulaClic y en las tres celdas siguiente agrupadas el texto "La primera web ...". Convertir las listas ordenadas en listas desordenadas. Mediante una hoja de estilo llamada aulaclic_tablas.css debes asignarle unos colores similares (beige, azure, bisque) a los que muestra la siguiente imagen:

d) En este último paso debemos crear un estilo llamado primera para la celda con el texto "La primera web ..." y darle un ancho del 80% y un color color "darkred". Para las celdas de la columna de la derecha debemos crear un estilo llamado opciones y darle un color #eee y un ancho del 20%. La tabla debe tener un ancho de 100%.
Debe quedar aproximadamente como muestra la siguiente imagen.

Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.

Enero-2019 (V 2.0)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies