Come creare elenchi nidificati o in più colonne con l'HTML.

Come creare degli Elenchi nidificati su più livelli con altri stili e come suddividerli in più colonne.

Nella maggior parte degli Editor WYSIWYG per creare pagine web sono presenti due pulsanti per inserirli rispettivamente con i numeri e con i puntini. Questa è l'unica funzione automatica presente riguardo agli elenchi.

È così negli Editor di Post di Blogger e di Wordpress, in quello Open Live Writer così come in Editor CSS come BlueGriffon. Queste due funzioni sono molto basiche e non ci consentono per esempio di creare elenchi con lettere latine o greche o con icone come marcatori.

I tag HTML utilizzati possono essere facilmente visualizzati andando in Modalità HTML di un tale Editor dopo aver inserito un elenco puntato o uno numerato. Gli elenchi puntati iniziano con il tag <ol> e terminano con il tag di chiusura </ol> mentre quelli puntati iniziano con il tag <ul> e terminano con quello </ul>.

I singoli elementi dell'elenco vengono invece inseriti tra i tag <li> e </li>. In questo post vedremo come creare elenchi nidificati e come suddividerli in più colonne.

STILE DEGLI ELENCHI

Oltre agli elenchi numerati e puntati possono essere creati elenchi con altri stili con l'aggiunta di particolari attributi nei  tag <ol> o <ul> di apertura. Si modifica per esempio il tag <ol> in questo modo <ol style="list-style:lower-alpha;"> per avere un elenco con lettere latine mentre lo si modifica così <ol style="list-style:lower-greek;"> per mostrare un elenco con i vari elementi contrassegnati dalle lettere greche. Sono disponibili anche altre opzioni sostituendo l'attributo colorato di rosso con uno di questi altri:

1. disc: un cerchietto pieno
2. circle: un cerchietto vuoto
3. square: un quadratino
4. decimal: sistema decimale 1, 2, 3, ...
5. decimal-leading-zero: sistema decimale ma con due cifre: 01, 02, 03, ...
6. lower-roman: cifre romane in minuscolo. i, ii, iii, iv, ...
7. upper-roman: cifre romane in maiuscolo. I, II, III, IV, ...
8. lower-alpha: lettere minuscole. a, b, c, ...
9. upper-alpha: lettere maiuscole. A, B, C, ...
10. lower-greek: lettere greche.

Utilizzando questi diversi marcatori si possono creare anche elenchi nidificati.

COME CREARE ELENCHI NIDIFICATI

Un indice di un libro oltre alla suddivisione capitoli può vere anche quella in sezioni successive così come in un elenco di opzioni ci possono essere delle sotto opzioni. Ci sono cioè delle situazioni in cui occorre creare un elenco con elenchi successivi inseriti in una singola voce così come avviene nei Menù. Vedremo come creare questo elenco

partendo dall'elenco principale e aggiungendo via via quelli secondari. Si parte da questo HTML

<ol>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 <li>Elemento 3</li>
 <li>Elemento 4</li>
 <li>Elemento 5</li>  
</ol>

che mostra un elenco numerato di cinque voci. Inseriamo due sottoelenchi nell' Elemento 2 e nell'Elemento 4. Si incolla un secondo elenco prima del tag </li> di chiusura dell'elemento da nidificare. Per rendere le cose più chiare anche al lettore si può scegliere un altro stile per il sottoelenco usando questo codice

<ol style="list-style:lower-alpha;">
 <li>Elemento 2.1</li>
<li>Elemento 2.2</li>
 </ol>

che va incollato prima del tag di chiusura </li> dell'Elemento 2 e in modo analogo si procede per l'Elemento 4. Il codice risultante sarà il seguente

<ol>
 <li>Elemento 1</li>
 <li>Elemento 2
  <ol style="list-style:lower-alpha;">
 <li>Elemento 2.1 </li>
  <li>Elemento 2.2</li>
 </ol>
 </li>
 <li>Elemento 3</li>
 <li>Elemento 4
 <ol style="list-style:lower-alpha;">
   <li>Elemento 4.1</li>
 <li>Elemento 4.2 </li>
 </ol>  </li>
 <li>Elemento 5</li>
   </ol>

che avrà questa risultato se si passa dalla Modalità HTML a quella visuale

A questo secondo livello dell'elenco se ne può aggiungere un terzo. Altri sottoelenchi possono per esempio essere aggiunti nell'Elemento 2.1 e nell'Elemento 4.2. I nuovi elenchi dovranno essere aggiunti prima del tag di chiusura <li> dei rispettivi elementi. Stavolta possiamo usare le lettere greche in questo modo

<ol style="list-style:lower-greek">
<li>Elemento 2.1.1</li>
<li>Elemento 2.1.2</li>
<li>Elemento 2.1.3</li>
</ol>

