viernes, 15 de mayo de 2009

71.- HTML - Listas anidadas

Una manera común y de utilidad de conseguir esquemas de forma sencilla, es colocar una lista dentro de otra lista.

Dentro de una lista podemos utilizar cualquier otra forma de lista, es decir, no tenemos porque mantener el mismo tipo de lista. Podemos incluir listas de definición, numeradas. etc.

Código de Ejemplo:

listaanidada

 

Representación en el navegador:

    Ejemplo de listas anidadas
    Titulo de la lista principal
    1. Primer elemento de la primer lista
    2. Segundo elemento de la primer lista
    Titulo de la 2da. lista
    1. Primer elemento de la 2da. lista
    2. Segundo elemento de la 2da. lista
    3. 3er. elemento de la 2da. lista
    4. 4to. elemento de la 2da. lista

Si en las listas no ordenadas, no especificamos el tipo de viñeta mediante el atributo type, el navegador cambiará automáticamente en cada anidamiento de la viñeta el nivel de profundidad.

Código de Ejemplo:
<html>
  <head>
    <title>Listas Anidadas No Ordenadas</title>
  </head>
  <body>
   <basefont face="verdana" size="2" />
    <b>Listas No Ordenadas Anidadas</b><br>
    Paises y Ciudades:
    <ul>
      <li>España</li>
      <ul>
         <li>Almeria</li>
         <li>Madrid</li>
      </ul>
         <li>Argentina</li>
      <ul>
         <li>Buenos Aires</li>
         <li>Cordoba</li>
      </ul>
         <li>Reino Unido</li>
      <ul>
         <li>Londres</li>
         <li>Manchester</li>
      </ul>
    </ul>
  </body>
</html>

Representación en el navegador:

Listas No Ordenadas Anidadas
Paises y Ciudades:

  • España
    • Almeria
    • Madrid
  • Argentina
    • Buenos Aires
    • Cordoba
  • Reino Unido
    • Londres
    • Manchester

Podéis encontrar más información sobre este tema en: Webestilo

Temas anteriores * 
http://bobuu.blogspot.com
70.- HTML - listas y párrafos
69.- HTML - Listas descriptivas <dl><dt>...</dt><dd>...</dd></dl>
68.- HTML - Listas no ordenadas - <ul><li>...</li></ul>
mas ... acceder al índice de temas ...

** Agradecemos visitéis nuestros Sponsors.
soolucionesaviso

No hay comentarios:

Publicar un comentario

Gracias por tu comentario, en un maximo de 48 horas sera publicado.