#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Plantilla Melina para blogger
Enviar mensajes de whatsapp guardan el número
Ventanas modales para imágenes y videos
Texto sobre imágenes con CSS
Efectos imágenes
Gourmet
Slider de imágenes con jQuery
Cambia el enlace de Leer Más en blogger
Modo de arranque rápido en Windows 10
Generador de Tooltip
Teclado Windows 10
Menu vertical jGlideMenu

Tabla llamativa CSS

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; }


Publicar un comentario

0 Comentarios