Come dividere un elenco in 2, 3 o più colonne con HTML e CSS.

Guida anche con video per realizzare e personalizzare con i vari colori un elenco su 2, 3 o più colonne tramite CSS e HTML.

Riprendo un post che ho scritto quasi tre anni fa che affrontava il tema di come si possa suddividere un elenco in più colonne allineate. Questa soluzione è spesso presente nelle pubblicazioni cartacee e online. Vedremo come si possa realizzare attraverso un Editor HTML WYSIWYG come potrebbe essere Windows Live Writer oppure BlueGriffon che supportano l'introduzione delle tabelle. 

Se si ha un Mac o un Linux invece di un OS Windows si può comunque utilizzare il codice di una tabella per allineare le varie colonne dell'elenco. L'idea è quella di aprire WLW e di andare su Inserisci > Tabella quindi configurarla come numero di righe e di colonne. Il numero di righe sarà ovviamente 1 mentre quello delle colonne può essere 2, 3 o anche di più.

Si possono settare anche lo spazio interno e quello esterno alle celle oltre al mostrare il bordo della stessa tabella, possibilità che sconsiglio. Dopo aver impostato la larghezza si va su Inserisci

Si clicca con il mouse sulle singole celle e in ciascuna di queste si inserisce un elenco che può essere numerato o puntato. Si completano gli elenchi con tutti gli elementi inserendo anche dei link se vogliamo creare un elenco su più colonne anche con dei collegamenti

I vari link si ottengono selezionando il testo, cliccando sulla icona Collegamento ipertestuale per poi incollare l'URL del link. L'elenco su più colonne è già creato. Non ci resta che andare in basso su Origine per visualizzare il codice risultante e copiarlo in un post in Modalità HTML oppure su Layout > Aggiungi un gadget > Base > HTML/Javascript in Sezioni del sito. Il codice da copiare inizierà con il tag di apertura <table… e terminerà con il tag di chiusura </table>

In passato ho anche realizzato un video che mostra la creazione di un elenco su più colonne.

Possiamo anche procedere a una personalizzazione per creare una cosa di questo tipo 
 

 

 

PERSONALIZZARE ELENCO SU 2, 3 O PIÙ COLONNE

Per aggiungere dei colori personalizzati nello sfondo, nei link, nei link visitati e in quelli puntati dal mouse dobbiamo creare una classe di stile per il nostro elenco. Nel caso in cui le si dia il nome elenco dobbiamo inserire all'inizio e alla fine del codice copiato da WLW due righe in questo modo 

<div class="elenco">
<table ...
………… CODICE ELENCO …….
</table>
</div>

Successivamente dobbiamo creare delle regole da inserire tra i tag <style> e </style> da incollare subito sopra al codice dell'elenco modificato nel modo già descritto 

<style>
.elenco {
background:#111; /* Colore di sfondo */
}
.elenco td a {
color:#eee !important; /* Colore del link */
}
.elenco td a:visited {
color:#f00 !important; /* Colore del link visitato */
}
.elenco td a:hover {
color:#0f0 !important; /* Colore del link al passaggio del mouse */
}
</style>

dove i codici dei colori possono essere scelti a piacere. Concludo ricordando che oltre a elenchi numerati e puntati possono essere realizzati degli elenchi più sofisticati anche con icone come marcatori che possono essere usati per personalizzare ulteriormente i nostri elenchi su più colonne.