#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Imágenes con texto desplegable
Efecto de desvanecer las imagnes de nuestro blog al pasar el cursor.
Agrandar imagenes al pasar el cursor sobre ellas
 Plantilla Feminist Blogger Template
Plantillas Blog
Gadget etiquetas tipo menu
Un indice con JQuery para tu blog
La base de cotización
texto caligrafia
 Cinco estilos de Entradas populares
Como enviar un mensaje de WhatsApp sin guardar el número
Descubrir contraseñas ocultas

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