Tag HTML <td>
Il tag <td> definisce una cella dati standard in una tabella HTML. Deve essere usato come elemento figlio di <tr>, che definisce una riga nella tabella.
Il tag <td> specifica una cella dati standard in una tabella HTML. Deve essere usato come elemento figlio di <tr>, che definisce una riga nella tabella. Per definire una cella di intestazione si usa il tag <th>.
Il tag <td> può contenere testo, moduli, immagini, tabelle ecc. Il contenuto al suo interno è allineato a sinistra per impostazione predefinita.
Se si presentano dati tabulari nelle tabelle, ogni cella dati deve essere aggiunta singolarmente come elemento <td>.
Tutte le righe nella tabella contengono un numero uguale di celle, equivalente al numero di celle nella riga più lunga. Se ci sono meno celle in una riga, il browser riempirà automaticamente la riga inserendo celle vuote alla fine.
Se è necessario evidenziare che non ci sono dati in altre celle, creare una cella senza contenuto dove necessario.
Le celle aggiunte dal browser non hanno bordi e, se si trovano una dopo l'altra, verranno visualizzate come un'unica cella integrata.
Sintassi
Il tag <td> viene usato in coppia. Il contenuto è scritto tra i tag di apertura (<td>) e di chiusura (</td>).
Tag HTML <td>
<table>
<tr>
<td>...</td>
</tr>
</table>Esempio del tag HTML <td>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: lightgrey;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>In questo esempio usiamo il tag <tr> per definire le righe della tabella, <th> per definire le celle di intestazione e <td> per definire le celle dati standard.
Estensione su colonne e righe
Gli attributi colspan e rowspan sono comunemente usati con il tag <td> per consentire a una singola cella di estendersi su più colonne o righe.
colspanimposta il numero di colonne occupate da una cella. Il valore deve essere un numero intero positivo; il valore predefinito è1. Una cella concolspan="2"occupa lo spazio orizzontale di due celle normali, quindi la riga a cui appartiene dovrebbe contenere un<td>in meno rispetto alle altre righe.rowspanimposta il numero di righe occupate da una cella. Il valore deve essere un numero intero positivo; il valore predefinito è1. Una cella conrowspan="2"si estende nella riga successiva, quindi quella riga successiva dovrebbe omettere il<td>che si troverebbe sotto di essa.
Fare attenzione a non creare un'estensione più grande di quanto la tabella consenta. Se un colspan o rowspan supera il bordo della tabella, i browser lo limitano alle colonne o righe disponibili anziché aggiungerne di nuove. Al contrario, se si dimentica di rimuovere le celle che un'estensione sovrappone, la riga finisce con troppe celle e il layout della tabella si rompe.
Esempio del tag HTML <td> con l'attributo colspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #e6ebef;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
tr:last-child {
height: 60px;
}
tr:last-child td {
background-color: #a3cced;
vertical-align: bottom;
}
tr:last-child span {
font-size: 14px;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company e-mail</th>
<th>Date</th>
</tr>
<tr>
<td>
<a href="#">[email protected]</a>
</td>
<td>01.09.2017</td>
</tr>
<tr>
<td colspan="2">[email protected];
<strong>01.09.2017 </strong>
<span>(received date)</span>
</td>
</tr>
</table>
</body>
</html>Risultato
Esempio del tag HTML <td> con l'attributo rowspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
thead tr {
background-color: #1c87c9;
color: #fff;
}
tbody td {
background-color: #e6ebef;
}
.year {
background-color: #a3cced;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>March</td>
<td class="year" rowspan="2">2014</td>
</tr>
<tr>
<td>April</td>
</tr>
</tbody>
</table>
</body>
</html>Associare le celle alle intestazioni per l'accessibilità
In una tabella semplice, i lettori di schermo possono abbinare automaticamente ogni cella dati alla sua intestazione di colonna e di riga. In una tabella complessa — con più livelli di intestazioni o con celle estese — questa associazione automatica si interrompe. Per mantenere tali tabelle leggibili dalla tecnologia assistiva, assegnare a ogni <th> un id, quindi elencare gli id pertinenti nell'attributo headers di ogni <td> correlato. Una cella può fare riferimento a più intestazioni separando i loro id con spazi.
Esempio del tag HTML <td> con l'attributo headers:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
margin: 30px auto;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th id="name">Name</th>
<th id="hours">Hours</th>
<th id="rate">Rate</th>
</tr>
<tr>
<td headers="name">Ann</td>
<td headers="hours">38</td>
<td headers="rate">$25</td>
</tr>
<tr>
<td headers="name">Bob</td>
<td headers="hours">40</td>
<td headers="rate">$30</td>
</tr>
</table>
</body>
</html>Qui ogni cella dati fa riferimento all'intestazione che la descrive, in modo che un lettore di schermo possa annunciare, ad esempio, "Rate: $25" invece di solo "$25".
Problemi di layout con <td>
Per impostazione predefinita, ogni cella dati si allinea verticalmente con le celle nella stessa colonna delle altre righe. Aggiungere un <td> extra a una sola riga altera quell'allineamento, poiché ogni cella successiva in quella riga si sposta di una colonna.
Ad esempio, questa riga ha tre celle mentre il resto della tabella ne ha due, quindi le sue celle non si allineano più sotto le intestazioni:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td>March</td>
<td>Q1</td>
<td>120</td>
</tr>La soluzione è unire le celle con colspan invece di aggiungere una colonna extra. Qui la cella "March" si estende su entrambe le colonne sopra i totali, mantenendo la griglia allineata:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td colspan="2">March (Q1)</td>
</tr>
<tr>
<td>April</td>
<td>120</td>
</tr>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| abbr | text | Definisce una versione abbreviata del contenuto in una cella, o un testo alternativo. (Gli user-agent, come i lettori vocali, possono presentare questa descrizione prima del contenuto stesso). Non supportato in HTML 5. |
| align | left right center justify char | Allinea il contenuto in una cella. Non supportato in HTML 5. |
| axis | category_name | Categorizza le celle con contenuto simile. Non supportato in HTML 5. |
| background | background | Imposta lo sfondo in una cella. Non supportato in HTML 5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Definisce il colore di sfondo di una cella. Non supportato in HTML 5. |
| bordercolor | bordercolor | Imposta il colore del bordo. Non supportato in HTML 5. |
| char | character | Allinea il contenuto in una cella a un carattere. Viene usato solo se l'attributo align="char". Non supportato in HTML 5. |
| charoff | number | Imposta il numero di caratteri dal quale il contenuto sarà allineato rispetto al carattere specificato dall'attributo char. Viene usato solo se l'attributo align="char". Non supportato in HTML 5. |
| colspan | number | Definisce il numero di colonne su cui una cella deve estendersi. Il valore dell'attributo deve essere un numero intero positivo. Il valore predefinito è 1. |
| headers | header_id | Specifica una o più celle di intestazione (definite dal tag <th>) a cui una cella standard è correlata. |
| height | % pixels | Imposta l'altezza di una cella. Non supportato in HTML 5. |
| nowrap | nowrap | Specifica che il contenuto all'interno di una cella non deve andare a capo. Non supportato in HTML 5. |
| rowspan | number | Specifica il numero di righe su cui una cella deve estendersi. Il valore dell'attributo deve essere un numero intero positivo. Il valore predefinito è 1. Non è consigliato usare valori superiori a 65534, poiché verranno ridotti a 65534. |
| valign | top middle bottom baseline | Specifica l'allineamento verticale del contenuto all'interno di una cella. Non supportato in HTML 5. Usare invece la proprietà CSS vertical-align. |
| width | % pixels | Imposta la larghezza di una cella. Non supportato in HTML 5. |
Il tag <td> supporta gli Attributi Globali e gli Attributi Evento.
L'attributo scope non è valido su <td>; appartiene all'elemento <th>, dove dichiara se un'intestazione si applica a una colonna o a una riga. Usare headers su un <td> per fare riferimento alle sue celle di intestazione.
Come applicare stili a un tag HTML <td>
Gli stili più comuni per <td> controllano spaziatura, bordi e allineamento. Selezionare td insieme a th in modo che le celle di intestazione e quelle dati abbiano un aspetto coerente:
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #666;
text-align: left;
vertical-align: middle;
}
td:hover {
background-color: #f1f7fb;
}Tag correlati
<table>— il contenitore che raccoglie tutte le righe e le celle.<tr>— definisce una riga di tabella; ogni<td>deve trovarsi all'interno di una.<th>— definisce una cella di intestazione, abbinata a<td>tramite l'attributoheaders.