O que significam TH, TR e TD em tabelas de HTML?

Hello, there! Se você já criou tabelas em HTML, então com certeza já se deparou com as tags TH, TR e TD.

Essas tags são essenciais para estruturar dados em forma de tabela, e entender o que cada uma delas significa e como utilizá-las corretamente é fundamental para criar tabelas funcionais e visualmente agradáveis.

Então, vamos explorar o que significam TH, TR e TD e aprender como usá-las de maneira simples e prática? Let's go!

O que significam TH, TR e TD em tabelas de HTML?

TH: Table Header (Cabeçalho da Tabela)

A tag <th> significa "table header" em inglês, ou seja, "cabeçalho da tabela". Como o próprio nome diz, essa tag é usada para definir o cabeçalho de uma tabela, ou seja, ela identifica as células que servem como títulos para colunas ou linhas. O texto dentro de <th> é, por padrão, exibido em negrito e centralizado.

Por exemplo, em uma tabela com alunos de uma escola, podemos usar <th> para identificar colunas como "Nome" e "Idade". Like this:

    <table>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
        </tr>
    </table>

Neste caso, o <th> indica que esses são os títulos das colunas.

TR: Table Row (Linha da Tabela)

A tag <tr> significa "table row", ou seja, "linha da tabela". A palavra row, em inglês, indica linhas de segmentos, como fileiras de assentos em um cinema ou fileiras de carros em um estacionamento.

No caso de uma tabela, ela é usada para criar uma nova linha. Cada <tr> cria um novo conjunto de células que formam uma linha, sejam elas células de cabeçalho (<th>) ou de dados (<td>).

Por exemplo, podemos continuar a tabela do exemplo anterior da seguinte forma:

    <table>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
        </tr>
        <tr>
            <td>João</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>30</td>
        </tr>
    </table>

Nesse caso, como cada <tr> indica uma linha da tabela, teremos 3 linhas diferentes: a primeira com o cabeçalho indicando "Nome" e "Idade", a segunda com as informações do João, e a terceira linha com as informações da Maria.

TD: Table Data (Dados da Tabela)

Por último, a tag <td> é usada para definir as células que contêm os dados dentro de uma tabela. Ou seja, depois de abrirmos uma nova linha na tabela (isto é, uma nova tag <tr>), precisamos inserir cada um dos dados das células através de uma tag <td>.

Diferente de <th>, as células de <td> não são centralizadas nem exibidas em negrito por padrão.

Observe no exemplo acima as informações sobre o João e a Maria. Cada um desses dados é inserido em uma tag <td>. Dessa forma, a tabela final ficará desse jeito:

Very interesting, right? Com essas três tags, você pode criar tabelas organizadas e claras em seus projetos!

Did you already know the meaning of these tags in English? (Você já conhecia o significado dessas tags em inglês?)

Continue estudando com a gente no nosso artigo "Você sabe o que é SDLC em programação?". See you!

Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!

Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.