Autor Tema: HTML y CSS aplicar estilos a tablas tr:nth-child alternar colores filas CU01052D  (Leído 9355 veces)

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
Hola!! Amigos de aprenderaprogramar.

Dejo la contestación al ejercicio CU01052D del curso de CSS desde cero.

Código:
Código: [Seleccionar]
/* Curso CSS aprenderaprogramar.com */

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) Sigo donde lo dejó el enunciado:

Font-family: Helvetica, Arial, sans-serif; da lugar a que el tipo de letra de la tabla
   sea Helvetica, si no, Arial, si no, sans-serif.

width:640px; da lugar a que el ancho de la tabla sea de seiscientos cuarenta pixeles.

border-collapse:collapse;} da lugar a que los espacios entre las celdas desaparezcan.

td, th{border:1px solid transparent; da lugar a que los bordes de las celdas tengan un pixel de grosor, tipo continuo y transparentes, por lo que es como si no    existiesen pero, ocupan sitio.

height:30px;} da lugar a que el alto de las celdas tenga treinta pixeles.

th{background:#d3d3d3; pinta el fondo de las celdas de cabecera de gris.

font-weight:bold;} pone en negrita el texto de las celdas de cabecera.

td{background:#fafafa; realmente no está haciendo nada, porque el color de fondo de    las celdas de datos se reescribe en las dos lineas siguientes, por lo que    se podría quitar para simplificar el código.

text-align:center;} centra el texto de las celdas de datos.

tr:nth-child(even) td{background:#f1f1f1;} pinta el fondo de las celdas en las filas
   impares de gris claro.

tr:nth-child(odd)  td{background:#fefefe;} pinta el fondo de las celdas en las filas
   pares de gris más claro.

tr td:hover{background:#666; colorea de gris oscuro (#666666) las celdas sobre las que pasamos el ratón.

color:#fff;} colorea de blanco (#ffffff) el texto de las celdas sobre las que pasamos el ratón.

NOTA.- El código se podría simplificar si quitamos el color de fondo de las celdas

   td{background:#fafafa;

   y en lugar de pintar celdas de filas pares, impares pintamos las filas:

   tr:nth-child(even){background:#f1f1f1;}

   tr:nth-child(odd){background:#fefefe;}


   al no tener color de fondo las celdas el efecto sería el mismo, con menos código.


b) En la línea table habría que cambiar border-collapse:collapse; por border:2px solid; y en la linea td, th cambiar border:1px solid transparent; por border:2px solid;.


c) Habría que cambiar td, th{border:1px solid transparent por td, th{border:3px solid orange;

Creo que está. Un saludo!! Y gracias!
« Última modificación: 04 de Marzo 2016, 10:18 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Buenos días bien las respuestas; en la respuesta a este ejercicio es conveniente incluir el código HTML para poder visualizar tanto la tabla inicial como la tabla con los cambios propuestos

También como has propuesto mejoras sería interesante verlas directamente sobre un código HTML
 
Saludos

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
Hola! Mario.
Dejo el código con los cambios propuestos y el html:
Código: [Seleccionar]
<html>
<head> <title>Ejercicio Tablas 1052</title>
<meta charset="utf-8">
<style type="text/css">
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{text-align:center;}
tr:nth-child(even){background:#F1F1F1;}
tr:nth-child(odd){background:#FEFEFE;}
tr td:hover{background:#666; color:#FFF;}
</style>
</head>
<body>
<table>
<caption>Contenido nutricional por cada 100g de alimento</caption>
<tr><th>Alimento</th><th>Calorías (kCal)</th><th>Grasas</th>
<th>Proteína (g)</th><th>Carbohidratos (g)</th>
</tr>
<tr><td>Arándano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr><td>Plátano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr><td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr><td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
<tr><td>Kiwi</td> <td>44</td> <td>0.55</td>
<td>0.87</td> <td>7.9</td>
</tr>
<tr><td>Naranja</td> <td>32</td> <td>0.145</td>
<td>0.8</td> <td>6.57</td>
</tr>
</table>
</body>
</html>
Disculpa el despiste.
Un saludo!!

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".