Creare elenchi personalizzati su più colonne

Come creare elenchi compatti su più colonne con HTML di una tabella e come personalizzarne l'aspetto con il CSS

Chi scrive nel web si trova spesso nella esigenza di dover inserire degli elenchi nella pagina che sta editando. Gli elenchi possono essere aggiunti direttamente tramite pulsanti degli editor, perché sono universalmente supportati.

Solitamente l'utente ha a disposizione due bottoni, uno per gli elenchi puntati e uno per quelli numerati. I primi aggiungeranno i vari elementi preceduti da un puntino mentre i secondi ne mostreranno il numero di ordine.

Gli elenchi puntati inizieranno con il tag <ul> mentre quelli numerati con il tag <ol>. Per aggiungere i vari elementi si va su Invio nella tastiera. Al posto dei numeri, si possono mostrare le lettere latine, quelle greche e si possono creare elenchi nidificati con una o più voci dell'elenco, che a loro volta contengono un altro elenco.

Come per esempio nell'elenco dei capitoli dell'indice di un ebook a loro volta suddivisi nell'elenco delle sezioni degli stessi capitoli. Gli elenchi così creati possono anche essere personalizzati nell'aspetto impostandone il colore dello sfondo, il colore del testo, la famiglia di font, la dimensione dei caratteri, ecc.

Negli editor HTML non esiste la possibilità di creare elenchi su più colonne che invece è utile per risparmiare spazio. Poniamo che gli elementi di un elenco siano molto brevi e formati da una sola parola di poche lettere. In compenso siano invece parecchi gli elementi da mettere in elenco. Con gli editor classici si finisce per mostrare un elenco molto lungo con notevole spreco di spazio. Sarebbe molto più pratico inserire gli elenchi in colonne.

L'obiettivo di questo post sarà quello di mostrare come creare elenchi con quest'aspetto,

dove un elenco di 30 elementi è stato suddiviso in 5 colonne di 6 elementi ciascuna. Ovviamente si tratta solo di un esempio e si possono creare elenchi con un numero qualsiasi di elementi e scegliere il numero di colonne più adatto per dividerli, in relazione alla lunghezza degli elementi e alla larghezza del layout della pagina.

Ho pubblicato sul mio Canale Youtube il tutorial su come procedere per questa personalizzazione.

Si apre un qualsiasi Editor HTML. Se si ha un PC Windows 10, si può andare sul Microsoft Store e digitare Open Live Writer nel campo della ricerca. Si clicca sul risultato quindi si installa l'applicazione, si attende il suo download per poi andare su Avvia. Si collega un nostro blog, scegliendone la piattaforma, per poi digitarne le credenziali. Dopo che si aperta l'interfaccia di OLW si va sul pulsante dell'elenco numerato.

Si visualizzerà il numero 1 quindi si digita il primo elemento dell'elenco e si va su Invio, per poi digitare il secondo e così via fino a che non si completa la prima colonna dell'elenco. Si va poi in basso e si clicca su Source per visualizzare il codice HTML dell'elenco. Il codice inizierà con <ol> e terminerà con </ol> mentre ciascun elemento sarà compreso tra i tag <li> e </li >. Se siamo abbastanza pratici, possiamo quindi creare manualmente il codice dell'elenco senza bisogno di usare un Editor HTML. Tale codice va adesso inserito in un codice di una tabella.

Si può usare il servizio online HTML Table Generator. Si clicca sul quadratino per creare una tabella di 1 riga per 5 colonne se p.e. si vuole creare un elenco di 30 elementi divisi in 5 colonne di 6 elementi ciascuno.

In basso verranno mostrate due aree. Sulla sinistra si visualizzerà l'anteprima della tabella e sulla destra il suo codice. Ciascuna cella della tabella è delimitata dai tag <td> e </td> mentre l'unica riga inizia con <tr> e termina con </tr>. Tra i due tag <td> e </td> c'è il codice dello spazio &nbsp; che deve essere sostituito con il codice della prima colonna dell'elenco. Se ne vedrà l'anteprima sulla destra. Si crea quindi la 2° colonna.

Si torna su Open Live Writer,  si cancella il precedente codice e si clicca di nuovo sul bottone dell'elenco numerato, per poi creare la seconda colonna dell'elenco che però inizierà sempre con il numero 1.

Per modificare il numero iniziale della colonna si va su Source e, dopo <ol si incolla start="7" per fare iniziare la seconda colonna appunto con quel numero. Si copia in codice e si incolla al posto dello spazio tra i secondi <td> e </td> , nel codice della tabella. Si crea quindi la terza colonna e si fa iniziare con il numero 13 quindi se ne incolla il codice al posto del terzo spazio nel codice della tabella. Si ripete poi il procedimento per la 4° e la 5° colonna.

Sulla sinistra del generatore di tabelle si vedrà l'anteprima dell'elenco in colonne mentre sulla destra se ne potrà copiare il codice dopo averlo selezionato. L'ultima riga è un commento HTML e può essere tralasciata.

Tale codice può  poi essere incollato in una pagina web. Se ne può personalizzare l'aspetto con il CSS aggiungendo il tag style=" " dopo <table per poi inserire opportuni attributi tra le virgolette. Per esempio con questo codice

<table style="font-size:18px; font-weight:bold; font-style:italic; font-family:Georgia; background-color:#ffd159; color:#00f;">
<tbody>
<tr>
<td><ol><li>A1</li><li>A2</li><li>A3</li><li>A4</li><li>A5</li><li>A6</li></ol></td>
<td><ol start="7"><li>B7</li><li>B8</li><li>B9</li><li>B10</li><li>B11</li><li>B12</li></ol></td>
<td><ol start="13"><li>C13</li><li>C14</li><li>C15</li><li>C16</li><li>C17</li><li>C18</li></ol></td>
<td><ol start="19"><li>D19</li><li>D20</li><li>D21</li><li>D22</li><li>D23</li><li>D24</li></ol></td>
   <td><ol start="25"><li>E25</li><li>E26</li><li>E27</li><li>E28</li><li>E29</li><li>E30</li></ol></td>
</tr>
</tbody>
</table>

si ottiene questo risultato

Gli elenchi delle varie colonne sono stati fatti iniziare con i numeri 1, 7, 13, 19 e 25. Sono stati inseriti colore di sfondo, colore del testo, grassetto, corsivo, dimensione caratteri, tipo di famiglia di font. Inutile sottolineare che la scelta di 5 colonne con 6 elementi ciascuna è arbitraria e possono essere usate altre combinazioni.