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 della tabella, ci sono altri fantastici effetti HTML e layout di siti Web di visualizzazione CSS che puoi aggiungere al tuo sito web.
Puoi visualizzare il codice per questo esercizio nel suo Repository GitHub.
- In un nuovo file HTML, aggiungi la struttura di base del codice HTML:
<!DOCTYPE html> <html> <head> <title>My Simple Table</title> </head> <body> </body> </html>
- All’interno del corpo, aggiungi i tag della tabella:
<table> </table>
- 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>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr>
- Aggiungi più righe sotto la riga di intestazione. Utilizzo dati della tabella Tag HTML per aggiungere dati in ogni cella della tabella:
<tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> <tr> <td>Row 4, Column 1</td> <td>Row 4, Column 2</td> <td>Row 4, Column 3</td> </tr> <tr> <td>Row 5, Column 1</td> <td>Row 5, Column 2</td> <td>Row 5, Column 3</td> </tr>
- Aggiungi un tag di stile all’interno del tag head. Aggiungi uno stile generale alla tabella, come ombre, angoli arrotondati, font e margini:
<style> table { border-collapse: collapse; width: 100%; color: #333; font-family: Arial, sans-serif; font-size: 14px; text-align: left; border-radius: 10px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); margin: auto; margin-top: 50px; margin-bottom: 50px; } </style> - Applica uno stile all’intestazione della tabella per assegnargli un colore di sfondo e un testo allineato:
table th { background-color: #ff9800; color: #fff; font-weight: bold; padding: 10px; text-transform: uppercase; letter-spacing: 1px; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; } - 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:
table tr:nth-child(even) td { background-color: #f2f2f2; }table tr:hover td {
background-color: #ffedcc;
} - Stile i dati all’interno delle celle della tabella:
table td { background-color: #fff; padding: 10px; border-bottom: 1px solid #ccc; font-weight: bold; } - 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.
- Rimuovi tutte le righe della tabella corrente, mantenendo solo quella superiore con le intestazioni:
<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </table>
- Crea una cella a più righe utilizzando l’attributo rowspan. Questo espanderà quella cella attraverso il numero specificato di righe.
<tr> <td rowspan="2">Multi-line cell</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr>
- 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.
<tr> <td rowspan="3">Multi-line cell</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> <tr> <td>Row 4, Column 2</td> <td>Row 4, Column 3</td> </tr> <tr> <td>Row 5, Column 2</td> <td>Row 5, Column 3</td> </tr>
- 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.
- Rimuovi tutte le righe della tabella corrente, mantenendo solo quella superiore con le intestazioni:
<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </table>
- Aggiungi più righe alla tabella. Utilizza l’attributo colspan per unire una delle righe su 3 colonne:
<tr> <td style="background-color: #ffedcc" colspan="3">Q1</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> <tr> <td>Row 4, Column 1</td> <td>Row 4, Column 2</td> <td>Row 4, Column 3</td> </tr>
- Aggiungi un’altra riga unita per separare le sezioni della tabella:
<tr> <td style="background-color: #ffedcc" colspan="3">Q2</td> </tr> <tr> <td>Row 6, Column 1</td> <td>Row 6, Column 2</td> <td>Row 6, Column 3</td> </tr> <tr> <td>Row 7, Column 1</td> <td>Row 7, Column 2</td> <td>Row 7, Column 3</td> </tr> <tr> <td>Row 8, Column 1</td> <td>Row 8, Column 2</td> <td>Row 8, Column 3</td> </tr>
- 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.