Tag HTML <th>
Il tag HTML <th> definisce una cella di intestazione in una tabella. Scopri colspan, rowspan e l'attributo scope per tabelle accessibili.
Il tag <th> specifica una cella di intestazione in una tabella HTML. Deve essere utilizzato come elemento figlio di <tr>, che a sua volta è inserito all'interno del tag <table>. Per definire una cella dati standard si utilizza il tag <td>.
Questa pagina illustra cosa fa <th>, come estendere le celle con colspan e rowspan e — soprattutto — come rendere le intestazioni di tabella accessibili tramite l'attributo scope e il pattern id/headers, in modo che i lettori di schermo possano annunciare l'intestazione corretta per ogni cella.
Il tag <th> può contenere testo, immagini, moduli, link o qualsiasi altro elemento HTML utilizzabile nel corpo di un documento HTML. Le dimensioni della tabella vengono adattate automaticamente in base al contenuto.
Nelle tabelle HTML i dati sono disposti verticalmente in colonne. Se si desidera che la prima riga della tabella mostri etichette o intestazioni, è necessario utilizzare elementi <th> anziché elementi <td> per quella riga. Per impostazione predefinita, il contenuto del tag <th> è in grassetto e centrato. Per modificarne l'aspetto è possibile utilizzare gli stili CSS. Le intestazioni di tabella possono anche essere stilizzate in modo indipendente dal resto del contenuto della tabella.
Tenere presente che tutte le righe di una tabella devono avere lo stesso numero di celle. Se una riga ha meno celle, il browser le aggiunge implicitamente. Queste celle implicite ereditano gli stili del bordo della tabella. Se si deve indicare che certe celle non contengono dati, è necessario creare celle vuote dove necessario. Se le celle implicite sono consecutive, potrebbero essere visualizzate come un'unica cella unificata.
Sintassi
Il tag <th> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<th>) e quello di chiusura (</th>).
Tag HTML <th>
<table>
<tr>
<th>...</th>
</tr>
</table>Esempio del tag HTML <th>:
Mese e Data — Esempio del tag HTML <th> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</tbody>
</table>
</body>
</html>Risultato
In questo esempio, le intestazioni sono "Month" e "Date", definite tramite tag <th>. Entrambi i tag sono inseriti all'interno di un elemento <tr>.
L'attributo colspan viene generalmente usato con il tag <th> per far sì che il contenuto si estenda su più colonne. Vediamolo in azione.
Esempio del tag HTML <th> con l'attributo colspan:
Esempio con attributo colspan — Tag HTML <th> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #1c87c9;
color: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">Month and Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jun</td>
<td>18.07.2014</td>
</tr>
</tbody>
</table>
</body>
</html>In questo esempio, il valore dell'attributo colspan è "2". Significa che la singola cella di intestazione si estende su due colonne.
Esempio del tag HTML <th> con l'attributo rowspan
L'attributo rowspan è la controparte verticale di colspan: fa sì che una cella di intestazione si estenda su più righe. È utile quando un'intestazione si applica a più righe di dati.
<!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;
}
thead {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Day</th>
<th>Slot</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" scope="rowgroup">Monday</th>
<td>Morning</td>
<td>HTML basics</td>
</tr>
<tr>
<td>Afternoon</td>
<td>CSS basics</td>
</tr>
</tbody>
</table>
</body>
</html>In questo caso, la cella di intestazione "Monday" utilizza rowspan="2", quindi copre sia la riga del mattino che quella del pomeriggio.
L'attributo scope
La funzionalità di accessibilità più importante di <th> è l'attributo scope. Indica alle tecnologie assistive — in particolare ai lettori di schermo — a quali celle si riferisce un'intestazione. Gli utenti vedenti lo desumono dalla disposizione visiva, ma un lettore di schermo legge le celle una alla volta e ha bisogno di scope per annunciare l'intestazione corretta prima di ogni cella dati.
scope accetta quattro valori significativi:
| Valore | L'intestazione si applica a… |
|---|---|
col | ogni cella nella colonna sottostante |
row | ogni cella nella riga alla sua destra |
colgroup | un gruppo di colonne (usato con <colgroup>) |
rowgroup | un gruppo di righe (ad esempio tutte le righe all'interno di un <tbody>) |
Una tabella può avere intestazioni in entrambe le direzioni. Le intestazioni di colonna si trovano nel <thead> con scope="col"; l'etichetta iniziale di una riga è un <th scope="row"> all'interno del <tbody>.
Esempio di tabella completamente accessibile con scope
<!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;
text-align: left;
}
thead th,
tbody th {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<table>
<caption>Weekly study plan</caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Topic</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>HTML</td>
<td>2</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td>CSS</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>Quando un utente con lettore di schermo arriva alla cella contenente 3, il programma può annunciare "Tuesday, Hours, 3" perché l'intestazione di colonna (scope="col") e quella di riga (scope="row") sono entrambe inequivocabili.
Accessibilità
Perché scope è importante
Una tabella di dati è una griglia di relazioni: ogni <td> appartiene a una o più intestazioni. Gli utenti vedenti leggono queste relazioni visivamente; gli utenti con lettore di schermo no. Contrassegnare le celle di intestazione con <th> e assegnare loro un scope corretto è ciò che consente alla tecnologia assistiva di annunciare ad alta voce l'intestazione giusta mentre l'utente scorre la tabella. Senza questo, una tabella complessa è solo una sequenza di valori scollegati.
<th> vs. <td role>
Usare sempre un vero elemento <th> per le intestazioni invece di stilizzare un <td> in modo da sembrare in grassetto. Un <th> porta automaticamente la semantica di intestazione; un <td> semplice no, indipendentemente dall'aspetto. Ricorrere a role="columnheader" o role="rowheader" su un <td> dovrebbe essere l'ultima risorsa (ad esempio, quando non è possibile modificare il markup). Il <th> nativo con scope è più semplice e meglio supportato.
Il pattern id / headers per tabelle complesse
scope funziona bene per griglie semplici, ma non riesce a esprimere tutte le relazioni in tabelle con estensioni irregolari o più livelli di intestazione. In questi casi, è necessario assegnare un id a ogni intestazione e indicare gli id delle intestazioni pertinenti in ogni cella dati tramite l'attributo headers (separati da spazio). Questo associa esplicitamente ogni cella alle sue intestazioni.
<!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>
<thead>
<tr>
<th id="name">Name</th>
<th id="q1">Q1</th>
<th id="q2">Q2</th>
</tr>
</thead>
<tbody>
<tr>
<th id="alice" headers="name">Alice</th>
<td headers="alice q1">120</td>
<td headers="alice q2">150</td>
</tr>
<tr>
<th id="bob" headers="name">Bob</th>
<td headers="bob q1">90</td>
<td headers="bob q2">110</td>
</tr>
</tbody>
</table>
</body>
</html>In questo modo, la cella con 150 è esplicitamente associata sia all'intestazione di riga Alice che all'intestazione di colonna Q2, quindi un lettore di schermo può annunciare "Alice, Q2, 150" senza alcuna ambiguità.
L'attributo abbr
Quando il testo completo di un'intestazione è lungo, l'attributo abbr fornisce una versione abbreviata. Alcuni browser vocali leggono questa forma abbreviata (invece di ripetere l'intestazione completa) ogni volta che annunciano una cella di quella colonna, rendendo la navigazione in tabelle ampie molto meno noiosa.
<th scope="col" abbr="HDI">Human Development Index</th>Il testo visibile rimane "Human Development Index", ma un lettore di schermo potrebbe annunciare ogni cella di quella colonna semplicemente come "HDI".
Attributi
Solo abbr, colspan, rowspan, headers e scope sono validi in HTML5. Le righe contrassegnate come Deprecate di seguito sono attributi presentazionali obsoleti — non utilizzarli; ottenere lo stesso risultato con CSS.
| Attributo | Valore | Descrizione |
|---|---|---|
| abbr | testo | Definisce una versione abbreviata del contenuto di una cella di intestazione. Alcuni user agent, come i lettori vocali, possono annunciare questa forma breve invece del testo completo. |
| colspan | numero | Definisce il numero di colonne su cui si estende una cella. Il valore deve essere un intero positivo. Il valore predefinito è 1. |
| headers | header_id | Un elenco separato da spazi di id di celle di intestazione che descrivono questa cella. Ogni valore deve corrispondere all'id di una cella di intestazione. Usato per tabelle complesse. |
| rowspan | numero | Il numero di righe su cui si estende una cella. Il valore deve essere un intero positivo. Il valore predefinito è 1. I valori superiori a 65534 vengono ridotti a 65534. |
| scope | col / colgroup / row / rowgroup | Dichiara a quali celle si riferisce l'intestazione. Essenziale per l'accessibilità delle tabelle. |
| align | left / right / center | Deprecato. Allineava il contenuto. Usare CSS text-align. |
| axis | category_name | Deprecato. Categorizzava le celle con contenuto simile. |
| background | url | Deprecato. Impostava un'immagine di sfondo. Usare CSS background. |
| bgcolor | rgb(x,x,x) / #xxxxxx / colorname | Deprecato. Impostava il colore di sfondo. Usare CSS background-color. |
| bordercolor | color | Deprecato. Impostava il colore del bordo. Usare CSS border. |
| char | character | Deprecato. Allineava il contenuto a un carattere (solo con align="char"). |
| charoff | numero | Deprecato. Offset del carattere di allineamento. |
| height | % / pixel | Deprecato. Impostava l'altezza della cella. Usare CSS height. |
| nowrap | nowrap | Deprecato. Impediva il ritorno a capo del contenuto. Usare CSS white-space: nowrap. |
| sorted | (vari) | Deprecato. Definiva la direzione di ordinamento di una colonna. |
| valign | top / middle / bottom / baseline | Deprecato. Allineamento verticale. Usare CSS vertical-align. |
| width | % / pixel | Deprecato. Impostava la larghezza della cella. Usare CSS width. |
Il tag <th> supporta anche gli Attributi Globali e gli Attributi Evento.
Come stilizzare un tag HTML <th>
th {
background-color: #f2f2f2;
color: #333;
padding: 8px;
border: 1px solid #ccc;
}Tag correlati
<table>— il contenitore della tabella<tr>— una riga della tabella<td>— una cella dati standard<thead>— raggruppa le righe di intestazione<tbody>— raggruppa le righe del corpo<caption>— il titolo della tabella