Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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!
-
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
-
Hola! Mario.
Dejo el código con los cambios propuestos y el html:
<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!!