Como Criar Tabelas HTML: Guia Prático e Completo!!

As tabelas em HTMLO que é HTML? Fundamentos, História e Evolução da LinguagemDescubra a origem e evolução do HTML, entendendo sua importância na estrutura da web e como influenciou o desenvolvimento digital moderno. são usadas para organizar dados em linhas e colunas, facilitando a visualização de informações. Neste tutorial, você aprenderá a criar estruturas de tabela utilizando as tags <table>, <tr>, <td> e <th>. Vamos explorar cada uma dessas tagsTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. e entender como elas funcionam.

Por que usar tabelas?🔗

O principal objetivo de uma tabela é dispor dados de maneira estruturada. Por exemplo, imagine uma listaListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão. de produtos com nome e preço. Exibir essas informações em formato de tabela pode tornar a leitura muito mais agradável.

A Tag `<table>`🔗

A tagTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. <table> é o contêiner principal da tabela. Ela representa toda a estrutura onde as linhas de dados serão inseridas.

Exemplo simples de uma tabela vazia:

<table>
    <!-- Aqui dentro adicionamos as linhas (<tr>) e as células (<td> ou <th>) -->
</table>

Criando Linhas com `<tr>`🔗

Cada linha da tabela é escrita dentro de um elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. <tr>. Pense em <tr> como uma forma de agrupar as células em uma só linha.

Exemplo de uma tabela com duas linhas:

<table>
    <tr>
        <!-- Células da primeira linha -->
    </tr>
    <tr>
        <!-- Células da segunda linha -->
    </tr>
</table>

Adicionando Células com `<td>`🔗

A <td> (table data) é a célula comum da tabela, onde cada informação é colocada. Em cada linha (tr), você cria várias <td> para formar as colunas.

Exemplo de uma tabela com duas linhas e duas colunas (sem cabeçalhosFormatação de Texto: `<p>`, `<h1>-<h6>`, `<strong>`, `<em>`Aprenda a formatar textos em HTML com tags de parágrafo, títulos e destaques, organizando seu conteúdo e garantindo semântica.):

<table>
    <tr>
        <td>Lápis</td>
        <td>R$ 1,00</td>
    </tr>
    <tr>
        <td>Caneta</td>
        <td>R$ 2,50</td>
    </tr>
</table>

Definindo Cabeçalhos com `<th>`🔗

Em vez de <td>, você pode usar <th> (table header) para indicar que aquela célula é um título ou cabeçalhoFormatação de Texto: `<p>`, `<h1>-<h6>`, `<strong>`, `<em>`Aprenda a formatar textos em HTML com tags de parágrafo, títulos e destaques, organizando seu conteúdo e garantindo semântica. de coluna ou linha. Geralmente, navegadores deixam o texto em negrito dentro de um <th> para destacar que é um cabeçalhoFormatação de Texto: `<p>`, `<h1>-<h6>`, `<strong>`, `<em>`Aprenda a formatar textos em HTML com tags de parágrafo, títulos e destaques, organizando seu conteúdo e garantindo semântica..

Exemplo de tabela com cabeçalhosFormatação de Texto: `<p>`, `<h1>-<h6>`, `<strong>`, `<em>`Aprenda a formatar textos em HTML com tags de parágrafo, títulos e destaques, organizando seu conteúdo e garantindo semântica.:

<table>
    <tr>
        <th>Produto</th>
        <th>Preço</th>
    </tr>
    <tr>
        <td>Lápis</td>
        <td>R$ 1,00</td>
    </tr>
    <tr>
        <td>Caneta</td>
        <td>R$ 2,50</td>
    </tr>
</table>

Dica: Usar <th> melhora não só a aparência, mas também a acessibilidade da página, pois ajuda leitores de tela a interpretar os significados das células.

Exemplo Completo🔗

A seguir, um exemplo de tabela simples que compara diferentes produtos e seus respectivos preços:

<table>
    <tr>
        <th>Produto</th>
        <th>Preço</th>
    </tr>
    <tr>
        <td>Lápis</td>
        <td>R$ 1,00</td>
    </tr>
    <tr>
        <td>Caneta Azul</td>
        <td>R$ 2,50</td>
    </tr>
    <tr>
        <td>Caderno</td>
        <td>R$ 15,00</td>
    </tr>
</table>

Resultado esperado: