Etiqueta <th> HTML

Definição e uso

<th> A tag <th> define a célula de título da tabela do HTML.

O HTML tem dois tipos de células de tabela:

  • Célula de título - contém informações de título (usando <th> criação do elemento)
  • Célula de dados - contém dados (usando <td> criação do elemento)

Por padrão:<th> O texto dentro do elemento é em negrito e centralizado.

Por padrão, o texto dentro do elemento <td> é normal e alinhado à esquerda.

Veja também:

Tutorial de HTML:Tabela HTML

Manual de referência do HTML DOM:Objeto TableHeader

Tutorial de CSS:Definir o estilo do formulário

Exemplo

Exemplo 1

Uma tabela HTML simples com três linhas, duas células de título e quatro células de dados:

<table>
  <tr>
    <th>Mês</th>
    <th>Saldo</th>
  </tr>
  <tr>
    <td Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 2

Como alinhar <th> do conteúdo (usando CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Mês</th>
    <th style="text-align:left">A poupança</th>
  </tr>
  <tr>
    <td Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 3

Como adicionar cor de fundo à célula de título da tabela (usando CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Mês</th>
    <th style="background-color:#00FF00">A poupança</th>
  </tr>
  <tr>
    <td Janeiro</td>
    <td>￥3400</td>
  </tr>
 </table>

Experimente você mesmo

Exemplo 4

Como ajustar a altura da célula de título da tabela (usando CSS):

<table>
  <tr>
    <th style="height:100px">Mês</th>
    <th style="height:100px">Saldo</th>
  </tr>
  <tr>
    <td Janeiro</td>
    <td>￥3400</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 5

Como especificar que a célula de cabeçalho da tabela não deve quebrar linha (usando CSS):

<table>
  <tr>
    <th>Mês</th>
    <th style="white-space:nowrap">Dinheiro poupado para novo carro</th>
  </tr>
  <tr>
    <td Janeiro</td>
    <td>￥3400</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 6

Como alinhar verticalmente <th> do conteúdo (usando CSS):

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

Experimente você mesmo

Exemplo 7

Como definir a largura da célula de cabeçalho da tabela (usando CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Mês</th>
    <th style="width:30%">Saldo</th>
  </tr>
  <tr>
    <td Janeiro</td>
    <td>￥3400</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 8

Como criar um cabeçalho de tabela:

<table>
  <tr>
    <th>Nome</th>
    <th>E-mail</th>
    <th>Telefone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 9

Como criar uma tabela com cabeçalho:

<table>
  <caption>Saldo mensal</caption>
  <tr>
    <th>Mês</th>
    <th>Saldo</th>
  </tr>
  <tr>
    <td Janeiro</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td Fevereiro</td>
    <td>￥4500</td>
  </tr>
</table>

Experimente você mesmo

Exemplo 10

Como definir células de tabela que ultrapassam várias linhas ou colunas:

<table>
  <tr>
    <th>Nome</th>
    <th>E-mail</th>
    <th colspan="2">Telefone</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>

Experimente você mesmo

Atributo

Atributo Valor Descrição
abbr Texto Determina a versão abreviada do conteúdo da célula de cabeçalho.
colspan Número Determina o número de colunas que a célula de cabeçalho deve cruzar.
headers header_id Determina uma ou mais células de cabeçalho relacionadas à célula.
rowspan Número Determina o número de linhas que a célula de cabeçalho deve cruzar.
scope
  • col
  • colgroup
  • row
  • rowgroup
 A célula de cabeçalho é um cabeçalho de coluna, cabeçalho de linha ou um grupo de cabeçalhos de coluna ou linha.

Atributos globais

<th> A tag também suporta Atributos globais no HTML.

Atributos de evento

<th> A tag também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <th> Elemento:

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

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte