Tronweb

Il Web Developing a portata di studente.

Tabelle in CSS


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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *