HTML <th> Tag
Exemplo
Uma tabela HTML simples com três linhas, duas células de cabeçalho e quatro células de dados:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A <th>tag define uma célula de cabeçalho em uma tabela HTML.
Uma tabela HTML tem dois tipos de células:
- Células de cabeçalho - contém informações de cabeçalho (criadas com o
<th>elemento) - Células de dados - contém dados (criados com o elemento <td> )
O texto nos <th>elementos está em negrito e centralizado por padrão.
O texto nos elementos <td> são regulares e alinhados à esquerda por padrão.
Suporte ao navegador
| Element | |||||
|---|---|---|---|---|---|
| <th> | Yes | Yes | Yes | Yes | Yes |
Atributos
| Attribute | Value | Description |
|---|---|---|
| abbr | text | Specifies an abbreviated version of the content in a header cell |
| colspan | number | Specifies the number of columns a header cell should span |
| headers | header_id | Specifies one or more header cells a cell is related to |
| rowspan | number | Specifies the number of rows a header cell should span |
| scope | col colgroup row rowgroup |
Specifies whether a header cell is a header for a column, row, or group of columns or rows |
Atributos Globais
A <th>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <th>tag também suporta os atributos de evento em HTML .
Mais exemplos
Exemplo
Como alinhar conteúdo dentro de <th> (com CSS):
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th
style="text-align:left">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Exemplo
Como adicionar cor de fundo à célula do cabeçalho da tabela (com CSS):
<table>
<tr>
<th
style="background-color:#FF0000">Month</th>
<th style="background-color:#00FF00">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Exemplo
Como definir a altura de uma célula de cabeçalho de tabela (com CSS):
<table>
<tr>
<th
style="height:100px">Month</th>
<th style="height:100px">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Exemplo
Como especificar sem quebra de palavras na célula do cabeçalho da tabela (com CSS):
<table>
<tr>
<th>Month</th>
<th style="white-space:nowrap">My Savings for a new car</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Exemplo
Como alinhar verticalmente o conteúdo dentro de <th> (com CSS):
<table style="width:50%;">
<tr
style="height:100px">
<th style="vertical-align:bottom">Month</th>
<th
style="vertical-align:bottom">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Exemplo
Como definir a largura de uma célula de cabeçalho de tabela (com CSS):
<table style="width:100%">
<tr>
<th style="width:70%">Month</th>
<th
style="width:30%">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Exemplo
Como criar cabeçalhos de tabela:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
Exemplo
Como criar uma tabela com uma legenda:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Exemplo
Como definir células de tabela que abrangem mais de uma linha ou uma coluna:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
Páginas relacionadas
Tutorial HTML: Tabelas HTML
Referência HTML DOM: objeto TableHeader
Tutorial CSS: Estilizando Tabelas
Configurações padrão de CSS
A maioria dos navegadores exibirá o <th>elemento com os seguintes valores padrão:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}