Con lo stile delle tabelle HTML s’intende la progettazione grafica delle tabelle web. Per definire lo stile si usano istruzioni CSS, che puoi incorporare a scelta direttamente nel documento HTML oppure integrando un collegamento a un file CSS esterno.

Come è possibile formattare le tabelle HTML?

Nella progettazione web moderna per formattare le tabelle HTML hai a disposizione gli strumenti offerti da CSS. Il linguaggio dei fogli di stile ti consente di modificare l’aspetto degli elementi contenutistici delle tabelle pressoché a piacere. Ad esempio, puoi personalizzare i colori dello sfondo delle celle o definire un determinato spessore della cornice. Per incorporare il codice CSS adatto per formattare una tabella CSS sono a tua disposizione tre opzioni diverse:

  • Integrazione nell’area <head>: è possibile incorporare gli stili CSS desiderati direttamente nell’intestazione di un documento HTML con il tag HTML <style>.
  • File CSS esterno: un’altra possibilità consiste nell’utilizzare un file CSS separato, che per mezzo del tag <link> puoi incorporare nell’area <head> del documento HTML.
  • CSS in linea: in linea di principio puoi creare lo stile delle tabelle HTML direttamente nell’elemento della tabella anche con style. Tuttavia, è consigliabile farlo soltanto in determinati casi in cui la riutilizzabilità e una facile manutenzione del codice sono fattori irrilevanti.
Consiglio

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

Quali sono le opzioni di stile disponibili per le tabelle HTML?

Sono disponibili molte proprietà CSS che puoi usare per migliorare l’aspetto e la facilità d’uso delle tabelle nei documenti web. Ad esempio, puoi modificare le proprietà di base delle tabelle con le istruzioni 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 riepiloghiamo alcune delle opzioni di stile delle tabelle HTML, suddivise per categoria.

Interlinea e allineamento del testo

Istruzione CSS Descrizione
padding Aggiunge spazio all’interno delle celle
margin Aggiunge spazio intorno all’intera tabella
text-align Definisce l’allineamento orizzontale del testo all’interno delle celle (left, center, right)
vertical-align Determina l’orientamento verticale del contenuto delle celle (top, middle, bottom

Colori e immagine di sfondo

Istruzione CSS Descrizione
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 dimensioni dei caratteri

Istruzione CSS Descrizione
font-family Determina il tipo di carattere
font-size Definisce la dimensione 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

Istruzione CSS Descrizione
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 spieghiamo la sintassi e il funzionamento delle tre possibili varianti per progettare tabelle HTML ricorrendo a esempi pratici. Ti presentiamo anche brevemente i vantaggi e gli svantaggi delle diverse opzioni.

Formattare la tabella HTML nell’area <head>

Lo styling CSS delle tabelle nell’intestazione è particolarmente 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 istruzioni. Però, le proprietà valgono solo per la pagina web in questione, motivo per cui la riutilizzabilità e la manutenzione diventano faticose.

Il codice CSS desiderato viene integrato nell’area dell’intestazione mediante l’elemento <style>. Nell’esempio che segue definiamo che la riga di intestazione 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 formattata mostra la riga di intestazione con il colore desiderato e le altre righe con i colori alternati.

Stile delle tabelle in HTML tramite foglio CSS

Progettare tabelle HTML con un foglio CSS esterno è il modo migliore per separare contenuti e layout. Inoltre, riutilizzare le istruzioni per altre pagine è particolarmente facile. Dato che i browser possono salvare temporaneamente il file CSS, anche il tempo di carica è ottimizzato. Per i piccoli progetti web, però, a volte questa variante è troppo impegnativa.

Riprendiamo l’esempio precedente e realizziamolo in due passaggi: prima creiamo un file CSS chiamato styles.css, che salviamo nella stessa cartella in cui si trova il sito web, e aggiungiamo 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 incorporiamo il file nell’intestazione tramite un elemento <link>. La parte successiva del codice della tabella non cambia:

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

Progettare una tabella HTML con il codice in linea

Scrivere un CSS in linea è una variante pratica quando si desidera apportare solo modifiche specifiche a un singolo elemento della tabella. Questa opzione è quindi molto utile per i piccoli progetti o testi che non sono da riutilizzare. Per scenari di codice più sostenibili, invece, si dovrebbe ricorrere sempre a uno degli altri due metodi di incorporamento.

Puoi realizzare lo stile in linea direttamente negli elementi interessati di una tabella HTML. Per il nostro esempio, il codice si presenterà 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
Hai trovato questo articolo utile?
Vai al menu principale