Carregando...

Tabelas em Html

Postado: 14 de março de 2024 Tempo de Leitura: 2 Minutos

Tabelas em Html – Conheça cada tag da <table> HTML

Como colocar uma tabela no HTML

A tag utilizada para criar uma tabela HTML é a tag <table>, posteriormente fechada com </table>. Dentro dela, incluímos todos os elementos que compõem nossa tabela, ou seja, as células da tabela. Assim sendo, os elementos de uma tabela consistem em outras tags que poderão ser utilizadas.

Uma tabela no HTML é formada por três tags básicas que são: <table>, <tr> e <td>

Tag <table> significa “tabela” indica onde começa e termina uma tabela;

Tag <tr> significa “table row” linha de tabela e indica onde começa e termina e uma linha horizontal da tabela;

Tag <td> significa “table data” dados da tabela e indica onde começa e termina cada célula contida nas linhas da tabela.

A tag <table> define uma tabela HTML.

Uma tabela HTML consiste em um <table> elemento e um ou mais elementos <tr> , <th> e <td> .

O elemento <tr> define uma linha da tabela, o elemento <th> define um cabeçalho da tabela e o elemento <td> define uma célula da tabela.

Uma tabela HTML também pode incluir elementos <caption> , <colgroup> , <thead> , <tfoot> e <tbody> .

Veja o Exemplo na Prática.

<table>
    
    <caption>Front-End</caption>
    
    <tr>
        <th>Html</th>
        <th>Css</th>
        <th>jQuery</th>
    </tr>
    
    <tr>
        <td>Table</td>
        <td>Responsivo</td>
        <td>FadeIn</td>
    </tr>
    
    <tr>
        <td>Article</td>
        <td>Hoverlay</td>
        <td>FadeOut</td>
    </tr>
    
    <tr>
        <td>Form</td>
        <td>Loading</td>
        <td>Toggle </td>
    </tr>

</table>

No exemplo acima começamos uma tabela com a tag <table> e em seguida utilizamos a tag <tr> indicando o início de uma linha;

Dentro dessa primeira linha da tabela inserimos cinco células colunas que são representados pelo conjunto de tags <td> e </td>, que são responsáveis por exibir o conteúdo de cada célula no navegador.

A primeira linha termina com a tag </tr> e uma nova linha começa imediatamente com a tag <tr>, seguindo a mesma estrutura da linha anterior e, ao final dela, temos a tag <table> indicando o fim da tabela.

Definição de cada tag !

<table> – Define uma tabela

<th> – Define um cabeçalho de tabela

<tr> – Define uma linha de tabela

<td> – Define uma célula de tabela

<caption> – Define um título de tabela

<colgroup> – Define um grupo de colunas de tabela

<col> – Define um cabeçalho de tabela

<tbody> – Define o corpo de uma tabela

<tfoot> – Defines o rodapé (footer) de uma tabela

As tabelas são úteis para várias tarefas, como apresentar informações de texto e dados numéricos. Ele pode ser usado para comparar dois ou mais itens no layout de formulário tabular. As tabelas são usadas para criar bancos de dados.

Veja o exemplo no código Html

  <table>
        <tr>
            <th>Front-end</th>
            <th>Back-end</th>
            <th>Sites</th>
        </tr>
        <tr>
            <td>Html</td>
            <td>PHP</td>
            <td>Onepage</td>
        </tr>
        <tr>
            <td>Css</td>
            <td>MySql</td>
            <td>Templates</td>
        </tr>
        <tr>
            <td>jQuery</td>
            <td>Banco de Dados</td>
            <td>Sites Responsivos</td>
        </tr>
    </table>

Neste artigo abordamos sobre a tag Html table.

Tabelas em Html

Veja outros artigos Relacionados a Tabelas.

HTML colgroup

Criando o efeito zebra em tabelas com JQuery

Como Estilizar uma Tabela Html com Css.

HTML col

Publicado por: Loop Nerd

1.413 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados