Cabeçalhos de tabela HTML
As tabelas HTML podem ter cabeçalhos para cada coluna ou linha, ou para muitas colunas/linhas.
| EMIL | TOBIAS | LINUS |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| SEG | TER | CASAR | RECOLHER | SEX | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| DEZEMBRO | ||
|---|---|---|
Cabeçalhos de tabela HTML
Os cabeçalhos das tabelas são definidos com thelementos, cada thelemento representa uma célula da tabela.
Exemplo
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Cabeçalhos de tabela vertical
Para usar a primeira coluna como cabeçalho de tabela, defina a primeira célula em cada linha como um thelemento:
Exemplo
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Alinhar cabeçalhos de tabela
Por padrão, os cabeçalhos das tabelas estão em negrito e centralizados:
| Primeiro nome | Último nome | Era |
|---|---|---|
| Jill | Smith | 50 |
| véspera | Jackson | 94 |
Para alinhar à esquerda os cabeçalhos da tabela, use a text-alignpropriedade CSS:
Exemplo
th {
text-align: left;
}
Cabeçalho para várias colunas
Você pode ter um cabeçalho que se estende por duas ou mais colunas.
| Nome | Era | |
|---|---|---|
| Jill | Smith | 50 |
| véspera | Jackson | 94 |
Para fazer isso, use o colspanatributo no
<th>elemento:
Exemplo
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Você aprenderá mais sobre colspan e rowspan no capítulo Table colspan & rowspan .
Legenda da tabela
Você pode adicionar uma legenda que serve como cabeçalho para toda a tabela.
| Mês | Poupança |
|---|---|
| Janeiro | $ 100 |
| fevereiro | $ 50 |
Para adicionar uma legenda a uma tabela, use a <caption>tag:
Exemplo
<table style="width:100%">
<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>$50</td>
</tr>
</table>
Nota: A <caption>tag deve ser inserida imediatamente após a <table>tag.