Entradas

Crear una lista con diferente color las filas pares e impares

Imagen
<article>                             <h3>Lista de ejemplo:</h3>                         <ul class="lista" >                             <li>Leche: Si</li>                             <li>Huevo: Si</li>                             <li>Gluten: No</li>                             <li>Frutos con cáscara: No</li>                             <li>Cacahuete: No</li>                             <li>Soja: Si</li>                             <li>Pescado: No</li>                             <li>Crustáceos: No</li>                             <li>Apio: No</li>                             <li>Mostaza: No</li>                         </ul>                       </article> ESTILO CON CSS /* las filas pares las pinto de color naranja */ .lista li:nth-child(odd) { background-color: orange; } /* Las filas impares las pinto de c
Publicar un comentario
Leer más

Tabla completa

Imagen
    <table>                        <thead>                         <tr>                         <!--El título va a ocupar el espacio de 10 celdas horizontalmente -->                             <td colspan="10">Información Nutricional/Porción(100g)</td>                         </tr>                         <!--tr define una fila en la tabla-->                           <tr>                           <!--rowspan ocupa el espacio de celdas verticalmente -->                             <th rowspan="2">Productos</th>                             <th colspan="3">Grasas</th>                             <th colspan="2">Hidratos de carbono(g)</th>                             <th colspan="3">Otros</th>                             <th>Energía(Kcal)</th>                           </tr>                        
Publicar un comentario
Leer más

Tablas con HTML5 colspan y rowspan

Imagen
Rowspan , indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila. Colspan , indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna. De esta forma si ponemos <td colsan=2> , quiere decir que la celda actual se extiende en el ancho de dos celdas. Algo parecido ocurre si ponemos <td rowspan=3> , la celda ocupará el alto de 3 celdas normales. Código fuente de la tabla: <table width="80%" border="1" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" ><p>Países Europeos</p></td> <td><p>España</p></td> <td><p>Madrid</p></td> </tr> <tr> <td><p>Francia</p></td> <td><p>Paris</p></td> </tr> <tr> <td><p>Reino Unido</p></td> <td><p>Lond
Publicar un comentario
Leer más

Creación de un ancla.

Poner un ancla que nos lleva de un punto a otro dentro de una misma página web es muy facil, unicamente ponemos el ancla o la imagen donde pulsaremos en el lugar que queramos:  <a href="#Ancla">Ancla</a> y donde queremos que nos lleve colocamos: <a name="Ancla" id="a"></a> Fin
Publicar un comentario
Leer más

Resultado Menu con submenu

Imagen
Publicar un comentario
Leer más

Menú con submenú en html5 y css

<!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">      <title>Menú con submenus</title>     <link rel="stylesheet" href="estilo.css" /> </head> <body>    <header>   </header>    <!--Unicamente incluyo el menú en la etiqueta <nav> el resto es normal--> <nav>         <ul class="menu">             <li><a href="#">Coches</a>                 <ul class="submenu">                     <li><a href="#">Coche1</a></li>                     <li><a href="#">Coche2</a></li>                 </ul>             </li><!--cierro li de panes-->             <li><a href="#">Moto</a>                 <ul class="submenu">                     <li><a href="moto
Publicar un comentario
Leer más

Así quedaría el formulario

Imagen
Publicar un comentario
Leer más