Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Aula 4- TAGS thead, tbody e tfoot

Ao realizar as atividades me deparei com as seguinte pergunta: "Ao escrever uma tabela podemos usar algumas tags chamadas thead, tbody e tfoot. Para quê elas servem e visualmente qual o resultado delas?"

Porém nem na vídeo aula e nem na "apostila" escrita eu encontrei para que serve essas tags e como utiliza-las, poderiam me ajudar, por favor, caso esteja no conteúdo, podem me informar onde eu localizo, pelo exemplo na apostila entendi que elas são utilizadas em tabelas, mas gostaria de uma melhor explicação.

3 respostas

Oi Jacqueline, tudo bom?

Essas tags servem para que você possa separar o conteudo da sua tabela e adicionar um cabeçalho especifico para a tabela(thead). A mesma ideia pro corpo (tbody) e rodapé (tfooter) =)

Utilizando essas tags os navegadores podem habilitar o scroll do conteudo da tabela independente do cabeçalho e rodape. Além disso, se você for trabalhar com uma tabela grande, com paginação, esses elementos permitem que você imprima apenas o header e footer no topo e rodapé da sua pagina, respectivamente!

Espero ter resolvido sua duvida =)

Abraço e bons estudos!

solução!

Olá, Jacqueline, tudo bem? =)

Vamos lá... =)

Como você mesma já mencionou, todas essas três tags são utilizadas em tabelas - <table>.

Então a estrutura final de uma tabela completa é mais ou menos assim:

<table>
    <thead>
        <tr>
            <th>Título da primeira coluna</th>
            <th>Título da segunda coluna</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Conteúdo da primeira coluna</td>
            <td>Conteúdo da segunda coluna</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Rodapé da primeira coluna</td>
            <td>Rodapé da segunda coluna</td>
        </tr>
    </tfoot>
</table>

Repare que já tentei deixar o conteúdo mais ou menos auto-explicativo...

As três tags que você mencionou são utilizadas para dividir o conteúdo da tabela em três: cabeçalho (<thead>), corpo (<tbody>) e o rodapé (<tfoot>).

Mas repare que ainda tive que colocar uma <tr> em cada um deles, pois elas são meramente simbólicas, enquanto que a <tr> representa uma linha dessa tabela.

Não sei se você chegou a ver a tag <th>, também, que coloquei... Você poderia usar o <td> ao invés dela, que também funcionaria, mas como geralmente usamos o título de cada coluna centralizado e até mesmo em negrito, podemos usar essa tag que fará isso para nós. =)

Além disso, não importa a ordem em que colocamos <thead>, <tbody> e <tfoot> dentro da <table>, pois o browser sempre renderizará nessa ordem - cabeçalho, corpo e, depois, rodapé.

Espero ter ajudado, mas qualquer dúvida não deixe de abrir uma nova thread aqui no fórum para podermos ajudá-la! =)

Abraço e bons estudos,

Fábio

Agora entendi melhor o uso dessas tags, muito obrigada =D