Home esercizi css stile delle tabelle

Esercizi Stile Tabelle CSS

Metti alla prova la tua abilità nel migliorare l’aspetto delle tabelle HTML con CSS. Pratica l’uso delle regole CSS per personalizzare i bordi, il colore di sfondo e l’allineamento del contenuto delle tue tabelle.

Esercizio 1

Crea una tabella HTML semplice con alcune righe e colonne. Usa il CSS per cambiare il colore di sfondo delle celle della tabella in grigio chiaro.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        background-color: lightgrey;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 2

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per aggiungere bordi a tutte le celle della tabella.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 3

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per centrare il testo nelle celle della tabella.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid black;
        padding: 5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 4

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per cambiare il colore del testo nelle celle della tabella in bianco e il colore di sfondo in nero.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid black;
        padding: 5px;
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 5

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per cambiare il colore del testo nelle celle della tabella quando il mouse ci passa sopra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid black;
        padding: 5px;
      }

      td:hover {
        color: red;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 6

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per aggiungere uno sfondo grigio alle righe pari della tabella.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      table {
        border-collapse: collapse;
      }

      tr:nth-child(even) {
        background-color: lightgrey;
      }

      td {
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 3, Colonna 1</td>
        <td>Riga 3, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 7

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per cambiare il colore del testo e dello sfondo delle celle con classe "importante" nella tabella.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid black;
        padding: 5px;
      }

      .importante {
        color: white;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td class="importante">Riga 1, Colonna 2 (Importante)</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 8

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per aggiungere uno sfondo giallo alla prima colonna della tabella.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid black;
        padding: 5px;
      }

      td:first-child {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1 (Giallo)</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1 (Giallo)</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 9

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per cambiare il colore del testo nelle celle della tabella quando il mouse ci passa sopra (utilizza l'hover) e rimuovere i bordi delle celle.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        padding: 5px;
        border: 1px solid black;
      }

      td:hover {
        color: red;
        border: none;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 10

Crea una tabella HTML con alcune righe e colonne. Usa il CSS per centrare il testo verticalmente e orizzontalmente nelle celle della tabella.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid black;
        padding: 5px;
        text-align: center;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>