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.
1. 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;
}
2. 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;
}
3. 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;}
4. 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 |
5. Allineamento e Padding
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
