📢 Nuovo Corso Laravel API disponibile!

Esercizi Tabelle HTML

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>