Con los siguentes codigos CSS lograras una tabla con diferentes colores entre encabezado y demás filas. Además al pasar el cursosr por una fila esta se destaca con otro color.
Código HTML
<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>
Código CSS
/* tabla con estilo css*/
body {font-family: Arial, Helvetica, sans-serif;}table { font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;
font-size: 12px; margin: 45px; width: 480px; text-align: left; border-collapse: collapse; }th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe;
border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; }td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff;
color: #669; border-top: 1px solid transparent; }
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos