Listas en HTML (VI)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Anidamiento de listas.-

Las listas son elementos que definen bloques en un documento HTML, entendiendose por bloque una entidad particular con características propias. Bloques son también los párrafos, los bloques DIV o SPAN, etc.

Al tener las listas características de bloque es posible anidar unas con otras sin ningún tipo de problema, al igual que ocurre con las tablas. Y esta anidación puede tener cuantos niveles queramos, con tan sólo respetar la sintaxis propia y tener cuidado de cerrar bien las etiquetas abiertas.

La forma de anidar sucesivamente varias listas es siempre la misma. Dentro de una etiqueta <LI> se introduce el bloque completo de la lista anidada, cuidando de cerrar correctamente tanto el bloque hijo (con su correspondiente etiqueta </OL> p.e.) como el elemento <LI> padre (con su correspondiente etiqueta </LI>).

Ejemplos:

<ol>   <li>primer elemento</li>   <li>segundo elemento</li>     <ul type="disc">       <li>primer sub-elemento</li>       <li>segundo sub-elemento</li>       <li>tercer sub-elemento</li>     </ul>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento primer sub-elemento segundo sub-elemento tercer sub-elemento tercer elemento

<li>primer elemento</li>     <ul type="square">       <li>sub-elemento 1-1</li>       <li>sub-elemento 1-2</li>       <li>sub-elemento 1-3</li>     </ul>   <li>segundo elemento</li>     <ul type="square">       <li>sub-elemento 2-1</li>       <li>sub-elemento 2-2</li>     </ul>      <li>tercer elemento</li> </ul>

primer elemento sub-elemento 1-1 sub-elemento 1-2 sub-elemento 1-3 segundo elemento sub-elemento 2-1 sub-elemento 2-2 tercer elemento

Tres anidamientos:

<ol>   <li>primer elemento</li>     <ol type="a">       <li>sub-elemento 1-1</li>       <li>sub-elemento 1-2</li>       <li>sub-elemento 1-3</li>     </ol>   <li>segundo elemento</li>     <ul type="a">       <li>sub-elemento 2-1</li>         <ol type="i">          <li>sub-elemento 2-1-1</li>          <li>sub-elemento 2-1-2</li>         </ol>       <li>sub-elemento 2-2</li>     </ul>     <li>tercer elemento</li> </ol>

primer elemento sub-elemento 1-1 sub-elemento 1-2 sub-elemento 1-3 segundo elemento sub-elemento 2-1 sub-elemento 2-1-1 sub-elemento 2-1-2 sub-elemento 2-2 tercer elemento

Anidando otros elementos.-

Tambiés es posible anidar otros elementos de HTML dentro de los componentes de una lista, como enlaces, párrafos, tablas, etc.

Como ejemplo vamos a ver cómo se anida una tabla dentro de un elemento de lista:

<ul>   <li>primer elemento</li>   <li>segundo elemento</li>     <table border="1">       <tr>         <td>celda 1-1</td>         <td>celda 1-2</td>      </tr>      <tr>         <td>celda 2-1</td>         <td>celda 2-2</td>      </tr>     </table>  </li>  <li>tercer elemento</li> </ul>

primer elemento segundo elemento celda 1-1 celda 1-2 celda 2-1 celda 2-2 tercer elemento