Esempio di tabella con stile

30 maggio 2005, lunedì

ecco qui una tabella di dati (più piccola dell'originale, come qualcuno di voi mi ha chiesto) fatta da me con il foglio di stile o css; a fondo pagina trovate il codice per crearla

Mese	Giorno	Città	Manifestazione
Gennaio	21	Perugia	Tesseramento in Prefettura
Gennaio	28	Terni	Festa del Tesseramento in Prefettura
Febbraio	7	Bastia Umbra	Cena di Carnevale
Febbraio	15	Gubbio	Ballo dei Bambini
Marzo	18	Terni	I Torneo di Burraco
Marzo	18	Perugia	Cena di Primavera con "G. Lembo e gli Anema e Core"
Aprile		Bastia Umbra	Spettacolo Teatrale a Passaggio di Bettona
Aprile		Corciano	Mercatino dei Fiori
Maggio	9	Assisi	Serata Teatrale Auditorium Santa Maria degli Angeli
Maggio	9	Perugia	Concerto al Teatro Morlacchi "All Times Orchestra"
Giugno		Gualdo Tadino	Concerto per i 10 anni della Cri Locale
Giugno		Terni	Spettacolo Teatrale nella Casa Circondariale
Luglio		Valfabbrica	Teatro in Piazza a Casa Castalda
Settembre		Perugia	Caccia al Tesoro
Ottobre		Foligno	Cena annuale
Ottobre		Orvieto	Concerto
Novembre	1	Gubbio	Stand presso la "Mostra del Tartufo Bianco"
Novembre		Perugia	VIII Torneo di Burraco
Dicembre	16	Città di Castello	S.Lucia "La candela della luce e della speranza"
Dicembre		Assisi	Cena degli auguri

come si usa:

nella pagina Html o Xhtml

<table border="0" cellpadding="5" cellspacing="0" class="bellatavola" summary="Manifestazioni svolte dalla Sezione femminile della Croce Rossa in Umbria, organizzate per mese, giorno, città, manifestazione">
<tr>
<th class="testatavola">Mese</th>
<th class="testatavola">Giorno</th>
<th class="testatavola">Città</th>
<th class="testatavola">Manifestazione</th>
</tr>
<tr>
<td class="rigatavola">Gennaio</td>
<td class="rigatavola">21</td>
<td class="rigatavola">Perugia</td>
<td class="rigatavola">Tesseramento in Prefettura</td>
</tr>
</table>

nel css

.bellatavola {border-collapse: collapse;}
.testatavola
{margin: 5px; padding: 8px; border: 1px solid #336699; background-color: #336699; font-family: verdana,arial,serif; color:#ffffff; font-size: 9pt; font-weight: bold;}
.rigatavola
{margin: 5px; padding: 5px; border: 1px solid #336699; background-color: #ffffff; font-family: verdana,arial,serif; color: #000000; font-size: 10pt; font-weight: bold; text-align: justify;}

se lo mettete direttamente sulla vostra pagina lo si mette fra head e /head e lo dovrete incapsulare fra:
<style type="text/css">
e
</style>

in questa tabella di dati (le tabelle dovrebbero servire solo a questo) avrete notato due cose diverse dalle solite tabelle che generalmente si vedono in giro: l'attributo "summary" all'interno della tabella che serve ai programmi di utenti senza vista per dare loro la possibilità di capire, attraverso i browsers vocali di cui fanno uso, come i dati stessi sono suddivisi e dall'elemento th (acronimo di Table Header = intestazione tabella) al posto del classico td; grazie a questo th diciamo ai nostri lettori, anche non vedenti, che qui hanno a che fare con una intestazione o titolo.
Tutto questo lo si dovrebbe fare per rispetto della accessibilità che ancora pochi rispettano.