7.1 Tag <caption>
As tags <caption>, <thead>, <tbody> e <tfoot> são usadas
para melhorar a estrutura e a marcação semântica de tabelas em HTML. Eles ajudam a organizar os dados, tornando as tabelas
mais compreensíveis e acessíveis tanto para os usuários quanto para os motores de busca.
Tag <caption>
A tag <caption> é usada para adicionar um título à tabela. Ela ajuda a descrever o conteúdo da tabela, tornando-a
mais compreensível para os usuários e acessível para os motores de busca.
Sintaxe:
<table>
<caption>Título da tabela</caption>
<!-- Conteúdo da tabela -->
</table>
Exemplo:
<table>
<caption>Título da tabela</caption>
<tr>
<th>Nome</th>
<th>Nota</th>
</tr>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</table>
7.2 Tag <thead>
A tag <thead> é usada para agrupar as linhas de cabeçalho da tabela. Ela ajuda a separar logicamente
o cabeçalho do conteúdo principal da tabela.
Sintaxe:
<table>
<thead>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
</thead>
<!-- Conteúdo da tabela -->
</table>
Exemplo:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 Tag <tbody>
A tag <tbody> é usada para agrupar a parte principal do conteúdo da tabela. Ela ajuda a separar
o conteúdo principal do cabeçalho e do "rodapé" da tabela.
Sintaxe:
<table>
<thead>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
</thead>
<tbody>
<!-- Conteúdo da tabela -->
</tbody>
</table>
Exemplo:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 Tag <tfoot>
A tag <tfoot> é usada para agrupar as linhas do "rodapé" da tabela. Ela geralmente contém
informações de resumo ou totalização.
Sintaxe:
<table>
<thead>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
</thead>
<tbody>
<!-- Conteúdo da tabela -->
</tbody>
<tfoot>
<tr>
<td>Total 1</td>
<td>Total 2</td>
</tr>
</tfoot>
</table>
Exemplo completo:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Média</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Lembrar-se disso é realmente muito simples:
Explicação da estrutura da tabela
<table>: contêiner externo para toda a tabela<caption>: título da tabela que ajuda a descrever seu conteúdo<thead>: agrupa as linhas de cabeçalho da tabela<tbody>: agrupa o conteúdo principal da tabela<tfoot>: agrupa as linhas do rodapé da tabela
Reforçando o material
Vamos criar uma tabela com todas as tags estudadas e estilizar ela.
<table>
<caption>Resultados do exame</caption>
<thead>
<tr>
<th>Nome</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Média</td >
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION