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>