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);