Con lo stile delle tabelle HTML s’intende la pro­get­ta­zio­ne grafica delle tabelle web. Per definire lo stile si usano istru­zio­ni CSS, che puoi in­cor­po­ra­re a scelta di­ret­ta­men­te nel documento HTML oppure in­te­gran­do un col­le­ga­men­to a un file CSS esterno.

Come è possibile for­mat­ta­re le tabelle HTML?

Nella pro­get­ta­zio­ne web moderna per for­mat­ta­re le tabelle HTML hai a di­spo­si­zio­ne gli strumenti offerti da CSS. Il lin­guag­gio dei fogli di stile ti consente di mo­di­fi­ca­re l’aspetto degli elementi con­te­nu­ti­sti­ci delle tabelle pressoché a piacere. Ad esempio, puoi per­so­na­liz­za­re i colori dello sfondo delle celle o definire un de­ter­mi­na­to spessore della cornice. Per in­cor­po­ra­re il codice CSS adatto per for­mat­ta­re una tabella CSS sono a tua di­spo­si­zio­ne tre opzioni diverse:

  • In­te­gra­zio­ne nell’area <head>: è possibile in­cor­po­ra­re gli stili CSS de­si­de­ra­ti di­ret­ta­men­te nell’in­te­sta­zio­ne di un documento HTML con il tag HTML <style>.
  • File CSS esterno: un’altra pos­si­bi­li­tà consiste nell’uti­liz­za­re un file CSS separato, che per mezzo del tag <link> puoi in­cor­po­ra­re nell’area <head> del documento HTML.
  • CSS in linea: in linea di principio puoi creare lo stile delle tabelle HTML di­ret­ta­men­te nell’elemento della tabella anche con style. Tuttavia, è con­si­glia­bi­le farlo soltanto in de­ter­mi­na­ti casi in cui la riu­ti­liz­za­bi­li­tà e una facile ma­nu­ten­zio­ne del codice sono fattori ir­ri­le­van­ti.
Consiglio

Nel nostro articolo dedicato troverai tutti i dettagli su come collegare CSS nei documenti HTML.

Quali sono le opzioni di stile di­spo­ni­bi­li per le tabelle HTML?

Sono di­spo­ni­bi­li molte proprietà CSS che puoi usare per mi­glio­ra­re l’aspetto e la facilità d’uso delle tabelle nei documenti web. Ad esempio, puoi mo­di­fi­ca­re le proprietà di base delle tabelle con le istru­zio­ni CSS seguenti:

  • width: definisce la larghezza della tabella o di singole colonne
  • border: definisce la larghezza, lo stile e il colore del bordo
  • border-collapse: controlla se i bordi delle celle sono combinati (collapse) o separati (separate)
  • border-spacing: determina la distanza tra le celle quando si usa border-collapse: separate

Di seguito rie­pi­lo­ghia­mo alcune delle opzioni di stile delle tabelle HTML, suddivise per categoria.

In­ter­li­nea e al­li­nea­men­to del testo

