Guida ai fogli di stile CSS - Corso base - Capitolo 8: le tabelle, i bordi

Capitolo 8: Le tabelle. I bordi.

Tramite i CSS è possibile definire alcuni aspetti stilistici delle tabelle html (table).

Si tratta, comunque, di regole definibili anche via html, ed anzi è preferibile utilizzare il "metodo tradizionale" (tag e attributi html) piuttosto che le regole CSS in quanto non tutti i browser supportano in maniera uniforme le regole CSS per le tabelle.

Ecco le principali regole:

• table-layout: auto | fixed;

Definisce come gestire il layout di una tabella: con auto, tutto verrà gestito dal browser, "automaticamente" appunto, mentre con fixed potremo impostare alcune regole di visualizzazione (ad esempio la larghezza, con width, o l'altezza, con height) nel CSS.

Es.:     table {  table-layout: fixed;   width: 90%;   height: 400px; }

 

• border-collapse: collapse | separate;

Definisce come mostrare i bordi (se sono stati impostati i bordi per le celle) per le celle adiacenti: con collapse, le celle adiacenti condividono un unico bordo, mentre con separate ogni cella avrà il suo bordo, separato dalle altre da una quantità di spazio definita da border-spacing (vd. sotto).

Es.: border-collapse: separate;   .

 

 

• border-spacing: [valore numerico con unità di misura]

Se è stato impostato il border-collapse su separate, definisce lo spazio tra le celle di una tabella.

Es.: border-spacing: 10px;   border-spacing: 1cm;   .

 

• empty-cells: show | hide;

Per le celle che non presentano al loro interno ALCUN TIPO DI CONTENUTO, definisce se mostrare (show) o meno (hide) il bordo (sempre che sia stato impostato il bordo per le celle, ovviamente).

Es.: empty-cells: show;    .

 

• caption-side: top | right | bootm | left

Per le tabelle munite di etichetta (caption, definita in html con il tag <caption> annidato in <table>), definisce ove posizionare tale etichetta rispetto alla tabella.

Es.: caption-side: top;   .

Parliamo ora dei bordi: è possibile specificare l'aspetto di ciascun lato del bordo di un elemento separatamente, per avere la massima flessibilità, o "in un colpo solo" per tutti e quattro i lati, per risparmiare tempo (se non abbiamo necessità particolari).

In particolare, per ciascun lato di ciascun bordo è possibile impostare:

• lo spessore, con border<-lato>-width, che accetta come valori:
  • un valore numerico con unità di misura, ad esempio 5px o 3mm;
  • una delle costanti tra: thin, medium, thick (risp.: sottile, medio, largo);

   

• il colore, con border<-lato>-color, per il quale è possibile specificare dei colori nelle modalità esaminate nel capitolo dedicato a color(esadecimale, tre valori rgb, costanti predefinite);

   

• lo "stile" del tratto, con border<-lato>-style, e qui abbiamo molte possibilità:
  • dotted;
  • dashed;
  • solid;
  • double;
  • groove;
  • ridge;
  • inset
  • outset.

La scrittura "<-lato>" sta ad indicare che possiamo specificare o meno a quale lato del bordo ci riferiamo; se scriveremo, quindi:

border-color: yellow;

border-width: thin;

tutto il bordo (cioè tutti i suoi lati) avrà colore giallo e spessore thin, mentre scrivendo:

border-top-width: thick;

border-top-color: red;

border-top-style: solid;

 

border-bottom-width: medium;

border-bottom-color: yellow;

border-bottom-style: groove;

 

border-left-width: 2px;

border-left-color: orange;

border-left-style: dotted;

 

border-right-width: thick;

border-right-color: navy;

border-right-style: solid;

creeremo un bordo specificando, per ogni lato, stile, colore e spessore.