Tabelle in CSS
Per applicare stili alle tabelle con i CSS usa le seguenti proprietà: colore della tabella, bordi collassati, larghezza e altezza della tabella, allineamento del testo, padding. Guarda gli esempi.
Diverse proprietà CSS sono ampiamente usate per applicare stili alle tabelle HTML. Ciascuna è descritta di seguito.
In questo capitolo vedremo come applicare stili alle tabelle, compresa la modifica dei colori delle intestazioni e delle righe.
Proprietà per lo stile delle tabelle
Ecco le proprietà CSS usate per applicare stili a una tabella. Le proprietà background-color e color impostano rispettivamente il colore di sfondo e quello del testo. La proprietà border-collapse collassa i bordi della tabella. La proprietà text-align imposta l'allineamento orizzontale del testo. Inoltre, puoi usare height, width e padding per regolare il layout.
Esempio di applicazione di stili a una tabella:
Esempio di stile per le tabelle HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th {
text-align: center;
height: 50px;
}
tbody tr:nth-child(odd) {
background: #ffffff;
}
tbody tr:nth-child(even) {
background: #f4f4f4;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Risultato
Spieghiamo il codice qui sopra.
Come puoi vedere, la nostra tabella ha due sezioni principali: la sezione <thead> per le intestazioni e la sezione <tbody> per le righe di dati. La tabella usa bordi neri, applicati tramite la proprietà border. Puoi usare il colore e lo stile di bordo che preferisci.
Colore della tabella
Come puoi vedere, la parte <thead> della nostra tabella è blu e tutto il testo è bianco. Per lo sfondo blu usiamo la proprietà background-color, mentre per il testo bianco usiamo la proprietà color. Gli altri testi sono scritti in nero.
Bordi collassati
La proprietà border-collapse specifica se i bordi di una tabella vengono collassati in un unico bordo o restano separati.
Larghezza e altezza della tabella
La tabella ha anche le proprietà width e height. Come puoi vedere, usiamo queste proprietà nel nostro stile. Usiamo la proprietà width per l'intera tabella e la proprietà height per le intestazioni. Possiamo usare queste proprietà con i pixel e con le percentuali.
Allineamento del testo nella tabella
Ora parliamo dell'allineamento del testo nella tabella. Come sai, in precedenza abbiamo usato la proprietà text-align per la posizione del testo. Nel nostro esempio, come puoi vedere, usiamo la proprietà text-align per l'intestazione. A questo scopo usiamo "text-align: center". Puoi leggere il capitolo precedente per sapere come usarla.
Padding della tabella
Per controllare lo spazio tra il bordo e il contenuto di una tabella, usa la proprietà padding sugli elementi <td> e <th>:
Padding delle tabelle HTML
td, th {
padding: 15px;
}Allineamento orizzontale con la proprietà text-align
Con l'aiuto della proprietà CSS text-align, puoi impostare l'allineamento orizzontale del contenuto in <th> o <td>.
Per impostazione predefinita, il contenuto degli elementi <td> è allineato a sinistra e quello degli elementi <th> è allineato al centro. Nell'esempio seguente, il contenuto degli elementi <th> e <td> è allineato a destra:
Esempio di allineamento a destra del contenuto degli elementi <th> e <td>:
Esempio di allineamento a destra del contenuto degli elementi <th> e <td>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: right;
}
</style>
</head>
<body>
<h2>Horizontal alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Whatson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Allineamento verticale con la proprietà vertical-align
Usando la proprietà CSS vertical-align, puoi impostare l'allineamento verticale del contenuto in <th> o <td>.
Per impostazione predefinita, il contenuto sia degli elementi <th> che <td> è allineato verticalmente al centro.
Nell'esempio seguente, il contenuto degli elementi <td> è allineato verticalmente in basso:
Esempio di allineamento verticale in basso del contenuto degli elementi <td>:
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
text-align: right;
padding-right: 10px;
}
</style>
</head>
<body>
<h2>Vertical alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$300</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Divisori orizzontali
Aggiungendo la proprietà CSS border-bottom agli elementi <td> e <th>, creerai dei divisori orizzontali.
Esempio di creazione di divisori orizzontali:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
</style>
</head>
<body>
<h2>Horizontal dividers example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tabelle con effetto hover
Usando il selettore CSS :hover sull'elemento <tr>, renderai la tabella sensibile al passaggio del mouse.
Esempio di creazione di una tabella con effetto hover:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
tr {
background-color: #f5f5f5;
}
th,
td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ccc;
}
tr:hover {
background-color: #cdcdcd;
}
</style>
</head>
<body>
<h2>Hoverable table example</h2>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tabella a righe alternate (zebra)
Usando il selettore nth-child() e aggiungendo la proprietà CSS background-color alle righe dispari (o pari) della tabella, puoi creare una tabella a righe alternate.
Esempio di creazione di una tabella a righe alternate:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Striped table example</h2>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$250</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tabelle responsive
Per rendere una tabella responsive, racchiudila in un elemento contenitore e applica overflow-x: auto a quel contenitore.
Esempio di creazione di una tabella responsive:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px 5px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Responsive table example</h2>
<div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>