NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

Capitolo 8: tabelle, celle, layout e 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: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);
    • un valore numerico con unità di misura, ad esempio 5px o 3mm;
    • una delle costanti tra: thin, medium, thick (risp.: sottile, medio, largo);

     

  • 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.

 

Pagina di Francesco Milanese (redbaron85) su Facebook   Pagina di Francesco Milanese (redbaron85) su Google Plus   Profilo di Francesco Milanese (redbaron85) su LinkedIn   Pagina di Francesco Milanese (redbaron85) su Twitter   Canale Youtube di Francesco Milanese (redbaron85ct)

Vai all'inizio della pagina