HTML

Table

by Andrea Spera

Un esempio di tabella
Spiegazione del CSS:
  • table { width: 100%; }: La tabella occupa il 100% della larghezza del contenitore.
  • border-collapse: collapse;: Rimuove lo spazio tra i bordi delle celle, unendo i bordi in un unico tratto.
  • th, td { padding: 12px 15px; }: Aggiunge spazio all'interno delle celle per rendere il testo più leggibile.
  • border: 1px solid #ddd;: Aggiunge un bordo sottile e grigio chiaro attorno a ogni cella.
  • th { background-color: #f4f4f4; }: Colore di sfondo per le celle dell'intestazione, rendendole distinte.
  • tr:nth-child(even) { background-color: #f9f9f9; }: Applica un colore di sfondo alternato alle righe pari per migliorare la leggibilità.
  • tr:hover { background-color: #f1f1f1; }: Cambia il colore di sfondo delle righe quando si passa sopra di esse, aggiungendo un'interattività visiva.
Codice 
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template Tabella</title>
<style>
table {
    width: 100%;
    border-collapse: collapse; /* Rimuove lo spazio tra i bordi delle celle */
}
th, td {
    padding: 12px 15px; /* Spaziatura interna delle celle */
    border: 1px solid #ddd; /* Bordi sottili per le celle */
    text-align: left; /* Allineamento del testo a sinistra */
}
th {
    background-color: #4CAF50; /* Sfondo dell'intestazione (verde brillante) */
    color: white; /* Testo bianco per un contrasto maggiore */
    font-weight: bold; /* Testo in grassetto */
}
tr:nth-child(even) {
    background-color: #f2f2f2; /* Colore di sfondo per le righe pari */
}
tr:nth-child(odd) {
    background-color: #e9e9e9; /* Colore di sfondo per le righe dispari */
}
tr:hover {
    background-color: rgba(250, 250, 150, 0.5);
}
</style>
</head>
<body>

<h1>Tabella di Esempio</h1>

<table>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Età</th>
            <th>Città</th>
            <th>Professione</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mario Rossi</td>
            <td>35</td>
            <td>Roma</td>
            <td>Ingegnere</td>
        </tr>
        <tr>
            <td>Luca Bianchi</td>
            <td>28</td>
            <td>Milano</td>
            <td>Designer</td>
        </tr>
        <tr>
            <td>Giulia Verdi</td>
            <td>42</td>
            <td>Firenze</td>
            <td>Architetto</td>
        </tr>
        <tr>
            <td>Elisa Neri</td>
            <td>30</td>
            <td>Napoli</td>
            <td>Medico</td>
        </tr>
    </tbody>
</table>

</body>
</html>
Output
Nome Età Città Professione
Mario Rossi 35 Roma Ingegnere
Luca Bianchi 28 Milano Designer
Giulia Verdi 42 Firenze Architetto
Elisa Neri 30 Napoli Medico