Buenas tardes. Este es el enunciado del ejercicio CU01052D del tutorial pdf de programación web con CSS:
Crea el código HTML de una tabla con un título de tabla, cinco columnas y 7 filas (la primera ella, fila de encabezados que no son datos propiamente dichos). Aplícale los siguientes estilos, comprueba la visualización obtenida y responde a las siguientes cuestiones:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01052D
</title>
<meta name="author" content="EnigmaticNerd"/>
<meta name="desription" content="Diseño de tablas css - aprendeaprogramar.com"/>
<meta name="keywords" content="css, diseño, tablas, border-spacing, caption-side, aprenderaprogramar.com"/>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01052.css"/>
</head>
<body>
<table>
<tr>
<td>Aprender</td>
<td>Trabajar</td>
<td>Educar</td>
<td>Laborar</td>
<td>Emprender</td>
</tr>
<tr>
<td>Motivar</td>
<td>Incentivar</td>
<td>Invertir</td>
<td>Creer</td>
<td>Estudiar</td>
</tr>
<tr>
<td>Compartir</td>
<td>Promover</td>
<td>Concebir</td>
<td>Atender</td>
<td>Enseñar</td>
</tr>
<tr>
<td>Afianzar</td>
<td>Triunfar</td>
<td>Alcanzar</td>
<td>Descansar</td>
<td>Añadir</td>
</tr>
<tr>
<td>Resolver</td>
<td>Concentrar</td>
<td>Organizar</td>
<td>Estructurar</td>
<td>Diseñar</td>
</tr>
<tr>
<td>Plantear</td>
<td>Posicionar</td>
<td>Comprender</td>
<td>Abrir</td>
<td>Cerrar</td>
</tr>
<tr>
<td>Liderar</td>
<td>Sublegar</td>
<td>Resaltar</td>
<td>Añorar</td>
<td>Humanizar</td>
</tr>
</table>
</body>
</html>
/*Estilos para el ejercicio CU01052*/
table { color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
td, th { border: 1px solid transparent; height: 30px; }
th { background: #D3D3D3; font-weight: bold; }
td { background: #FAFAFA; text-align: center; }
tr:nth-child(even) td { background: #F1F1F1; }
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }
a) Describe cuál es el efecto que genera cada una de las especificaciones que hemos incluido en el código CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que …).
b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.
c) Indica qué modificación habría que hacer en el código para que se muestren bordes simples de color naranja de grosor 3 píxeles.
Respuestas:
a.)color:#333 establece que todos los textos dentro del elemento table se muestren de un color grist oscuro; font-family:Helvetica, Arial, sans-serif indica que la fuente a utilizar dentro del elemento table será Helvetica, en caso de no encontrarse esa fuente se utilizará Arial o en su defecto sans-serif; width:640px, define una ancho de 640 pixeles para el elemento table; border-collapse:collapse indica que el borde de la tabla será único.
a.1)border:1px solid transparent establece que el border de los elementos td y th será transparante y con un grosor de 1px; height:30px define que los elementos td y th tendrán una altura de 30 pixeles.
a.2)background:#D3D3D3 indica que los elementos th tendrán un color de fondo plateado; font-weight:bold establece el texto de los elemento th como negrita.
a.3)background:#FAFAFA define los elementos td con un color de fondo gris claro; text-align:center indica que el texto de los elementos td se mostrará centrado.
a.4)background:#F1F1F1 establece un color de fondo gris claro para los elementos td que estén dentro de los elementos tr que sean pares.
a.5)background:#FEFEFE indica un color de fondo gris bastante claro para los elementos td que estén dentro de los elementos tr que sean impares.
a.6)background: #666 dota con un color de fondo gris semi oscuro a los elementos td sobre los que se pase el puntero por encima (hover), que a su vez estén dentro de un elemento tr; color: #FFF establece el color de texto blanco para los elementos td sobre los que se pase el puntero (hover), que a su vez estén dentro de un elemento tr.
b.)
table { color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px;}
td, th { border: 2px solid; height: 30px; }
c.)
table { color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
td, th { border: 3px solid #F70; height: 30px; }
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
Tema: CSS diseño tablas, border-spacing poner filas impares de distinto color CU01052D (Leído 2425 veces)
RSS -
WAP2