per l'elenco dell'Elemento 2.1 e un codice analogo per quello dell' Elemento 4.2. Il codice risultante

<ol>
 <li>Elemento 1</li>
 <li>Elemento 2
 <ol style="list-style:lower-alpha;">
   <li>Elemento 2.1
 <ol style="list-style:lower-greek">
<li>Elemento 2.1.1</li>
 <li>Elemento 2.1.2</li>
<li>Elemento 2.1.3</li>
 </ol>
 </li>
  <li>Elemento 2.2</li>
 </ol>
</li>
 <li>Elemento 3</li>
 <li>Elemento 4
 <ol style="list-style:lower-alpha;">
 <li>Elemento 4.1</li>
 <li>Elemento 4.2
  <ol style="list-style:lower-greek">
 <li>Elemento 4.2.1</li>
 <li>Elemento 4.2.2</li>
 <li>Elemento 4.2.3</li>
 <li>Elemento 4.2.4</li>
</ol>
 </li>  
</ol>
</li>   <li>Elemento 5</li>
  </ol>

mostrerà come risultato lo screenshot inserito all'inizio. I codici degli elenchi nidificati sono stati evidenziati di giallo nella prima nidificazione e di verde nella seconda. Nulla vieta di inserire anche una terza nidificazione con la stessa sintassi per pe prime due. Usando lo stile upper-roman con questo codice

<ol style="list-style:upper-roman;">
<li>Elemento 2.1.3.1</li>
<li>Elemento 2.1.3.2</li>
 <li>Elemento 2.1.3.3</li>
 </ol>

si ottiene questo risultato



Non mi risulta che ci siano limiti nel numero delle nidificazioni.

COME CREARE ELENCHI IN 2, 3, 4 O PIÙ COLONNE

Vediamo adesso come creare elenchi in più colonne. Questo metodo è utile per risparmiare e ottimizzare spazio quando i singoli elementi dell'elenco sono corti e possono essere inseriti su più colonne.

Il sistema che consiglio è quello di usare il codice di una tabella di una sola riga e di più colonne in cui inserire il codice dell'elenco da suddividere. Per esempio per 4 colonne si usa questo codice

<table>
 <tbody>
 <tr>
 <td>E1</td>
 <td>E2</td>
 <td>E3</td>
 <td>E4</td>
 </tr>
 </tbody>
 </table>

Se si vuole mettere l'elenco su tre colonne basterà cancellare la riga <td>E4</td> mentre per un elenco su due colonne si dovrà cancellare anche la riga precedente con E3. Viceversa per un elenco in 5 colonne dovremo aggiungere la riga <td>E5</td> prima di </tr>.

Al posto di E1 per esempio possiamo inserire un elenco con 4 elementi con questo codice

<ol>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
<li>Elemento 3</li>
 <li>Elemento 4</li>
</ol>

Al posto di E2 potremo inserire un elenco con altri 4 elementi che però dovranno iniziare dal numero 5. Per ottenere questo risultato useremo questo codice con l'aggiunta di start="5"

<ol start="5">
 <li>Elemento 5</li>
 <li>Elemento 6</li>
<li>Elemento 7</li>
 <li>Elemento 8</li>
 </ol>

Faremo lo stesso per gli altri elementi fino ad avere un codice HTML complessivo come il seguente

<table>
   <tbody>
    <tr>
   <td>
<ol>
   <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
   <li>Elemento 4</li>
   </ol>
</td>
 <td><ol start="5">
  <li>Elemento 5</li>
 <li>Elemento 6</li>
  <li>Elemento 7</li>
  <li>Elemento 8</li>
 </ol>
</td>
<td>
<ol start="9">
  <li>Elemento 9</li>
   <li>Elemento 10</li>
  <li>Elemento 11</li>
  <li>Elemento 12</li>
 </ol>
</td>
   <td>
<ol start="13">
   <li>Elemento 13</li>
 <li>Elemento 14</li>
  <li>Elemento 15</li>
  <li>Elemento 16</li>
   </ol>
</td>
   </tr>
   </tbody>
    </table>

che produce questo risultato finale

con un elenco di 16 elementi suddivisi in quattro colonne. Anche gli elenchi suddivisi in più colonne possono essere mostrati con stili diversi da quello numerato. Si ottiene per esempio questo risultato

sostituendo il tag <ol> con <ol style="list-style:lower-alpha;">, quello <ol start="5"> con <ol style="list-style:lower-alpha;" start="5">, quello <ol start="9"> con <ol style="list-style:lower-alpha;" start="9"> e quello <ol start="13"> con <ol style="list-style:lower-alpha;" start="13">.