CSS Tables (Tabelle)

Le tabelle sono utilizzate per visualizzare dati tabellari.

Usare una tabella di stili CSS

Quando costrui una tabella senza stili o attributiHTML tableIl browser li visualizzerà senza alcun bordo. Utilizzare stili CSS per migliorare notevolmente l'aspetto della tabella.

Le seguenti sezioni ti mostreranno come utilizzare CSS per controllare la disposizione e la rappresentazione degli elementi tabella per creare tabelle eleganti e coerenti.

Aggiungere bordi alla tabella

CSS borderè il miglior metodo per definire i bordi della tabella.

Il seguente esempio imposta un bordo nero per<table>,<th>e<td>elemento.

table, th, td {
　　　　border: 1px solid black;
}

Piegare i bordi della tabella

Se hai visto l'output dell'esempio precedente, noterai che ogni cella della tabella ha un bordo separato e c'è un intervallo tra i bordi delle celle adiacenti. Questo accade perché per impostazione predefinita i margini delle celle della tabella sono separati. Ma puoi utilizzare l'elementoborder-collapsel'attributo piega i bordi singoli della tabella in un singolo bordo <table>：

Nell'esempio seguente, le regole di stile piegano i bordi delle celle della tabella e applicano un bordo nero di un pixel agli elementi tabella e cella.

table {
　　　　border-collapse: collapse;
}
table, th, td {
　　　　border: 1px solid black;
}

Puoi anche impostare il valore CSS per rimuovere lo spazio tra i bordi delle celle della tabellaborder-spacingl'attributo è 0. Ma elimina solo lo spazio, senza fondere come quando si impostano i margini border-collapse a collapse.

Regolazione dello spazio interno della tabella

Per impostazione predefinita, le celle della tabella create dal browser sono esattamente sufficienti per contenere i dati delle celle. Per aggiungere più spazio intorno al contenuto delle celle della tabella, è possibile utilizzare l'attributo CSS padding, come mostrato di seguito:

th, td {
　　　　padding: 15px;
}

border-spacingSe i bordi della tabella sono separati (impostazione predefinita), è anche possibile utilizzare l'attributo CSS per regolare l'intervallo tra i bordi delle celle.

Le seguenti regole di stile applicano un intervallo di 10 pixel tra tutti i bordi della tabella:

table {
　　　　border-spacing: 10px;
}

Gestione della disposizione della tabella

Per impostazione predefinita, la tabella si espande e si restringe per accogliere i dati contenuti. Quando i dati vengono inseriti nella tabella, se c'è spazio, i dati continuano a espandersi. Ma a volte è necessario impostare una larghezza fissa per la tabella per gestire la disposizione.

Puoi eseguire questa operazione con l'attributo table-layout CSS. Questo attributo definisce l'algoritmo utilizzato per disporre le celle, le righe e le colonne della tabella. Questo attributo accetta uno dei due valori:

• auto -Utilizza l'algoritmo di layout della tabella automatico. Con questo algoritmo, è possibile regolare la larghezza della tabella e delle celle per adattarsi al contenuto. Questo è il valore predefinito.

• fixed -Utilizza l'algoritmo di layout della tabella fissa. Con questo algoritmo, la disposizione orizzontale della tabella non dipende dal contenuto delle celle; dipende solo dalla larghezza della tabella, dalla larghezza delle colonne e dagli spazi tra i bordi o le celle.

Nell'esempio seguente, le regole di stile indicano che la tabella è disposta utilizzando l'algoritmo di layout fisso e ha una larghezza fissa di 300 pixel.

table {
　　　　width: 300px;
　　　　table-layout: fixed;
}

Senza valore fisso dell'attributo table-layout, su tabelle di grandi dimensioni, gli utenti non vedranno alcuna parte della tabella fino a quando il browser non avrà presentato l'intera tabella.

Gestione delle celle vuote

L'attributo empty-cells CSS controlla i confini e, se non ci sono contenuti evidenti sulla tabella, è una cella con modello di sfondo di cella separata.

Questa proprietà può assumere uno dei tre valori: show, hide o inherit.

Le seguenti regole di stile nascondono le celle vuote nell'elemento table.

table {
　　　　border-collapse: separate;
　　　　empty-cells: hide;
}

Controllo della posizione del titolo della tabella

L'attributo caption-side CSS imposta la posizione verticale della casella del titolo della tabella.

Le seguenti regole di stile posizionano il titolo della tabella sotto il padre della tabella. Ma per modificare l'allineamento orizzontale del testo del sottotitolo, è possibile utilizzare iltext-alignProprietà.

caption {
　　　　caption-side: bottom;
}