Assegnare stili ad una tabella

Le tabelle, se opportunamente usate, sono uno strumento utilissimo per contenere e visualizzare dati.

Una tabella è composta da 3 tag/elementi fondamentali:

• table
• tr
• td

Oltre ad essi, ci sono alcuni tag opzionali che perè è consigliabile utilizzare, soprattutto per migliorare l'usabilità e l'accessibilità della tabella:

• thead
• tbody
• th
• caption

Nella lezione utilizzeremo una tabella di base che contiene tutti i tag appena visti. La struttura HTML della tabella è la seguente:

<table>
<caption>Table Caption</caption>
<thead>
<tr><th>Header</th><th>Header</th><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Content</td><td>1</td><td>a</td></tr>
<tr><td>Content</td><td>2</td><td>b</td></tr>
<tr><td>Content</td><td>3</td><td>c</td></tr>
<tr><td>Content</td><td>4</td><td>d</td></tr>
<tr><td>Content</td><td>5</td><td>e</td></tr>
<tr><td>Content</td><td>6</td><td>f</td></tr>
<tr><td>Content</td><td>7</td><td>g</td></tr>
<tr><td>Content</td><td>8</td><td>h</td></tr>
<tr><td>Content</td><td>9</td><td>i</td></tr>
<tr><td>Content</td><td>10</td><td>j</td></tr>
</tbody>
</table>

Vediamo ora come assegnare degli stili alla tabella e/o ai singoli elementi in essa contenuti.

Inserire un bordo o uno sfondo all'intera tabella

Le prime regole utilizzate in una tabella sono spesso quelle relative all'inserimento di un bordo o di uno sfondo all'intera tabella. Il codice necessario è il seguente:

table {    border: 1px solid #000;    background-color: #ccc;}

Esempio.

Assegnare uno stile alle righe o alle celle

Oltre all'intera tabella è possibile assegnare uno stile alle singole righe o singole celle in essa contenute. Vediamo il codice di cui abbiamo bisogno.

Per assegnare uno stile alle righe utilizzeremo come selettore il tr.

table {
    border: 1px solid #000;
	background-color: #ccc;
}
tr {
    background-color: #ddd;
}

Esempio.

Per personalizzare anche le celle, possiamo agire sul tag td:

td {
    background-color: #eee;
    border-color: 1px solid #fff;
}

Esempio.

Assegnare uno stile all'header della tabella

Abbiamo visto nell'introduzione che uno dei tag poco conosciuti ma molto utile è il tag th utilizzato per definire l'header della tabella. Per assegnare uno stile diverso all'intestazione possiamo utilizzare il seguente codice:

th {
    background-color: #ddd;
    border: 1px solid #fff;
    color: red;
}

Esempio.

Righe con background alternato

Per aumentare la leggibilità delle tabelle potremmo decidere di alternare il colore di sfondo delle righe. Per realizzare l'effetto possiamo assegnare una classe diversa (ad esempio "alternate") alle righe pari o dispari, lasciando inalterate le altre righe. Vediamo un esempio:

table {
    border: 1px solid #000;
    background-color: #ccc;
}
tr {
    background-color: #ddd;
}
tr.alternate {
    background-color: #eee;
}

Esempio.

Lo stesso effetto puè essere realizzato utilizzando le pseudo-classi strutturali introdotte dal CSS3 con cui andiamo a selezionare solo le righe pari o dispari della tabella senza utilizzare classi aggiuntive. Il codice necessario è il seguente:

tr:nth-child(even) {    background-color: #eee;}

Esempio.

Per compatibilità con i browser e approfondimenti riguardo le pseudo-classi strutturali vi rimando al link presente negli approfondimenti.

Approfondimenti

• Le pseudo-classi strutturali