Ayuda ejercicios unidad 6: Tablas



Ejercicio 1: Practicar con tablas

La nueva versión index_tablas.html de la carpeta ejercicios/cursos-aulaclic, tendrá 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_tablas.css" />
	  </head>
	  <body>
	  <table>
  <thead>
  <tr>
  <td><a href="http://www.aulaclic.es">
  <picture>
  <source media=" (max-width: 1000px)" srcset="graficos/logo_aulaclic_pequeno.png" >
<img src="graficos/logo_aulaclic.png" alt="logo aulaClic"> </picture> </a></td> <td colspan="3" class="primera"><p>La primera web en español sobre cursos de informática gratis on-line.</p></td> </tr> </thead> <tbody> <tr> <td colspan="3"><h2>Cursos de aulaClic</h2></td> <td class="opciones">Opciones</td> </tr> <tr> <td colspan="3"> <ul> <li>Access 2016</li> <li>Excel 2016</li> <li>Internet</li> <li>Windows</li> </ul></td> <td class="opciones">YouTube</td> </tr> <tr> <td colspan="3"> <h2>Cursos de colaboradores</h2> </td> <td class="opciones">Foros</td> </tr> <tr> <td colspan="3"> <ul > <li>autoCAD 2015</li> <li>Estadística con Excel</li> <li>Joomla</li> </ul> </td> <td class="opciones">Contactar</td> </tr> </tbody> <tfoot> <tr> <td colspan="4"> <p><a href="http://www.aulaclic.es/portada/Política_cookies.html" target="_blank"> <b>Política de cookies</b></a> </p> </td> </tr> </tfoot> </table> </body> </html>

Y la hoja de estilo aulaclic_tablas.css de la carpeta ejercicios/cursos-aulaclic/css tendrá este código:

/* CSS Hoja de estilo. aulaclic_tablas.css */
table {width: 100%}
table, td {border-collapse: collapse;
border-style: none}
thead {text-align: center;
background-color: beige}
tbody {background-color: azure;
text-align: center}
tfoot {background-color: bisque;
text-align: center}
.opciones {
background-color: #eee;
width: 20%
}
.primera {
width: 80%;
font-size: 1.2em;
color: darkred;
font-weight: bold
}
h2 {color:blue }
ul { list-style-type: none;
font-weight: bold}
a:link { text-decoration: none }

El resultado final será aproximadamente como muestra la siguiente imagen.

 

Puedes ver el resultado en este enlace, comprueba como la página se adapta al cambiar el tamaño de la ventana: index_tablas.html

Como hemos dicho en la teoría del curso, utilizar tablas para el diseño de la página es una solución antigua, ahora se deben utilizar Grid layout y Flexbox.

También puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.


Enero-2019 (V 2.0)
Atrás Volver Adelante






Página inicial  Cursos Informática Gratuitos

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


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.