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>