CSS  »  Articoli  »  CSS Template e layout 

Un calendario con i CSS

Arriviamo così all'ultimo esempio di questa serie: un calendario. Cominciamo dal markup. Ho usato elementi che ad alcuni potranno risultare poco conosciuti, ma che senza dubbio offrono una base di partenza migliore rispetto all'uso di solo tr e td.

In particolare l'elemento caption definisce una breve descrizione o il titolo della tabella, la sezione thead definisce l'intestazione in cui vengono usate delle celle th e la sezione tbody delimita il corpo della tabella. Quest'ultimo elemento è tra l'altro obbligatorio ai fini della validazione del codice HTML. Ecco quindi un estratto di codice:

<table id="calendar" summary="Novembre 2005">
<caption>Novembre 2005</caption>
<thead>
<tr>
<th>L</th><th>M</th><th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>...</td>
</tr>
</tbody>
</table>

Ora procediamo con il CSS. Per prima cosa definiamo larghezza, font, allineamento e colore del testo per la tabella:

table#calendar{width:160px;font: 12px "Trebuchet MS",sans-serif;
    text-align:center;color:#444}

I bordi andranno specificati per la tabella, i td e i th. Per unificarli è inoltre indispensabile l'uso della proprietà border-collapse. Ecco la regola:

table#calendar,table#calendar th,table#calendar td{
    border: 1px solid #99A4C4;border-collapse: collapse}

Attribuiamo gli sfondi per le celle di testata e corpo della tabella:

table#calendar th{background: #FEFEFE url(thbk.png) repeat-x bottom}
table#calendar td{background: #DBDFEB url(tdbk.png) no-repeat}

E infine lo stile sui link, che presumibilmente punteranno all'archivio:

table#calendar a{text-decoration: none;color: #4A5576;
    font-weight: bold}
table#calendar a:hover{color: #FFF}

Abbiamo così completato il CSS per il calendario: rivediamolo.

Conclusioni

Abbiamo visto diversi esempi di come sia possibile aggiungere un tocco di personalità a elementi piuttosto ricorrenti in questa tipologia di sito. Codice e immagini degli esempi visti nei tre appuntamenti sono disponibili per il download. Alla prossima.

Altri articoli

Altre guide

Altre newsletter