Introdução ao HTML5

Nessa aula vamos falar um pouco sobre as Tabelas que são uma boa forma de organizar dados em linhas e colunas em uma página HTML.

Portanto, usamos para exibir dados que chamamos de tabulares como listas de produtos, ou detalhes de clientes, relatórios, entre outras dezenas de possibilidades.

Para criar uma tabela no HTML, usamos o elemento <table>, para definir linhas usamos elementos <tr>, em seguida, usamos o elemento <td>para definir as colunas.

Há também a possibilidade de definir, geralmente, a primeira linha como cabeçalho e, ao invés do <td> usamos o elemento <th>, sendo esse h de HEADER.

Aqui está o exemplo de uma tabela com um cabeçalho:

<table>
    <tr>
        <th>No.</th>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>João da Silva</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Pedro Paulo</td>
        <td>34</td>
    </tr>
</table>

Resultado:

No. Nome Idade
1 João da Silva 16
2 Pedro Paulo 34

As tabelas serão bem simples, mas você pode usar o CSS para definir o tamanho, bordas, espaçamentos, cores.

Nota: Antes usávamos atributos do próprio elemento <table> para definir bordas, espaçamentos, alinhamos, etc, mas atualmente recomenda-se o CSS.

Mesclando linhas e colunas

Podemos mesclar linhas e colunas da tabela para expandí-las, já que normalmente elas não ultrapassam seus próprios espaços.

Portanto, podemos usar atributos rowspan para expandir linhas e colspan para expandir ou mesclar colunas.

Vejamos um exemplo de mesclagem de linha:

<table>
    <tr>
        <th>Nome:</th>
        <td>Fulano de Tal</td>
    </tr>
    <tr>
        <th rowspan="2">Telefone:</th>
        <td>5557-7854</td>
    </tr>
    <tr>
        <td>5557-7855</td>
    </tr>
</table>

Resultado:

Nome: Fulano de Tal
Telefone: 5557-7854
5557-7855

Aqui está um exemplo de uma tabela com colunas mescladas:

<table>
    <tr>
        <th>Nome</th>
        <th colspan="2">Telefone</th>
    </tr>
    <tr>
        <td>Beltrano da Silva</td>
        <td>4555-0192</td>
        <td>4555-0152</td>
    </tr>
</table>

Resultado:

Nome Telefone
Beltrano da Silva 4555-0192 4555-0152

Adicionando legendas

Você pode querer especificar uma legenda (ou título) para sua tabela, para isso, deve usar o elemento <caption>.

Esse elemento é colocado logo depois que abrimos nossa tabela com a tag <table>.

Aqui está um exemplo de como poderiamos usar o <caption>:

<table>
    <caption>Personagens Famosos</caption>
    <tr>
        <th>No.</th>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

Resultado:

Personagens Famosos
No. Nome Idade
1 Peter Parker 16
2 Clark Kent 34

Cabeçalho, corpo e rodapé da tabela

Vimos acima o <th>que é o elmento que usamos no lugar do <td> para criar cabeçalhos em nossas tabelas.

No entanto, para criar as partes cabeçalho, corpo e rodapé, usamos <thead>, <tbody> e <tfoot>, respectivamente.

Essa é a forma de estruturar de forma correta uma tabela e aqui está um exemplo:

<table>
    <thead>
        <tr>
            <th>Itens</th>
            <th>Quantidade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Computadores</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Celulares</td>
            <td>100</td>
        </tr>        
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>120</td>
        </tr>
    </tfoot>
</table>

Resultado:

Itens Quantidade
Computadores 20
Celulares 100
Total 120

Dica: Apesar de termos usado muito as tabelas no passado para criar layouts de páginas, você não deve fazer isso atualmente.

Navegação<< HTML Básico – ImagensHTML Básico – Listas >>

DEIXE UMA RESPOSTA

Escrava seu comentário!
Insira seu nome aqui

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.