CSS: TABELLE

di
  1. Bordi tabella
  2. Sfondo delle celle
  3. Tabella a righe alternate
  4. Tabelle reattive al cursore
  5. Allineamento delle tabelle

CSS consente di personalizzare e rendere più accattivante l’ aspetto delle nostre tabelle html , attraverso bordi , colori , sfondi e molto altro.

Come nostro solito prepariamo una pagina html ed un foglio di stile distinti per vedere le varie possibilità che Css ci offre per la formattazione delle tabelle.


Cominciamo creando una tabella che conterrà tipologie di animali ed i relativi nomi.

PAGINA HTML 

<!doctype html>
 <html lang="it">
 <head>
 <link rel = "stylesheet" type = "text/css" href = "style.css"/>
 </head>
 <body>
 <table>
  <tr>
  <th>ANIMALI</th>
  <th>NOMI</th>
  </tr>
  <tr>
  <td>CANE</td>
  <td>LUNA</td>
  </tr>
  <tr>
  <td>GATTO</td>
  <td>JOLLY</td>
  </tr>
 </table>
 </body>
 </html>

Il risultato , senza applicare alcuno stile alla nostra tabella è il seguente.

BORDI TABELLA

Per applicare un bordo alla tabella , utilizziamo la proprietà border, che ci permmette di inserire diverse tipologie di bordo.

BORDO ESTERNO

STYLE.CSS

table {
 border: 2px solid pink;
}

BORDO OVUNQUE

STYLE.CSS

table ,td , th {
 border: 2px solid pink;
}

BORDO PARZIALE

escludendo table , td o th 

DIVERSI COLORI 

STYLE.CSS

table {
 border: 2px solid black;
}
th {
 border: 2px solid pink;
}

BORDER COLLAPSE 


(unifica i bordi delle celle con quelli della tabella)

STYLE.CSS

table,th,td {
 border: 1px solid black;
 border-collapse :collapse ;
}

BORDER ORIZZONTALE

STYLE.CSS

table {
 border-collapse: collapse;
}

th, td {
 border-bottom: 1px solid #ddd;
}

SFONDO DELLE CELLE

STYLE.CSS

table {
 border: 1px solid black;
 border-collapse :collapse ;
}
th {
 border: 1px solid black;
 border-collapse :collapse ;
 background-color : aSTquamarine;
}

STYLE.CSS

table {
 border: 1px solid black;
 border-collapse :collapse ;
 background-color : pink;
}
th {
 border: 1px solid black;
 border-collapse :collapse ;
 background-color : aquamarine;
}

RIGHE ALTERNATE

Per colorare le righe in maniera alternata grazie all’ elemento nth-child , applicato all elemento tr della tabella, nt-child può essere utilizzato per colorare le righe di 3 in 3 di 10 in dieci , tutte le pari (even) , tutte le dispari (odd) e tutto ciò che è matematicamente fattibile.


Anche se quì ci limiteremo ad utilizzarlo per colorare tutte le righe pari o dispari della nostra tabella.

STYLE.CSS

table,th,td {
 border: 1px solid black;
 border-collapse :collapse ;
}
tr:nth-child(even)
{background-color: aquamarine;}

TABELLE REATTIVE

Questa tipologia di tabelle  è in grado di rilevare il passaggio del mouse sulle proprie celle , questo è possibile grazie alla sua proprietà hover .

STYLE.CSS

table {
 border-collapse: collapse;
}

th, td {
 border-bottom: 1px solid #ddd;
 
}
tr:hover {
 background-color:pink;
 }

(se scorri su di me cambio colore)

ANIMALI NOMI
CANE LUNA
GATTO JOLLY

ALLINEAMENTO LATERALE

ALLINEAMENTO LATERALE

Per default  , gli elementi contenuti in th sono allineati al centro , mentre quelli contenuti in td  sono allineati a sinistra.


Nell’ esempio che segue impostiamo i contenuti della tabella allineati a destra.

STYLE.CSS

table,th,td {
 border: 1px solid black;
 border-collapse :collapse ;
 text-align: right;
}

PADDING

Come già visto nel tutorial riguardante il padding, esso altro non è che lo spazio che gli elementi contenuti all’ interno di un bordo possiedono sopra , sotto e lateralmente.

Se impostiamo solo il valore 15px , esso verrà impostato per tutti e 4 i valori ( per impostare valori diversi per lato la regola è sempre prima top,right,bottom,left)

STYLE.CSS

table,th,td {
 border: 1px solid black;
 border-collapse :collapse ;
 text-align: right;
}

th, td {
 padding: 15px;

ALLINEAMENTO VERTICALE

Per default l’allineamento verticale dei contenuti delle celle è impostato al centro è possibile cambiarlo attraverso la proprietà vertical-align che può assumere anche il valore bottom (allineamento in basso)


STYLE.CSS

table,th,td {
 border: 1px solid black;
 border-collapse :collapse ;
 text-align: right;
 
}

th, td {
 height: 50px;
 vertical-align: bottom

ᐊ Padding
Torna alla lista Articoli ᐅ

Lascia un commento