CSS e Tabelle

E' possibile inserire dei fogli di stile CSS all'interno del nostro codice HTML per poter specificare delle tabelle con già tutti i requisiti che vogliamo. (ATTENZIONE: modificando il CSS delle tabelle si modificano automaticamente tutte le tabelle presenti nella pagina).

Facciamo un piccolo preambolo sulle tabelle, che sono descritte meglio qua. I tre tag principali sono table, tr e td, senza questi la tabella non funziona. Oltre a questi ci sono thead, tbody, tfoot th e caption.


 Una tabella classica è questa:

<table border="1px" style=" width: 450px">
<caption>Table Caption</caption>
<thead>
<tr><th>Header</th><th>Header</th><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Content</td><td>1</td><td>a</td></tr>
<tr><td>Content</td><td>2</td><td>b</td></tr>
<tr><td>Content</td><td>3</td><td>c</td></tr>
</tbody>
</table>


Che diventa questa:


Table Caption
HeaderHeaderHeader
Content1a
Content2b
Content3c




Vediamo come inserire uno sfondo alle tabelle grazie ai CSS:

table {
    border: 1px solid #000;
    background-color: #99CBFF;
}

Che messo tra i tag <style>...</style>, ed applicato al codice HTML della pagine diventa:



Table Caption
HeaderHeaderHeader
Content1a
Content2b
Content3c



La stessa cosa può essere fatta impostando lo stile delle righe: 

tr {
         background-color: #FFFF66;
}



Table Caption
HeaderHeaderHeader
Content1a
Content2b
Content3c




Senza dilungarmi troppo, si possono applicare gli stessi stili CSS anche ai tag th e td. 



Creare righe  con lo sfondo alternato

E' possibile, per una più facile visualizzazione, inserire un tag che permette alle righe di avere un colore di sfondo alternato (tr.alternate). Per l'esattezza è questo un esempio di codice CSS da poter usare:


table {
   border: 1px solid #000;
   background-color: #ccc;
}

tr {
   background-color: #ddd;
}

tr.alternate {
   background-color: #eee;
}

Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...