Esempi di tabelle in css e html pronte all'uso con il codice completo.

Oggi vediamo esempi di  tabelle pronti creati con html e decorati coi css. Individuando la tabella che ti piace potrai sempre modificare colori o altri stili per addatarli allo stile del tuo sito. Vorrei ricordare che i browser visualizza una tabella e le sue cellule nella propria maniera  senza bordi visibili e lo sfondo e  le cellule all'interno di una tabella non sono strettamente attaccati una ad altra.

 Esempi di tabelle html e css pronte.

  1. Tabella con le linee separatrici
  2. Tabella a colori
  3. Tabella con angoli arrotondati
  4. Tabella  con celle separate
  5. Tabella-calendario
  6. Tabella-tenda
  7. Tabella zebra
  8. Tabella  MENU
  9. La tabella con l'accento sulla prima colonna
  10. Tabella  con effetto sfocato quando si passa su una riga
  11. Tabella listino di prezzi
  12. Tabella  con uno sfondo scuro e testo sottolineato al passaggio del mouse

 

1. Tabella con le linee separatrici

Tabelle con gli spazi tra le linee che aiutano a concentrarsi sulle informazioni pertinenti che si trovano nella stessa riga della tabella, ma in cellule vicine. Al fine di separare il testo dall'immagine, mettiamola  in una cella tutta sua, mentre uniamo due cellule nell'intestazione della tabella (<th colspan = "2"> Modello </ th>), e il bordo destro tra le cellule con immagine e testo eliminiamo.

d
Modello Prezzo Quantita Totale
Vestito con fiori 2500 1 2500
Vestito con inserzioni laterali 3000 1 3000

2. Tabella a colori

Utilizzando questa tecnica, è possibile stilizare  in modo efficace una tabella utilizzando colori contrastanti, che si inseriscono armoniosamente nel combinazione di colori del tuo sito.

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

3. Tabella con angoli arrotondati

Grazie alla posibilita di creare angoli arotondati nei  CSS3 tramite proprieta border-radius, abimo la possibilita di arotondare angoli della nostra tabella senza ricorere a immagini. Per ottenere questo effetto, è necessario arrotondare gli angoli delle rispettive celle.

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

4. Tabela con celle separate

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

5. Tabella-calendario

My working weeks, March 2015
Monday Tuesday Wednesday Thursday Friday
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30 31

6. Tabella-tenda

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie

7. Tabella a zebra

Zebra verticale nel design della tabella permetterà di concentrarsi sulle colonne e l'effetto hover al passagio sulla riga aggiungerà un tocco di belleza  alla tabella.

Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

8. Tabella-menu

Pizze
Nome Pesso, gr. Prezzo, euro.
Margerita550 5,5
Boscaiollo 650 8
Quatro formaggi 750 10
Ai fungi 720 8,5
Frutti di mare 850 11,5

9. La tabella con l'accento sulla prima colonna

Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug's Life

10. Tabella con effetto sfocante quando si passa su una riga.

Provate di passare con il puntatore sopra la tabella qui sotto per vedere l'effetto

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

11. Tabella listino di prezzi

Plans&Pricing
Plan Price
Basic 10$ Select
Professional 20$ Select
Premium 30$ Select
Platinum 60$ Select

12. Tabella con lo sfondo scuro e testo che viene sottolineato al passaggio del mouse.

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

 

Codice html e css di tutti gli esempi di tabelle del articolo potete scaricare qui sotto

 

Letto 3537 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso