Alcune proprietà CSS3, come text-shadow e border-radius, e alcune caratteristiche CSS3, come i gradienti e i selettori avanzati, possono essere applicate alle tabelle per creare effetti visivi davvero interessanti. In questo articolo vedremo come applicare tutte queste caratteristiche ad una tabella HTML.
La nostra tabella mostra le offerte di un'ipotetico hosting provider. La sua struttura è la seguente:
<table id="offers">
<thead>
<tr>
<th></th>
<th scope="col" abbr="Starter">Starter</th>
<th scope="col" abbr="Medium">Medium</th>
<th scope="col" abbr="Business">Business</th>
<th scope="col" abbr="Deluxe">Deluxe</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Costo mensile</th>
<td>€ 2.90</td>
<td>€ 5.90</td>
<td>€ 9.90</td>
<td>€ 14.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Spazio</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Banda</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Illimitata</td>
</tr>
<tr>
<th scope="row">Database MySQL</th>
<td>Illimitato</td>
<td>Illimitato</td>
<td>Illimitato</td>
<td>Illimitato</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 €</td>
<td>12.90 €</td>
<td>gratis</td>
<td>gratis</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Python</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</tbody>
</table>
La tabella appare correttamente strutturata tramite gli elementi thead, tbody e tfoot. Cominciamo con gli stili generali della tabella:
#offers {
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;
margin: 2em auto;
}
Dato che vogliamo usare i bordi arrotondati sugli elementi della tabella, la proprietà border-collapse deve essere impostata su separate. Diamo ora degli stili alle intestazioni principali della tabella:
#offers thead th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border:1px solid #93CE37;
border-bottom:3px solid #9ED929;
background-color:#9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
background: -o-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#offers thead th:empty {
background:transparent url(service.png) no-repeat 50% 50%;
border:none;
}
I gradienti CSS3 devono venire sempre dopo una dichiarazione di ripiego di un colore di sfondo. In questo modo i browser che non supportano i gradienti useranno quel colore e ignoreranno il resto. Dato che il primo elemento th è vuoto, usiamo la pseudo-classe CSS3 empty per assegnargli degli stili.
La proprietà border-radius accetta anche dei valori sui singoli bordi. Infatti si tratta di una proprietà abbreviata che raggruppa in un'unica dichiarazione i valori di top-left, top-right, bottom-left e bottom-right usati appunto in quest'ordine.
Quindi passiamo agli stili da dare alle intestazioni su ciascuna riga all'interno del corpo della tabella:
#offers tbody th{
color:#fff;
text-shadow:1px 1px 1px #568F23;
background-color:#9DD929;
border:1px solid #93CE37;
border-right:3px solid #9ED929;
padding:0px 10px;
background:-webkit-gradient(
linear,
left bottom,
right top,
color-stop(0.02, rgb(158,217,41)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(123,192,67))
);
background: -moz-linear-gradient(
left bottom,
rgb(158,217,41) 2%,
rgb(139,198,66) 51%,
rgb(123,192,67) 87%
);
background: -o-linear-gradient(
left bottom,
rgb(158,217,41) 2%,
rgb(139,198,66) 51%,
rgb(123,192,67) 87%
);
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
La proprietà text-shadow accetta quattro valori:
- offset lungo l'asse x dell'ombra
- offset lungo l'asse y dell'ombra
- raggio dell'ombra
- colore dell'ombra
Per creare scritte in rilievo, un pò come accade con l'effetto Stroke di Photoshop, è sufficiente dare ai primi tre valori la stessa misura (in genere 1 o 2 pixel) e quindi assegnare un colore più scuro all'ombra che faccia da contrasto col colore del testo e dello sfondo.
Concludiamo la nostra tabella dando degli stili alle celle e alle intestazioni del footer della tabella:
#offers tfoot td{
color: #9CD009;
font-size:32px;
text-align:center;
padding:10px 0px;
text-shadow:1px 1px 1px #444;
}
#offers tfoot th{
color:#666;
}
#offers tbody td{
padding:10px;
text-align:center;
background-color:#DEF3CA;
border: 2px solid #E7EFE0;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#offers tbody span.check::before{
content : url(check.png)
}
Abbiamo usato il contenuto generato per inserire un icona all'interno degli elementi con classe check. Si noti come lo pseudo-elemento ::before sia scritto con i doppi due punti: questa è una delle novità sintattiche introdotte nei CSS3.
Potete visionare l'esempio finale in questa pagina.