Cabeçalhos de tabelas HTML

Tabelas / Tutorial HTML5

Como adicionar cabeçalhos à tabela HTML?

Utilize o elemento th para marcar as células de cabeçalho. O elemento th é usado para definir cabeçalhos de células em uma tabela. Ele é geralmente exibido em negrito e centralizado.

Cabeçalhos horizontais

Neste exemplo, os cabeçalhos horizontais são definidos na primeira linha da tabela usando o elemento th.

<table style="border-collapse:collapse; width: 100%">
  <tr>
    <th>SEG</th>
    <th>TER</th>
    <th>QUA</th>
    <th>QUI</th>
    <th>SEX</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

Cabeçalhos verticais

Neste exemplo, os cabeçalhos verticais são definidos na primeira coluna de cada linha usando o elemento th.

<table style="border-collapse:collapse; width: 100%">
  <tr>
    <th></th>
    <th>SEG</th>
    <th>TER</th>
    <th>QUA</th>
    <th>QUI</th>
    <th>SEX</th>
  </tr>
  <tr>
    <th>8:00</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>9:00</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>10:00</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Legenda da tabela

Neste exemplo, a legenda da tabela é definida usando o elemento caption. A legenda fornece uma descrição breve da tabela.

<table style="border-collapse:collapse; width: 100%">
  <caption>Economias mensais</caption>
  <tr>
    <th>Mês</th>
    <th>Economias</th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>R$100</td>
  </tr>
  <tr>
    <td>Fevereiro</td>
    <td>R$50</td>
  </tr>
</table>

Utilize a propriedade do CSS caption-side para alinhar a legenda da tabela. Por exemplo, para alinhar a legenda na parte inferior da tabela:

<table style="border-collapse:collapse; width: 100%">
  <caption style="caption-side: top;">Economias mensais</caption>
  <tr>
    <th>Mês</th>
    <th>Economias</th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>R$100</td>
  </tr>
  <tr>
    <td>Fevereiro</td>
    <td>R$50</td>
  </tr>
</table>