Buen día! Ejercicio CU01052D del tutorial de programación web con CSS como si estuviera en primero, aguardo sus correcciones / mejoras.
HTML:
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS52estilostablas.css">
</head>
<body>
<table>
<caption>Contenido nutricional por cada 100 g de alimento.</caption>
<tr>
<th>Alimento</th>
<th>Calorías (kCal)</th>
<th>Grasas (g)</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>
</table>
</body>
</html>
CSS - Punto A:
table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
/* Definde el color de texto #333 (gris oscuro), la familia tipografica; en primera instancia Helvetica, si el usuario no tiene dicha fuente, se mostrará, Arial y si tampoco la tiene se visualizara cualquier familia que tenga siempre siendo "sans-serif". El largo de la tabla sera de 640px y los bordes colapsados.*/
td, th { border: 1px solid transparent; height: 30px;}
/* El borde de las columnas y filas sera de 1px, solida y transparente. La altura de 30px.*/
th { background: #D3D3D3; font-weight:bold; }
/*El fondo del titulo de cada columna con el color #d3d3d3 (tono gris) y el ancho de tipografia "bold" (negrita)*/
td { background: #FAFAFA; text-align: center;}
/*Color de fondo de cada celda (tono de gris claro) y el texto alineado en cada una de las mismas*/
tr:nth-child(even) td { background: #F1F1F1; }
/* Represanta las filas pares de la tabla con color de tono gris claro*/
tr:nth-child(odd) td { background: #FEFEFE; }
/* Represanta las filas impares de la tabla con color de tono gris levemente mas fuerte que el anterior*/
tr td:hover { background: #666; color: #FFF; }
/*Al pasar el mouse por cada una de las celdas, el color de fondo se hace gris oscuro y cada palabra de color blanco*/
CSS - Punto B:
table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: double 2px;}
td, th { border: 2px double; 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; }
/* b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.
CSS - Punto C:
table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: solid 3px orange; border-collapse: collapse;}
td, th { border: 3px solid orange; 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; }