Modificare le tabelle (bordi e contenuto) con gli attributi css.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 04 Feb 2012
rss directory aggiungi in preferiti  
Home    Mappa directory    Giochi    XXXDirectory    Script    Forum




Css e tabelle:

In HTML le tabelle sono fondamentali per la costruzione di una pagina, in esse si racchiude il testo, le immagini e tutto il resto, ma cosa principale le tabelle sono la vera struttura grafica. Tramite di esse possiamo mettere il contenuto della pagina dove vogliamo e come vogliamo rispetto l'intero foglio.
In XHTML le tabelle sono utilizzate per mostrare i dati all'utente, l'impaginazione del sito è affidata ai blocchi, o box model.
Le tabelle assumono, a prescindere dal loro utilizzo, un ruolo molto importante per il webmaster, e come tali devono essere utilizzate con appropriati style. In questa sezione mostriamo i css fondamentali per gestire una tabella.


I CSS danno un contributo notevole alla creazione delle tabelle e alla loro struttura grafica. Tramite i css, alternando i colori dei bordi, possiamo creare sfumature che danno l'impressione di pulsanti premuti, di contenuti in evidenza ecc.

Vediamo gli attributi CSS più utilizzati e compatibili fra i vari browser.



Altezza:

height:  ;
Può assumere valore numerico (height:10px;) o percentuale (height:10%;)
overflow:  ;
Regola il contenuto se eccedente (se l'altezza è troppo bassa per contenerlo tutto).
Valori:
  • visible Il contenuto eccedente rimane visibile con eventuali problemi grafici.
  • hidden Il contenuto eccedente è nascosto.
  • scroll Il contenuto eccedente rimane visibile tramite barre di scorrimento.
  • auto Sarà il browser a decidere come e se mostrare il contenuto eccedente.
min-height:  ;
Valore minimo di altezza, può assumere valore numerico (min-height:10px;) o percentuale (min-height:10%;)
max-height:  ;
Valore massimo di altezza, può assumere valore numerico (max-height:10px;) o percentuale (max-height:10%;)
Sia min-height che max-height NON sono supportati da browser IE versione 5.5 o precedenti.


Larghezza:

width:  ;
può assumere valore numerico (width:10px;) o percentuale (width:10%;)
min-width:  ;
Valore minimo di larghezza, può assumere valore numerico (min-width:10px;) o percentuale (min-width:10%;)
max-width:  ;
Valore massimo di larghezza, può assumere valore numerico (max-width:10px;) o percentuale (max-width:10%;)
Sia min-width che max-width NON sono supportati da browser IE versione 5.5 o precedenti.


Margini:

Utilizzabile anche su <p> , <body> ed altri oggetti
margin:  ;
Il margine è lo spazio che intercorre fra la tabella e il resto del materiale che la circonda.
margin può contenere fino a 4 valori:
  • Lo spazio dall'alto (unità di misura, % oppure AUTO).
  • Lo spazio da destra (unità di misura, % oppure AUTO).
  • Lo spazio dal basso (unità di misura, % oppure AUTO).
  • Lo spazio da sinistra (unità di misura, % oppure AUTO).
NON è obbligatorio inserire tutti i valori. Se ne inseriamo soltanto uno indichiamo al browser che hanno tutti lo stesso valore (quello indicato).

esempio:
margin: 10px 10px 10px 10px;
margin: 10px;
Per selezionare un margine singolo si possono utilizzare uno o più (in contemporanea) dei seguenti attributi:
  • margin-top:  ; Lo spazio da sopra. Valori: unità di misura, % oppure AUTO.
  • margin-right:  ; Lo spazio da destra. Valori:unità di misura, % oppure AUTO.
  • margin-bottom:  ; Lo spazio dal basso. Valori: unità di misura, % oppure AUTO.
  • margin-left:  ; Lo spazio da sinistra. Valori:unità di misura, % oppure AUTO.
Esempio:
123
In questo caso abbiamo impostato style="margin-left:100px;" alla tabella (rispetto all'oggetto che la contiene).



Spazio interno

Utilizzabile anche su <p> , <body> ed altri oggetti
padding:  ;
Per paddind o spazio interno intendiamo lo spazio che intercorre fra il contenuto della tabella (testo,immagini od altro) ed i bordi.
padding può contenere fino a 4 valori:
  • Lo spazio dall'alto (unità di misura, % oppure AUTO).
  • Lo spazio da destra (unità di misura, % oppure AUTO).
  • Lo spazio dal basso (unità di misura, % oppure AUTO).
  • Lo spazio da sinistra (unità di misura, % oppure AUTO).
NON è obbligatorio inserire tutti i valori. Se ne inseriamo soltanto uno indichiamo al browser che hanno tutti lo stesso valore (quello indicato).

esempio:
padding: 10px 10px 10px 10px;
padding: 10px;
Per selezionare uno spazio singolo si possono utilizzare uno o più (in contemporanea) dei seguenti attributi:
  • padding-top:  ; Lo spazio da sopra. Valori: unità di misura, % oppure AUTO.
  • padding-right:  ; Lo spazio da destra. Valori:unità di misura, % oppure AUTO.
  • padding-bottom:  ; Lo spazio dal basso. Valori: unità di misura, % oppure AUTO.
  • padding-left:  ; Lo spazio da sinistra. Valori:unità di misura, % oppure AUTO.
Esempio:
123
456
789
In questo caso abbiamo impostato style="padding:30px;" alla casella contenente il valore 4 (4 è equidistante 30px dai 4 bordi).



Bordi:

border:  ;
border possiede 3 valori:
  • Lo spessore (esperesso in unità di misura)
  • Il tipo (none - hidden - dotted - dashed - solid - double - groove - ridge - inset - outset)
  • Il colore (in formato esadecimale compreso # oppure in valore letterale)
Esempio:
border: 10px solid black;

Per selezionare un bordo singolo è possibile utilizzare uno o più (in contemporanea) dei seguenti attributi (con gli stessi valori di border):
  • border-top:  ; Bordo superiore.
  • border-bottom:  ; Bordo inferiore.
  • border-right:  ; Bordo destro.
  • border-left:  ; Bordo sinistro.

Stili di border con esempi:

none Nessun bordo
hidden Nascosto (nessun bordo)
dotted
style="border: 5px dotted black;"

dashed
style="border: 3px dashed black;"

solid
style="border: 3px solid black;"

double
style="border: 3px double black;"

groove
style="border: 5px groove red;"

ridge
style="border: 5px ridge red;"

inset
style="border: 5px inset red;"

outset
style="border: 5px outset red;"

N.B. Per gli stili groove, ridge, inset e outset se impostate il colore black (nero) non vedrete alcun risultato a video.