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>