Tabela HTML: Como Criar e Usar Tabelas em HTML

Sinopse

As tabelas em HTML são usadas para organizar e apresentar dados de forma estruturada em linhas e colunas, facilitando a visualização e a compreensão das informações.

Documentação

A tag <table> é a estrutura básica para criar tabelas em HTML. Dentro dessa tag, utilizamos outras tags como <tr> para definir uma linha, <th> para os cabeçalhos das colunas e <td> para as células que contêm dados.

Uso

Para criar uma tabela, você deve seguir a seguinte estrutura básica:

<table>
    <tr>
        <th>Cabeçalho 1</th>
        <th>Cabeçalho 2</th>
    </tr>
    <tr>
        <td>Dado 1</td>
        <td>Dado 2</td>
    </tr>
</table>

Detalhes

• <table>: Inicia a tabela.
• <tr>: Define uma nova linha na tabela.
• <th>: Define uma célula de cabeçalho, que geralmente é exibida em negrito e centralizada.
• <td>: Define uma célula de dados.

Você pode adicionar atributos como border, cellpadding, e cellspacing para controlar o estilo da tabela, embora o uso de CSS seja recomendado para uma melhor apresentação.

Exemplos

Exemplo Básico

<table border="1">
    <tr>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Bruno</td>
        <td>25</td>
    </tr>
</table>

Exemplo com Atributos

<table style="width:100%; border-collapse:collapse;">
    <tr>
        <th style="background-color:lightgray;">Produto</th>
        <th style="background-color:lightgray;">Preço</th>
    </tr>
    <tr>
        <td>Produto A</td>
        <td>R$ 10,00</td>
    </tr>
    <tr>
        <td>Produto B</td>
        <td>R$ 20,00</td>
    </tr>
</table>

Explicação

Ao trabalhar com tabelas em HTML, é importante evitar algumas armadilhas comuns:

1. Falta de Acessibilidade: Sempre que possível, utilize a tag <caption> para fornecer um título à tabela, o que ajuda na acessibilidade.
2. Uso de Estilos: Evite definir estilos diretamente nas tags HTML. Prefira utilizar CSS externo ou interno para uma melhor manutenção do código.
3. Sem Linhas e Células Definidas: Lembre-se de que cada linha deve conter o mesmo número de células, caso contrário, a tabela pode não ser renderizada corretamente.

Resumo em Uma Frase

A tag <table> em HTML é fundamental para a criação de tabelas, permitindo a organização de dados em um formato de fácil leitura e compreensão.