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

Boletos · « **en:** 02 de Marzo 2016, 18:31 »

Hola!! Amigos de aprenderaprogramar.

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

Código:

 /* 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!

Mario R. Rancel · « **Respuesta #1 en:** 04 de Marzo 2016, 10:24 »

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 · « **Respuesta #2 en:** 06 de Marzo 2016, 19:38 »

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!!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: