Le tabelle HTML predefinite sembrano piuttosto deludenti: ravvivale con alcuni effetti CSS di bell'aspetto.

L'aggiunta di una tabella al tuo sito web è un modo utile per presentare in modo chiaro grandi quantità di informazioni. Le tabelle forniscono anche un uso efficiente dello spazio e consentono di leggere e confrontare più facilmente dati complessi.

Puoi progettare tabelle in modo che siano visivamente più accattivanti utilizzando i CSS. Ciò può anche migliorare l'esperienza utente complessiva per il tuo sito web.

Design moderno a righe singole e colonne

Puoi aggiungere un design di tabella semplice con singole righe e colonne e nessuna cella unita. Lo stile della tabella garantisce inoltre che la tua pagina web sia coinvolgente per l'utente. Oltre allo stile del tavolo, ce ne sono altri fantastici effetti HTML E Layout di siti Web di visualizzazione CSS puoi aggiungere al tuo sito web.

Puoi visualizzare il codice per questo esercizio nel suo Repository GitHub.

  1. In un nuovo file HTML, aggiungi la struttura di base del codice HTML:
    instagram viewer 
    html>
    <html>
    <Testa>
    <titolo>La mia tavola semplicetitolo>
    Testa>
    <corpo>

    corpo>
    html>
  2. All'interno del corpo, aggiungi i tag della tabella:
    <tavolo>

    tavolo>
  3. L'elemento tabella HTML deve contenere riga del tavolo tag per ogni riga all'interno della tabella. La riga superiore è comunemente usata per le intestazioni. Utilizzo intestazione della tabella Tag HTML per rappresentare ogni colonna nella tabella:
    <tr>
    <th>Intestazione 1th>
    <th>Intestazione 2th>
    <th>Intestazione 3th>
    tr>
  4. Aggiungi più righe sotto la riga di intestazione. Utilizzo dati della tabella Tag HTML per aggiungere dati in ogni cella della tabella:
    <tr>
    <td>Riga 1, Colonna 1td>
    <td>Riga 1, Colonna 2td>
    <td>Riga 1, Colonna 3td>
    tr>
    <tr>
    <td>Riga 2, Colonna 1td>
    <td>Riga 2, Colonna 2td>
    <td>Riga 2, Colonna 3td>
    tr>
    <tr>
    <td>Riga 3, Colonna 1td>
    <td>Riga 3, Colonna 2td>
    <td>Riga 3, Colonna 3td>
    tr>
    <tr>
    <td>Riga 4, Colonna 1td>
    <td>Riga 4, Colonna 2td>
    <td>Riga 4, Colonna 3td>
    tr>
    <tr>
    <td>Riga 5, Colonna 1td>
    <td>Riga 5, Colonna 2td>
    <td>Riga 5, Colonna 3td>
    tr>
  5. Aggiungi un tag di stile all'interno del tag head. Aggiungi uno stile generale alla tabella, come ombre, angoli arrotondati, font e margini:
    <stile>
    tavolo {
    crollo del bordo: crollo;
    larghezza: 100%;
    colore: #333;
    famiglia di font: Aria, sans-serif;
    dimensione del font: 14px;
    allineamento del testo: Sinistra;
    bordo-raggio: 10px;
    traboccare: nascosto;
    scatola-ombra: 0 0 20pxrgb(0, 0, 0, 0.1);
    margine: auto;
    margine superiore: 50px;
    margine inferiore: 50px;
     } 
    stile>
  6. Applica uno stile all'intestazione della tabella per assegnargli un colore di sfondo e un testo allineato:
    tavoloth {
    colore di sfondo: #ff9800;
    colore: #F F F;
    font-weight: grassetto;
    imbottitura: 10px;
    trasformazione del testo: maiuscolo;
    spaziatura del carattere: 1px;
    bordo superiore: 1pxsolido#F F F;
    bordo inferiore: 1pxsolido#ccc;
    }
  7. Applica uno stile alle righe della tabella per alternare i colori grigio e bianco e per aggiungere un effetto al passaggio del mouse sopra la riga:
    tavolotr:ennesimo figlio (pari)td {
    colore di sfondo: #f2f2f2;
    }
    tavolotr: al passaggio del mousetd {
    colore di sfondo: #ffedcc;
    }
  8. Stile i dati all'interno delle celle della tabella:
    tavolotd {
    colore di sfondo: #F F F;
    imbottitura: 10px;
    bordo inferiore: 1pxsolido#ccc;
    font-weight: grassetto;
    }
  9. Apri il tuo file HTML per visualizzare la tabella in un browser web:

Design del tavolo a celle multi-rivestito

Alcune tabelle includono colonne con righe unite per formare una cella a più righe.

  1. Rimuovi tutte le righe della tabella corrente, mantenendo solo quella superiore con le intestazioni:
    <tavolo>
    <tr>
    <th>Intestazione 1th>
    <th>Intestazione 2th>
    <th>Intestazione 3th>
    tr>
    tavolo>
  2. Crea una cella a più righe utilizzando l'attributo rowspan. Questo espanderà quella cella attraverso il numero specificato di righe.
     Sezione 1 
    <tr>
    <tdrowspan="2">Cella multilineatd>
    <td>Riga 1, Colonna 2td>
    <td>Riga 1, Colonna 3td>
    tr>
    <tr>
    <td>Riga 2, Colonna 2td>
    <td>Riga 2, Colonna 3td>
    tr>
  3. Quando aggiungi un'altra riga a più celle con un diverso valore di rowspan, aggiungi il numero corrispondente di righe della tabella Tag HTML. Questo per corrispondere all'altezza o al numero di righe su cui si estende la cella. Ad esempio, se una cella ha un'estensione di riga pari a 3, sarà necessario aggiungere tre righe alle altre colonne per allineare correttamente la tabella.
     Sezione 2 
    <tr>
    <tdrowspan="3">Cella multilineatd>
    <td>Riga 3, Colonna 2td>
    <td>Riga 3, Colonna 3td>
    tr>
    <tr>
    <td>Riga 4, Colonna 2td>
    <td>Riga 4, Colonna 3td>
    tr>
    <tr>
    <td>Riga 5, Colonna 2td>
    <td>Riga 5, Colonna 3td>
    tr>
  4. Apri il tuo file HTML per visualizzare la tabella in un browser web:

Progettazione di tabelle a righe unite

Analogamente alle celle a più righe, anche le tabelle possono avere righe che si uniscono su più colonne.

  1. Rimuovi tutte le righe della tabella corrente, mantenendo solo quella superiore con le intestazioni:
    <tavolo>
    <tr>
    <th>Intestazione 1th>
    <th>Intestazione 2th>
    <th>Intestazione 3th>
    tr>
    tavolo>
  2. Aggiungi più righe alla tabella. Utilizza l'attributo colspan per unire una delle righe su 3 colonne:
     Sezione 1 
    <tr>
    <tdstile="colore-sfondo: #ffedcc"colspan="3">Q1td>
    tr>
    <tr>
    <td>Riga 2, Colonna 1td>
    <td>Riga 2, Colonna 2td>
    <td>Riga 2, Colonna 3td>
    tr>
    <tr>
    <td>Riga 3, Colonna 1td>
    <td>Riga 3, Colonna 2td>
    <td>Riga 3, Colonna 3td>
    tr>
    <tr>
    <td>Riga 4, Colonna 1td>
    <td>Riga 4, Colonna 2td>
    <td>Riga 4, Colonna 3td>
    tr>
  3. Aggiungi un'altra riga unita per separare le sezioni della tabella:
     Sezione 2 
    <tr>
    <tdstile="colore-sfondo: #ffedcc"colspan="3">D2td>
    tr>
    <tr>
    <td>Riga 6, Colonna 1td>
    <td>Riga 6, Colonna 2td>
    <td>Riga 6, Colonna 3td>
    tr>
    <tr>
    <td>Riga 7, Colonna 1td>
    <td>Riga 7, Colonna 2td>
    <td>Riga 7, colonna 3td>
    tr>
    <tr>
    <td>Riga 8, Colonna 1td>
    <td>Riga 8, Colonna 2td>
    <td>Riga 8, colonna 3td>
    tr>
  4. Apri il tuo file HTML per visualizzare la tabella in un browser web:

Usa tabelle accattivanti per sfruttare al meglio i tuoi dati

Le tabelle HTML sono un ottimo modo per visualizzare dati strutturati sul tuo sito web. Puoi modellarli con i CSS per migliorare l'aspetto predefinito. Tuttavia, assicurati di non lasciarti trasportare e usa le tabelle per il layout: per motivi di accessibilità, conservale rigorosamente per i dati.

Le tabelle più grandi possono essere laboriose da creare e aggiornare, soprattutto se si utilizzano colonne e righe che si estendono. Puoi scrivere il tuo codice per generare il markup o sfruttare sintassi più amichevoli come Markdown.