Tabelle CSS: Applicare Fogli Di Stile Alle Tabelle HTML

attenzione: Questa guida è stata scritta parecchi anni fa, ed ora è un po' obsoleta. Se ti va di approfondire come creare un sito internet, monetizzare con il web e in linea generale come costruire un sito ti consiglio di visitare costruireunsito.it.

Stufo delle solite tabelle grigie e spente? Potresti applicare uno stile alle tue tabelle trasformandole in tabelle CSS. In questa guida voglio spiegarti gli elementi che compongono le tabelle css così che tu possa creare degli stili personalizzati. Ho anche preparato per te 10 tabelle con uno stile già pronto: se hai fretta puoi cliccare sui link e scaricare direttamente il codice HTML e CSS di tutte le tabelle.

Di seguito tutti i dettagli.



Gli elementi che compongono una tabella nel codice HTML sono diversi. Per fare le cose semplici, ho pensato di suddividere questa guida spiegandoti i componenti interni ed esterni che compongono la grafica di una tabella HTML e CSS.

Elementi esterni di una tabella:

tabelle css: struttura

  • Il tag table e la sua chiusura /table
    rappresentano l'inizio e la fine della tabella. Tutti i tag html delle tabelle hanno un'apertura e una chiusura: ricordalo per evitare di incorrere in errori durante il disegno della tua tabella in HTML.
  • Il tag thead contiene l'header, ossia l'intestazione di una tabella, mentre subito sotto c'è il tbody che contiene il corpo della tabella.
    • Il tag tr rappresenta una riga, ed è presente sia dentro thead che dentro tbody.

Elementi interni che compongono la tabella: in altre parole, le celle ed il testo:

tabelle css elementi interni

  • Il tag th e la sua chiusura /th rappresentano l'inizio e la fine di una cella che si trova nell'header (intestazione) della tabella.
  • Il tag td e la sua chiusura /td rappresentano l'inizio e la fine di una cella che si trova nel body (corpo) della tabella.

Ora che hai imparato le basi, ricordati di questi tag, perché saranno indispensabili per poter creare i tuoi fogli di stile e modificare le tue tabelle CSS.

Ecco il codice HTML di una tipica tabella:

codice html tabella

Questa è la rappresentazione HTML della tabella che ti ho proposto negli esempi visti fino ad ora.


Sei ancora confuso? Prova a vedere se questa rappresentazione ad albero ti è più chiara:

css tabella albero


Ora devi creare un file CSS, detto anche foglio di stile. Questo file CSS sarà importato nelle pagine del tuo sito aggiugendo nel codice HTML della pagina questa istruzione prima del tag body:

<style type="text/css">
<!--
@import url("nome-del-tuo-file.css");
-->
</style>

Nel foglio di stile CSS potrai modificare i tag appartenenti alle tue tabelle per farle apparire come vuoi.

Se non sei pratico di CSS e non sai importare i file, non aver paura: per ogni tabella che trovi qui sotto ho incluso lo stile CSS già pronto insieme al codice HTML, così ti basterà copiare tutto così com'è per ottenere lo stesso effetto nelle tue pagine.

Ricorda che:

  • Per aggiungere righe alla tabella dovrai aggiungere un elemento tr e /tr;
  • Per aggiungere colonne devi aggiungere un elemento td e /td.


Tabelle CSS: esempi e tabelle già pronte

Ecco per te 10 tabelle già pronte con il codice CSS incluso. Ho cercato di pensare a più combinazioni possibili, così che tu possa utilizzarle e adattarle al meglio per le tue pagine web.

Ricorda che le tabelle CSS non vanno usate per creare il layout di un sito! Beh lo puoi fare, ma è come se utilizzassi un pallottoliere al posto di una calcolatrice, quindi se puoi evita di farlo ed utilizza le tabelle per quello che sono: tabelle contenenti dati da integrare al tuo sito per facilitare la lettura!

#1: La Minimalista

Questa tabella è semplice e diretta, non ha bordi salvo quello dell'instestazione ed è una buona soluzione per tabelle di piccole dimensioni

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#2: Righe sul corpo

Questa tabella suddivide più chiaramente le righe, preserva un aspetto pulito e fa uso di poco codice CSS da implementare.

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#3: Celle piene

Questa tabella ha un aspetto più solido: l'intestazione è più scura e le celle interne sono più chiare. Per dare un tocco più fine, le righe della tabella sono separate da sottili bordi bianchi.

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#4: Zebra Orizzontale

Come nel manto della famosa Zebra, anche queste tabelle CSS si distinguono per l'alternarsi dei colori. A mio parere sono molto leggibili e sono quelle che preferisco.

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#5: Righe verticali

Queste tabelle css fanno uso del testo centrato e visualizzano solo i bordi a destra e sinistra, lasciando più ampio respiro alla lettura.

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#6: Zebra Verticale

Come nella precedente tabella a Zebra, l'effetto gioca sull'alternanza dei colori. In questo caso però ho utilizzato delle classi CSS per associare alle singole celle l'effetto riempimento.

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#7: Zebra Verticale alternata

Una combinazione della zebra orizzontale e verticale: vengono disegnati i bordi, il testo è centrato e le righe vengono alternate.

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#8: Zebra Verticale alternata v2

In questa tabella si da valore alla prima colonna, utilizzando uno stile apposito solo per quelle celle.

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#9: Celle evidenziate

Questo è un esempio di tabella CSS che userei molto di rado: tutte le celle sono contornate da un bordo bianco, sono colorate e l'impatto visivo è decisamente forte. Come per le altre tabelle, gli elementi si evidenziano al passaggio del mouse.

NomeCognomeProfessioneSito
RyuichiSakumaWeb Designercostruireweb.it
YukiSakumaGraficocostruireweb.it
MarioRossiPincopallinopincopallino.it
MariaVerdiFumettistamariaverdi.it

Download Tabella + CSS



#10: immagine di sfondo

Utilizzando un'immagine di sfondo, applicata tramite CSS, puoi creare una tabella simpatica. Ma attento a non esagerare: cerca di puntare tutto sulla leggibilità della tabella più che sull'effetto visivo.

NomeCognomeSito
RyuichiSakumacostruireweb.it
YukiSakumacostruireweb.it
MarioRossipincopallino.it
MariaVerdimariaverdi.it

Download Tabella + CSS


Tabelle CSS: Risorse Online

Ci sono altri siti dove puoi trovare delle tabelle CSS già pronte, ecco l'elenco:


In Breve:

  • Integrando un il CSS alle tue tabelle puoi cambiarne l'aspetto
  • Puoi effettuare il download delle tabelle CSS: 10 template pronti.

Tags: ,

2 Commenti

alessandro
02.15.10

grazie a voi sono riuscito a realizzare pagine web per una rete intranet aziendale molto performante !!! …
grazie a voi ho imparato cose che non conoscevo !!! …
per fortuna ci sono persone come voi !!! … grazie

Franco
02.15.10

GRAZIE!!!
Finalmente, in un mare di geni confusionari qualcuno che ha le idee chiare e le mette a disposizione degli altri.
Siete di esempio.

Lasciami un tuo commento

* Nome, Email e Commento sono richiesti


Questo sito web utilizza i cookie e consente l'invio di cookie di terze parti. Premendo il tasto OK o compiendo una qualunque azione all’interno del sito web accetterai l'utilizzo dei cookie. Per saperne di più su come modificare o negare l'utilizzo dei cookie consulta la nostra: Privacy Policy

OK