HTML – 13/04/2026 – TABELAS

Por /

TABELAS

As tabelas em HTML são usadas para organizar dados em formato de linhas e colunas, sendo muito úteis para exibir informações como notas, listas, preços, horários, entre outros.

🧱 Estrutura básica de uma tabela

Uma tabela é criada com a tag <table>. Dentro dela, usamos outras tags para organizar os dados:

<table>
    <tr>
        <td>Dado 1</td>
        <td>Dado 2</td>
    </tr>
</table>

🔹 Principais tags:

  • <table> → Define a tabela
  • <tr> (table row) → Linha da tabela
  • <td> (table data) → Célula de dados
  • <th> (table header) → Célula de cabeçalho (negrito e centralizado)

🧾 Exemplo completo

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

🧩 Organização semântica

Para melhorar a organização e acessibilidade, usamos:

  • <thead> → Cabeçalho da tabela
  • <tbody> → Corpo da tabela
  • <tfoot> → Rodapé da tabela
<table border="1">
    <thead>
        <tr>
            <th>Produto</th>
            <th>Preço</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Pão</td>
            <td>R$ 2,00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>R$ 2,00</td>
        </tr>
    </tfoot>
</table>

🔀 Mesclagem de células

🔹 colspan (colunas)

Une colunas:

<td colspan="2">Texto ocupando 2 colunas</td>

🔹 rowspan (linhas)

Une linhas:

<td rowspan="2">Texto ocupando 2 linhas</td>

🎨 Estilizando com CSS

Evite usar border no HTML. Use CSS:

<style>
table {
    border-collapse: collapse;
    width: 100%;
}th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}th {
    background-color: #ddd;
}
</style>

⚠️ Boas práticas

  • Use tabelas apenas para dados tabulares, não para layout de páginas
  • Utilize <th> para cabeçalhos (melhora acessibilidade)
  • Organize com <thead>, <tbody> e <tfoot>
  • Prefira CSS para estilização
  • Mantenha o código indentado e organizado

📌 Resumo

  • Tabelas organizam dados em linhas e colunas
  • Principais tags: <table>, <tr>, <td>, <th>
  • Tags semânticas: <thead>, <tbody>, <tfoot>
  • Mesclagem com colspan e rowspan
  • Estilização deve ser feita com CSS

ATIVIDADE DE LABORATÓRIO

  1. Crie uma tabela com 2 linhas e 2 colunas usando as tags <table>, <tr> e <td>.
  2. Crie uma tabela e insira 3 alunos. Use a tag <th> na primeira linha para criar as colunas Nome, Idade e Curso.
  3. Crie uma tabela de produtos com colunas NOME, PREÇO e TOTAL, use <thead>, <tbody> e na ultima linha “TOTAL” use a tag <tfoot>.
  4. Recrie a tabela de horários abaixo utilizando <table>, <tr>, <td>, colspan e rowspan.
    Use rowspan="2" para a aula dupla (Matemática)
    Use colspan="3" para o recreio ocupando todas as colunas
Rolar para cima