As tabelas em HTML são uma ferramenta versátil para organizar e exibir dados de forma clara e estruturada. Neste guia, vamos explorar o processo de criação e utilização de tabelas em HTML, com exemplos práticos e explicações detalhadas sobre o papel de cada tag relacionada. Vamos começar!
Conteudo
1. Estrutura Básica de uma Tabela HTML
A estrutura básica de uma tabela HTML é composta pelas seguintes tags:
<table></table>: Define o início e o fim da tabela.<tr></tr>: Define uma linha dentro da tabela.<th></th>: Define o cabeçalho de uma coluna.<td></td>: Define uma célula de dados.
Exemplo básico:
<table border="1">
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Profissão</th>
</tr>
<tr>
<td>Albert</td>
<td>27</td>
<td>Escritor</td>
</tr>
<tr>
<td>Jim</td>
<td>57</td>
<td>Ator</td>
</tr>
</table>
2. Tags e Atributos Importantes
<caption>: Adiciona um título à tabela.<thead>: Agrupa o cabeçalho da tabela.<tbody>: Agrupa o corpo da tabela.<tfoot>: Agrupa o rodapé da tabela.<colgroup>e<col>: Definem grupos de colunas para formatação.
Exemplo com mais tags:
<table border="1">
<caption>Exemplo de Tabela</caption>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Profissão</th>
</tr>
</thead>
<tbody>
<tr>
<td>Albert</td>
<td>27</td>
<td>Escritor</td>
</tr>
<tr>
<td>Jim</td>
<td>57</td>
<td>Ator</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 2 pessoas</td>
</tr>
</tfoot>
</table>
3. Explicação Detalhada de Cada Tag
<table>: Define o início e o fim da tabela. Todos os elementos da tabela devem estar contidos dentro desta tag.<tr>: Representa uma linha na tabela. Cada linha pode conter uma ou mais células de dados (<td>) ou cabeçalhos de coluna (<th>).<th>: Define uma célula de cabeçalho. O texto dentro de<th>é, por padrão, exibido em negrito e centralizado.<td>: Define uma célula de dados, que pode conter texto, imagens, links, listas e outros elementos HTML.<caption>: Adiciona um título à tabela, visível acima da tabela.<colgroup>: Define um grupo de uma ou mais colunas na tabela para formatação.<col>: Especifica propriedades de coluna para cada coluna dentro de um elemento<colgroup>.<thead>: Agrupa o conteúdo do cabeçalho da tabela.<tbody>: Agrupa o conteúdo do corpo da tabela.<tfoot>: Agrupa o conteúdo do rodapé da tabela.
4. Estilizando Tabelas com CSS
Para melhorar a aparência das tabelas, podemos usar CSS:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
th {
background-color: #80ee11;
}5. Exemplos Práticos
Aqui estão alguns exemplos práticos de tabelas em HTML:
Tabela de Produtos:
<table border="1">
<thead>
<tr>
<th>Produto</th>
<th>Preço</th>
<th>Quantidade</th>
<th>Total</th>
<th>Validade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>R$ 3000</td>
<td>5</td>
<td>R$ 15000</td>
<td>10/10/2020</td>
</tr>
<tr>
<td>Mouse</td>
<td>R$ 50</td>
<td>20</td>
<td>R$ 1000</td>
<td>10/10/2020</td>
</tr>
<tr>
<td>Teclado</td>
<td>R$ 100</td>
<td>10</td>
<td>R$ 1000</td>
<td>10/10/2020</td>
</tr>
<tr>
<td>Monitor</td>
<td>R$ 500</td>
<td>5</td>
<td>R$ 2500</td>
<td>10/10/2020</td>
</tr>
</tbody>
</table>Exemplo estilizado
| Produto | Preço | Quantidade | Total | Validade |
|---|---|---|---|---|
| Notebook | R$ 3000 | 5 | R$ 15000 | 10/10/2020 |
| Mouse | R$ 50 | 20 | R$ 1000 | 10/10/2020 |
| Teclado | R$ 100 | 10 | R$ 1000 | 10/10/2020 |
| Monitor | R$ 500 | 5 | R$ 2500 | 10/10/2020 |
Tabela de Notas de Alunos:
<table border="1">
<thead>
<tr>
<th>Aluno</th>
<th>Matemática</th>
<th>Português</th>
<th>Ciências</th>
<th>Geografia</th>
<th>História</th>
<th>Media geral</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>9.5</td>
<td>8.0</td>
<td>7.5</td>
<td>8.0</td>
<td>9.0</td>
<td>8.4</td>
</tr>
<tr>
<td>Bruno</td>
<td>7.0</td>
<td>6.5</td>
<td>8.0</td>
<td>7.5</td>
<td>6.0</td>
<td>7.0</td>
</tr>
<tr>
<td>Carla</td>
<td>6.0</td>
<td>7.5</td>
<td>8.0</td>
<td>7.5</td>
<td>8.0</td>
<td>7.4</td>
</tr>
<tr>
<td>David</td>
<td>8.0</td>
<td>7.5</td>
<td>8.0</td>
<td>7.5</td>
<td>8.0</td>
<td>7.8</td>
</tr>
<tr>
<td>Elaine</td>
<td>7.0</td>
<td>6.5</td>
<td>8.0</td>
<td>7.5</td>
<td>6.0</td>
<td>7.0</td>
</tr>
</tbody>
</table>Exemplo estilizado
| Aluno | Matemática | Português | Ciências | Geografia | História | Media geral |
|---|---|---|---|---|---|---|
| Ana | 9.5 | 8.0 | 7.5 | 8.0 | 9.0 | 8.4 |
| Bruno | 7.0 | 6.5 | 8.0 | 7.5 | 6.0 | 7.0 |
| Carla | 6.0 | 7.5 | 8.0 | 7.5 | 8.0 | 7.4 |
| David | 8.0 | 7.5 | 8.0 | 7.5 | 8.0 | 7.8 |
| Elaine | 7.0 | 6.5 | 8.0 | 7.5 | 6.0 | 7.0 |
6. Exemplos de Acessibilidade em Tabelas HTML
A acessibilidade é essencial para garantir que todos os usuários, incluindo aqueles com deficiências, possam acessar e interagir com o conteúdo da web. Aqui estão algumas práticas recomendadas para tornar suas tabelas mais acessíveis:
1. Uso de <caption>
A tag <caption> fornece um título descritivo para a tabela, ajudando os usuários de leitores de tela a entender o propósito da tabela.
<table border="1">
<caption>Notas dos Alunos</caption>
<thead>
<tr>
<th>Aluno</th>
<th>Matemática</th>
<th>Português</th>
<th>Ciências</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>9.5</td>
<td>8.0</td>
<td>7.5</td>
</tr>
<tr>
<td>Bruno</td>
<td>7.0</td>
<td>6.5</td>
<td>8.0</td>
</tr>
</tbody>
</table>
| Aluno | Matemática | Português | Ciências |
|---|---|---|---|
| Ana | 9.5 | 8.0 | 7.5 |
| Bruno | 7.0 | 6.5 | 8.0 |