table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid black; } th { height: 50px; text-align: left; } td { height: 50px; vertical-align: bottom; } th, td { padding: 15px; } tr:hover { background-color: #f5f5f5; } tr:nth-child(even) { background-color: #f2f2f2; }
Le tabelle, grazie a CSS, possono essere notevolmente migliorate, per esempio, conl’utilizzo dei border e delle sua varie proprietà. Oppure, possiamo impostare una larghezza e una altezza, grazie ai comandi width e height, o allineare il testo orizzontalmente o verticalmente rispettivamente grazie a text-align e vertcal-align. Possiamo impostare un’imbottitura con l’utilizzo del padding. In aggiunta a tutto questo, possiamo anche utilizzare il selettore :hover su <tr> per evidenziare le righe della tabella, mentre ci passiamo sopra con il mouse. Infine, possiamo colorare la tabella in modo zebrato, usando il selettore nth-child() e aggiungendo il background-color a tutte le righe della tabella pari o dispari.