Esercizi Tabelle HTML

Codegrind Team•Jul 16 2023

Ecco degli esercizi semplici con soluzione per praticare le basi sulla creazione e l’inserimento di tabelle all’interno di una pagina HTML utilizzando il tag <table>.

Esercizio 1

Crea una tabella con 2 righe e 2 colonne. Inserisci del testo nelle celle.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
      </tr>
      <tr>
        <td>Cella 3</td>
        <td>Cella 4</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 2

Aggiungi un'intestazione di tabella con 3 colonne e inserisci del testo nelle celle dell'intestazione.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Intestazione 1</th>
        <th>Intestazione 2</th>
        <th>Intestazione 3</th>
      </tr>
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
        <td>Cella 3</td>
      </tr>
      <tr>
        <td>Cella 4</td>
        <td>Cella 5</td>
        <td>Cella 6</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 3

Unisci due celle in una riga e inserisci del testo nella cella risultante.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Cella 1</td>
        <td colspan="2">Cella 2 e 3 unite</td>
      </tr>
      <tr>
        <td>Cella 4</td>
        <td>Cella 5</td>
        <td>Cella 6</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 4

Dividi una cella in una colonna in due celle separate e inserisci del testo nelle celle risultanti.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Cella 1</td>
        <td>Cella 2 e 3 separate</td>
        <td>Cella 4</td>
      </tr>
      <tr>
        <td>Cella 5</td>
        <td>Cella 6</td>
        <td>Cella 7</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 5

Aggiungi una cornice alla tabella utilizzando l'attributo border.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
      </tr>
      <tr>
        <td>Cella 3</td>
        <td>Cella 4</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 6

Aggiungi spaziatura alle celle della tabella utilizzando l'attributo cellpadding.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table cellpadding="10">
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
      </tr>
      <tr>
        <td>Cella 3</td>
        <td>Cella 4</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 7

Aggiungi spaziatura tra le celle della tabella utilizzando l'attributo cellspacing.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table cellspacing="10">
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
      </tr>
      <tr>
        <td>Cella 3</td>
        <td>Cella 4</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 8

Aggiungi una riga di separazione tra le righe della tabella utilizzando l'elemento hr.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
      </tr>
      <tr>
        <td>Cella 3</td>
        <td>Cella 4</td>
      </tr>
      <tr>
        <td colspan="2"><hr /></td>
      </tr>
      <tr>
        <td>Cella 5</td>
        <td>Cella 6</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 9

Crea una griglia di 3x3 celle vuote.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>