Istru­zio­ne CSS De­scri­zio­ne
padding Aggiunge spazio all’interno delle celle
margin Aggiunge spazio intorno all’intera tabella
text-align Definisce l’al­li­nea­men­to oriz­zon­ta­le del testo all’interno delle celle (left, center, right)
vertical-align Determina l’orien­ta­men­to verticale del contenuto delle celle (top, middle, bottom

Colori e immagine di sfondo

Istru­zio­ne CSS De­scri­zio­ne
background-color Definisce il colore di sfondo di celle, righe o di tutta la tabella
color Definisce il colore del testo
background-image Determina un colore di sfondo per le celle o l’intera tabella

Tipi e di­men­sio­ni dei caratteri

Istru­zio­ne CSS De­scri­zio­ne
font-family Determina il tipo di carattere
font-size Definisce la di­men­sio­ne del carattere
font-weight Determina lo spessore del carattere (ad esempio bold per il testo in grassetto)
text-transform Definisce le maiuscole e le minuscole del testo (uppercase, lowercase, capitalize)

Bordo della tabella

Istru­zio­ne CSS De­scri­zio­ne
border-style Definisce lo stile del bordo (solid, dashed, dotted)
border-width Determina lo spessore del bordo
border-color Definisce il colore del bordo della tabell

Stile delle tabelle in HTML: come funziona (con esempi)

Di seguito spie­ghia­mo la sintassi e il fun­zio­na­men­to delle tre possibili varianti per pro­get­ta­re tabelle HTML ri­cor­ren­do a esempi pratici. Ti pre­sen­tia­mo anche bre­ve­men­te i vantaggi e gli svantaggi delle diverse opzioni.

For­mat­ta­re la tabella HTML nell’area <head>

Lo styling CSS delle tabelle nell’in­te­sta­zio­ne è par­ti­co­lar­men­te pratico per i piccoli progetti e le modifiche rapide. Non ti servono altri fogli di stile e, tramite gli ID, definisci a quali tabelle si devono applicare le istru­zio­ni. Però, le proprietà valgono solo per la pagina web in questione, motivo per cui la riu­ti­liz­za­bi­li­tà e la ma­nu­ten­zio­ne diventano faticose.

Il codice CSS de­si­de­ra­to viene integrato nell’area dell’in­te­sta­zio­ne mediante l’elemento <style>. Nell’esempio che segue definiamo che la riga di in­te­sta­zio­ne della tabella deve avere lo sfondo verde, mentre nelle altre righe i colori devono essere grigio chiaro e bianco, alternati:

<html>
<head>
    <style>
        table {
        thead th {
            background-color: #4CAF50; / *Verde per l’intestazione della tabella* /
        }
        tbody tr:nth-child(odd) {
            background-color: #f2f2f2; / *Sfondo grigio chiaro per le righe dispari* /
        }
        tbody tr:nth-child(even) {
            background-color: #ffffff; / *Sfondo bianco per le righe pari* /
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Colonna 1</th>
                <th>Colonna 2</th>
                <th>Colonna 3</th>
                <th>Colonna 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Voce 1</td>
                <td>Voce 2</td>
                <td>Voce 3</td>
                <td>Voce 4</td>
            </tr>
            <tr>
                <td>Voce 5</td>
                <td>Voce 6</td>
                <td>Voce 7</td>
                <td>Voce 8</td>
            </tr>
            <tr>
                <td>Voce 9</td>
                <td>Voce 10</td>
                <td>Voce 11</td>
                <td>Voce 12</td>
            </tr>
            <tr>
                <td>Voce 13</td>
                <td>Voce 14</td>
                <td>Voce 15</td>
                <td>Voce 16</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
html
Immagine: Esempio di formattazione di una tabella HTML
Questo esempio semplice di tabella for­mat­ta­ta mostra la riga di in­te­sta­zio­ne con il colore de­si­de­ra­to e le altre righe con i colori alternati.

Stile delle tabelle in HTML tramite foglio CSS

Pro­get­ta­re tabelle HTML con un foglio CSS esterno è il modo migliore per separare contenuti e layout. Inoltre, riu­ti­liz­za­re le istru­zio­ni per altre pagine è par­ti­co­lar­men­te facile. Dato che i browser possono salvare tem­po­ra­nea­men­te il file CSS, anche il tempo di carica è ot­ti­miz­za­to. Per i piccoli progetti web, però, a volte questa variante è troppo im­pe­gna­ti­va.

Ri­pren­dia­mo l’esempio pre­ce­den­te e rea­liz­zia­mo­lo in due passaggi: prima creiamo un file CSS chiamato styles.css, che salviamo nella stessa cartella in cui si trova il sito web, e ag­giun­gia­mo il codice seguente:

thead th {
      background-color: #4CAF50; / *Verde per l’intestazione della tabella* /
    }
    tbody tr:nth-child(odd) {
      background-color: #f2f2f2; / *Sfondo grigio chiaro per le righe dispari* /
    }
    tbody tr:nth-child(even) {
      background-color: #ffffff; / *Sfondo bianco per le righe pari* /
}
css

Nel secondo passaggio in­cor­po­ria­mo il file nell’in­te­sta­zio­ne tramite un elemento <link>. La parte suc­ces­si­va del codice della tabella non cambia:

<html>
<head>
        <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <table>
        <thead>
            <tr>
…
</html>
html

Pro­get­ta­re una tabella HTML con il codice in linea

Scrivere un CSS in linea è una variante pratica quando si desidera apportare solo modifiche spe­ci­fi­che a un singolo elemento della tabella. Questa opzione è quindi molto utile per i piccoli progetti o testi che non sono da riu­ti­liz­za­re. Per scenari di codice più so­ste­ni­bi­li, invece, si dovrebbe ricorrere sempre a uno degli altri due metodi di in­cor­po­ra­men­to.

Puoi rea­liz­za­re lo stile in linea di­ret­ta­men­te negli elementi in­te­res­sa­ti di una tabella HTML. Per il nostro esempio, il codice si pre­sen­te­rà come segue:

<body>
    <table>
        <thead>
            <tr>
                <th style="background-color: #4CAF50;">Colonna 1</th>
                <th style="background-color: #4CAF50;">Colonna 2</th>
                <th style="background-color: #4CAF50;">Colonna 3</th>
                <th style="background-color: #4CAF50;">Colonna 4</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color: #f2f2f2;">
                <td>Voce 1</td>
                <td>Voce 2</td>
                <td>Voce 3</td>
                <td>Voce 4</td>
            </tr>
            <tr>
                <td>Voce 5</td>
                <td>Voce 6</td>
                <td>Voce 7</td>
                <td>Voce 8</td>
            </tr>
            <tr style="background-color: #f2f2f2;">
                <td>Voce 9</td>
                <td>Voce 10</td>
                <td>Voce 11</td>
                <td>Voce 12</td>
            </tr>
            <tr>
                <td>Voce 13</td>
                <td>Voce 14</td>
                <td>Voce 15</td>
                <td>Voce 16</td>
            </tr>
        </tbody>
    </table>
</body>
html
Vai al menu prin­ci­pa­le