back to top

CSS: stilizzare liste e tabelle

In questa lezione della nostra Guida CSS vedremo come stilizzare liste e tabelle.

Stilizzare le liste

Attraverso i CSS è possibile agire sulla presentazione delle liste, cioè sull’aspetto di liste ordinate (<ol>) e non ordinate (<ul>). A tal fine i fogli di stile ci consentono di fare ricorso a quattro proprietà (tre specifiche + una con sintassi compatta).

  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

Anche queste proprietà, come quelle relative ai blocchi di testo, vengono ereditate.

Passiamole in rassegna una ad una.

list-style-image

Questa proprietà permette di utilizzare un’immagine al posto del marcatore tradizionale. L’immagine viene specificata mediante una URL relativa o assoluta, esattamente come abbiamo visto per la proprietà background-image. Vediamo un esempio:

ul { list-style-image: url('icona.png'); }

Nel nostro esempio abbiamo applicato la proprietà in esame al tag <ul> ma avremmo potuto applicarla direttamente al list-item in questo modo:

li.sfera { list-style-image: url('sfera.png'); }
li.cubo { list-style-image: url('cubo.png'); }

Oltre alla URL dell’immagine da utilizzare come marcatore, questa proprietà ammette il valore none che indica al browser di utilizzare il marcatore di default.

list-style-position

Questa proprietà permette di impostare la posizione del marcatore rispetto al testo. Ammette solo due valori: "outside" (valore di default) e "inside".

list-style-type

Questa proprietà definisce il tipo di marcatore da utilizzare per una data lista. I valori possibili sono tantissimi, elenchiamo di seguito i più comuni suddividendoli logicamente in due gruppi:

Liste non ordinate:

  • disc – (valore di default) corrisponde ad un pallino (il colore può essere impostato mediante la proprietà color);
  • circle – corrisponde ad cerchietto vuoto;
  • square – corrisponde ad un quadrattino;

Liste ordinate:

  • decimal – numerazione tradizionale (1,2,3,…);
  • lower-roman – numerazione romana in minuscolo (i,ii,iii,iv,…);
  • upper-roman – numerazione romana in maiuscolo (I,II,III,IV,…);
  • lower-alpha – numerazione alfabetica in minuscolo (a,b,c,…);
  • upper-alpha – numerazione alfabetica in maiuscolo (A,B,C,…);

La proprietà list-style

Anche questa famiglia prevede una proprietà con sintassi compatta, si tratta di list-style.

Per questione di logica questa proprietà può riassumere una di queste due coppie:

  • image + position
  • type + position

Non avrebbe alcun senso, infatti, definire sia un’immagine che un tipo per il marcatore in quanto la prima prevarrebbe sulla seconda.

Vediamo qualche esempio:

ol { list-style: lower-roman inside; }
ul { list-style: url('icona.png') outside; }

Stilizzare le tabelle

CSS 2.1 dispone anche di proprietà specifiche per la presentazione delle tabelle. Queste sono:

  • table-layout
  • border-collapse
  • border-spacing
  • empty-cells

table-layout

Questa proprietà definisce il metodo col quale il browser deve renderizzare la tabella. Questa proprietà ammette due soli valori:

  • auto – (default) il browser determina in automatico le regole di presentazione della tabella e delle sue celle in base al loro contenuto;
  • fixed – il brwoser si attiene in modo scrupoloso alle regole stabilite dal web-designer indipendentemenete dal contenuto della tabella.

Ad esempio:

table {
  width: 600px;
  table-layout: fixed;
}

La proprietà table-layout non è ereditata ma riguarda solo l’elemento cui viene applicata direttamente.

border-collapse e border-spacing

Questa proprietà definisce il modo con cui vengono trattati i bordi della tabella e delle sue celle. Ammette solo due valori:

  • collapse – le celle condividuono gli eventuali bordi adicaenti;
  • separate – ciascuna cella ha il suo bordo;

Se il valore di border-collapse è settato su "separate" è possibile gestire lo spazio tra i bordi delle celle adiacenti mediante la proprietà border-spacing in questo modo:

table {
  border-collapse: separate;
  border-spacing: 10px 20px;
}

I valori di border-spacing indicano la spaziatura in senso verticale (10px) ed orizzontale (20px).

Entrambe queste proprietà vengono ereditate da eventuali tabelle annidiate.

empty-cells

Questa proprietà consente di definire la presentazione delle celle vuote, cioè prive di contenuto. Ha due possibili valori:

  • show – mostra i bordi della cella vuota;
  • hide – i bordi non vengono mostrati (appare una sorta di "buco" nella griglia della tabella);
Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).