HTML Básico – Tabelas

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 >>