#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Boton Spoiler
Formulario de Contacto Flotante
Formato Condicional para Excel. Reglas superiores e inferiores
Formato Condicional para Excel -Barra de datos
Como saber que sistema operativo uso en mi PC?
Windows File Recovery
Plantilla estilo Megazine
Boton descarga
Agregar un enlace a la fuente original cuando copien contenido de tu blog
Como podemos crear una USB para instalar el programa de Windows
Tabs animados solo con CSS
Tabla llamativa CSS

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