Tag HTML <th>

Definizione e uso

<th> Il tag <th> definisce la cella di intestazione dell'HTML tabella.

HTML ha due tipi di celle nella tabella:

  • Cella di intestazione - contiene informazioni di intestazione (utilizzando <th> creazione dell'elemento)
  • Cella di dati - contiene dati (utilizzando <td> creazione dell'elemento)

Per impostazione predefinita:<th> Il testo all'interno dell'elemento è in grassetto e centrato.

Per impostazione predefinita, il testo all'interno dell'elemento <td> è normale e allineato a sinistra.

Vedi anche:

Tutorial HTML:Tabella HTML

Manuale di riferimento HTML DOM:Oggetto TableHeader

Tutorial CSS:Impostare lo stile del modulo

Esempio

Esempio 1

Una semplice tabella HTML con tre righe, due celle di intestazione e quattro celle di dati:

<table>
  <tr>
    <th>Mese</th>
    <th>Saldo</th>
  </tr>
  <tr>
    <td>Giugno</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febbraio</td>
    <td>￥4500</td>
  </tr>
</table>

Prova personalmente

Esempio 2

Come allineare <th> del contenuto (usando CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Mese</th>
    <th style="text-align:left">Risparmio</th>
  </tr>
  <tr>
    <td>Giugno</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febbraio</td>
    <td>￥4500</td>
  </tr>
</table>

Prova personalmente

Esempio 3

Come aggiungere il colore di sfondo alla cella del titolo della tabella (utilizzando CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Mese</th>
    <th style="background-color:#00FF00">Risparmio</th>
  </tr>
  <tr>
    <td>Giugno</td>
    <td>￥3400</td>
  </tr>
 </table>

Prova personalmente

Esempio 4

Come impostare l'altezza della cella del titolo della tabella (utilizzando CSS):

<table>
  <tr>
    <th style="height:100px">Mese</th>
    <th style="height:100px">Saldo</th>
  </tr>
  <tr>
    <td>Giugno</td>
    <td>￥3400</td>
  </tr>
</table>

Prova personalmente

Esempio 5

Come stabilire che una cella di intestazione della tabella non debba essere capovolta (usando CSS):

<table>
  <tr>
    <th>Mese</th>
    <th style="white-space:nowrap">Soldi per la nuova auto</th>
  </tr>
  <tr>
    <td>Giugno</td>
    <td>￥3400</td>
  </tr>
</table>

Prova personalmente

Esempio 6

Come allineare verticalmente <th> del contenuto (usando CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Mese</th>
    <th style="vertical-align:bottom">Saldo</th>
  </tr>
  <tr>
    <td>Giugno</td>
    <td>￥3400</td>
  </tr>
</table>

Prova personalmente

Esempio 7

Come impostare la larghezza della cella di intestazione della tabella (usando CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Mese</th>
    <th style="width:30%">Saldo</th>
  </tr>
  <tr>
    <td>Giugno</td>
    <td>￥3400</td>
  </tr>
</table>

Prova personalmente

Esempio 8

Come creare un'intestazione per la tabella:

<table>
  <tr>
    <th>Nome</th>
    <th>Posta elettronica</th>
    <th>Telefono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Prova personalmente

Esempio 9

Come creare una tabella con intestazione:

<table>
  <caption>Saldo mensile</caption>
  <tr>
    <th>Mese</th>
    <th>Saldo</th>
  </tr>
  <tr>
    <td>Giugno</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febbraio</td>
    <td>￥4500</td>
  </tr>
</table>

Prova personalmente

Esempio 10

Come definire una cella di tabella che copre più righe o colonne:

<table>
  <tr>
    <th>Nome</th>
    <th>Posta elettronica</th>
    <th colspan="2">Telefono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Prova personalmente

Proprietà

Proprietà Valore Descrizione
abbr Testo Si stabilisce una versione abbreviata del contenuto della cella di intestazione.
colspan Numero Si stabilisce il numero di colonne che la cella di intestazione deve coprire.
headers header_id Si stabilisce una o più celle di intestazione correlate alla cella.
rowspan Numero Si stabilisce il numero di righe che il cella di intestazione deve coprire.
scope
  • col
  • colgroup
  • row
  • rowgroup
 La cella di intestazione è una testa di colonna, una testa di riga o una testa di un gruppo di colonne o righe.

Attributi globali

<th> Il tag supporta anche Attributi globali in HTML.

Attributi eventi

<th> Il tag supporta anche Attributi eventi in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser visualizzerà i seguenti valori predefiniti <th> Elemento:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto