Tabelas no HTML: Como Criar e Estruturar Dados

As tabelas no HTML são uma excelente maneira de organizar informações de forma estruturada em uma página web.

Elas permitem exibir dados em linhas e colunas, sendo muito úteis para relatórios, listas de produtos, tabelas de preços, entre outros.

📌 Neste post, você aprenderá:

✅ Como criar tabelas no HTML.
✅ Como estruturar linhas e colunas corretamente.
✅ Como mesclar células e organizar cabeçalhos, corpo e rodapé.
✅ Como usar CSS para personalizar tabelas.

Vamos começar! 🚀

---

Criando uma Tabela no HTML

Para criar uma tabela no HTML, utilizamos a tag <table>. Dentro dela, definimos:

✔️ Linhas com a tag <tr> (table row).
✔️ Colunas com a tag <td> (table data).
✔️ Cabeçalhos com a tag <th> (table header).

Exemplo de tabela simples:

<table>
    <tr>
        <th>No.</th>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>João da Silva</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Maria Souza</td>
        <td>30</td>
    </tr>
</table>

💡 Dica: O <th> geralmente exibe o texto em negrito e centralizado por padrão nos navegadores.

---

Estilizando Tabelas com CSS

Por padrão, as tabelas não possuem bordas. Podemos adicionar estilos para melhorar a visualização.

Exemplo de tabela estilizada com CSS:

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

Exemplo de aplicação no HTML:

<table>
    <tr>
        <th>No.</th>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>João da Silva</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Maria Souza</td>
        <td>30</td>
    </tr>
</table>

💡 Dica: Use border-collapse: collapse; para remover o espaçamento entre as bordas das células.

---

Mesclando Linhas e Colunas

Às vezes, pode ser necessário mesclar células para criar cabeçalhos ou destacar informações.

Mesclando Colunas (colspan)

Exemplo:

<table>
    <tr>
        <th colspan="2">Nome e Telefone</th>
    </tr>
    <tr>
        <td>João da Silva</td>
        <td>9999-1234</td>
    </tr>
</table>

🔹 Resultado:

Nome e Telefone
João da Silva

---

Mesclando Linhas (rowspan)

Exemplo:

<table>
    <tr>
        <th rowspan="2">Nome</th>
        <td>João</td>
    </tr>
    <tr>
        <td>Maria</td>
    </tr>
</table>

🔹 Resultado:

Nome	João
	Maria

💡 Dica: Use colspan para mesclar colunas e rowspan para mesclar linhas.

---

Adicionando Cabeçalho, Corpo e Rodapé à Tabela

Para uma estrutura correta, podemos dividir a tabela em:

✔️ Cabeçalho (<thead>) → Define o cabeçalho da tabela.
✔️ Corpo (<tbody>) → Contém os dados principais.
✔️ Rodapé (<tfoot>) → Define o rodapé da tabela.

Exemplo de tabela bem estruturada:

<table>
    <thead>
        <tr>
            <th>Produto</th>
            <th>Preço</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Notebook</td>
            <td>R$ 3.000</td>
        </tr>
        <tr>
            <td>Smartphone</td>
            <td>R$ 1.500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>R$ 4.500</td>
        </tr>
    </tfoot>
</table>

💡 Dica: A separação em <thead>, <tbody> e <tfoot> facilita a manipulação com CSS e JavaScript.

---

Adicionando Legenda à Tabela

Podemos adicionar uma legenda usando <caption>.

Exemplo:

<table>
    <caption>Lista de Produtos</caption>
    <tr>
        <th>Produto</th>
        <th>Preço</th>
    </tr>
    <tr>
        <td>Notebook</td>
        <td>R$ 3.000</td>
    </tr>
</table>

💡 Dica: O <caption> sempre deve ser o primeiro elemento dentro da <table>.

---

Melhores Práticas para Tabelas HTML

✔️ Use tabelas apenas para exibir dados tabulares (não para layout).
✔️ Use <thead>, <tbody> e <tfoot> para melhorar a estrutura.
✔️ Adicione legendas (<caption>) para acessibilidade e SEO.
✔️ Evite tabelas muito grandes → Prefira paginação ou scrolling.

---

Conclusão

📌 Resumo do que aprendemos hoje:

✅ Como criar tabelas no HTML.
✅ Como estruturar corretamente com <thead>, <tbody>, <tfoot>.
✅ Como mesclar células usando colspan e rowspan.
✅ Como estilizar tabelas com CSS para melhorar a aparência.

Agora que você domina tabelas no HTML, no próximo post, vamos aprender sobre listas no HTML! 🚀

💬 Dúvidas? Comente abaixo!

Navegação

<< Imagens no HTML: Como Exibir e Manipular Imagens no HTMLListas no HTML: Como Criar e Estruturar Listas OL, UL e DL >>