Richiami sui fogli di stile - Le tabelle in generale - Stile della tabella - Stili delle celle - Esempio
FORMATEAR LAS TABLAS HTML CON CSS
por Lino Bertuzzi

Per studiare questo paragrafo dovreste sapere come funziona la pagina HTML, altrimenti dovreste studiare l'argomento (clicca).

Limitiamoci ai concetti fondamentali, tralasciando la gran quantità di regole particolari e complesse che ne governano il comportamento. L'uso di un software tipo DREAMWEAVER di ADOBE ci può aiutare per molte di queste regole.


RICHIAMO DI ALCUNE NOZIONI SUI FOGLI DI STILE

I fogli di stile della pagina HTML comprendono informazioni sia per la pagina in sé che per gli elementi che in essa sono contenuti. Possono essere collegati alla pagina web con l'istruzione che segue, dove stilenuovo.css è un ipotetico file del foglio di stile che risiede nella DIR css.

Per salvare lo stile in un file css a parte bisogna scrivere nella prima riga del file stesso

@charset "utf-8" e omettere <style type="text/css"> e </style>.

Eccovi in tal caso il codice da inserire tra <head> e </head>

<link href="css/stilenuovo.css" rel="stylesheet" type="text/css" />

Un foglio di stile puo essere scritto direttamente tra i TAG <head> e </head> con il codice che segue. A una pagina possono essere associati più fogli di stile, ma è bene mettere tutto in un unico file CSS o tra i TAG <style> .... </style>.

Un foglio di stile può essere associato a qualsiasi pagina html del sito, perché lo stile si applica ovviamente solo agli elementi che trova inseriti nel corpo della pagina, tra i TAG <body> ..... </body>. Bisogna che il file contenga però tutti gli eventuali diversi elementi associati a tutte le pagine.

Per esempio, se non abbiamo una tabella nella pagina, il foglio di stile può benissimo contenerne la formattazione.



ASSOCIAMO LO STILE A UNA TABELLA

Il precedente CSS ci dice che la pagina non ha margine. e che la pagina contiene una cornice che serve per centrare gli elementi in essa contenuti. Aggiungiamo una tabella

<style type="text/css">

body {
margin: 0px;
}

# cornice {
padding: 0px; text-align: center; margin: 0 auto;

}

table { 
table-layout: fixed; 
width: 700px; border: 4px solid black; border-collapse: separate;
border-spacing: 5px;
background: Silver;
caption-side : top;

}

tr {background-color:#99FF00;}

td { background-color: #0099FF; border-color: 1px solid #fff;}

th {
background-color: #ddd;
border: 1px solid #fff;
color: red;
}

 

</style>

CONTINUO appena posso ......