Tabela HTML - Estilizando tabelas

Veja neste artigo como trabalhar com tabelas no html, também veremos como podemos aplicar alguns pequenos estilos e assim deixar a tabela com uma melhor aparência.

por Ricardo Arrigoni

Olá pessoal, no artigo de hoje vou ensinar a como trabalhar com tabelas no HTML.

O HTML (HyperText Markup Language) é uma linguagem de marcação responsável por toda estruturação de páginas web, sem ela é impossível montar um website.

No início da criação dos sites, as tabelas eram usadas para criar todo o site, desde exibir dados tabulares, quanto arrumar todo o layout, mas com a chegada do CSS as tabelas foram abolidas da criação dos layouts, foi então que surgiu o termo “tableless”, que é nada mais, nada menos do que não usar tabelas na criação do layout, fazendo isso por meios de div’s e css.

Mesmo com as tabelas tendo perdido a sua utilidade na criação de layouts, elas passaram a serem usadas para o que de fato foram criadas: exibir dados tabulares.

Obs.: Em casos de mailings, newsletter e qualquer tipo de mala direta o uso de tabelas para estruturação é aconselhável, pois como o conteúdo é exibido em e-mail, nem sempre a formatação estrutural css vai funcionar de maneira correta, por isso ainda é utilizada as tabelas na criação dessas peças publicitárias.

Vamos ao que interessa:

Sempre que quiser usar uma tabela em html será preciso abrir e fechar a tag assim:

Listagem 1: Tag table

 <table>
</table>

Após isso, temos que definir quantas colunas e quantas linhas nossa tabela terá. Para isso usa-se as tag’s TR e TD, onde TR são as Linhas e TD as Colunas.

Vamos criar uma tabela com 4 colunas e 2 linhas, o código ficará assim:

Listagem 2: Tabela com 4 colunas e 2 linhas

<table>
  <tr>
    <td>Nome</td>
    <td>Telefone</td>
    <td>Endereço</td>
    <td>Cep</td>
  </tr>
  <tr>
    <td>Ricardo</td>
    <td>(21) 9999-9999</td>
    <td>Rua Dois, casa 3.</td>
    <td>99999-999</td>
  </tr>
</table>

Utilizando o código acima, a tabela será exibida assim:

Figura 1: Ilustração da tabela

Como podemos ver a tabela sem formatação nenhuma fica bastante confusa, mas existem diversos métodos em que podemos estilizar a tabela, como bordas, largura de cada linha, dentre outros, para explicar vou colocando comentários no código:

Listagem 3: Estilizando a tabela

<!-- Aqui usamos width para alterar a largura da tabela e border para definir uma borda à tabela -->
<table width="467" border="1px">
  <tr>
  <!-- Aqui também usamos o width para definir a largura e o height para definir a altura -->
    <td width="101" height="40">Nome</td>
    <td width="113">Telefone</td>
    <td width="140">Endereço</td>
    <td width="85">Cep</td>
  </tr>
  <tr>
    <td height="40">Ricardo</td>
    <td>(21) 9999-9999</td>
    <td>Rua Dois, casa 3.</td>
    <td>99999-999</td>
  </tr>
</table>

O resultado do código acima será esse:

Nome	Telefone	Endereço	Cep
Ricardo	(21) 9999-9999	Rua Dois, casa 3.	99999-999

Essa largura foi feita em pixels, usamos na tabela 467px de largura, mas caso queiram usar porcentagem (%), também é possível, como por exemplo:

Listagem 4: Utilizando porcentagem

<table width="100%" border="1px">
  <tr>

    <td width="25%" height="20%">Nome</td>
    <td width="25%">Telefone</td>
    <td width="25%">Endereço</td>
    <td width="25%">Cep</td>
  </tr>
  <tr>
    <td height="20%">Ricardo</td>
    <td>(21) 9999-9999</td>
    <td>Rua Dois, casa 3.</td>
    <td>99999-999</td>
  </tr>
</table>

O resultado será o exibido abaixo:

Figura 2: Visualização da tabela

Caso queira adicionar uma cor de fundo a toda tabela, podemos utilizar o bgcolor, lembrando sempre que a cor no html é em formato hexadecimal, dessa forma:

Listagem 5: Inserindo background na tabela

<table width="467" border="1px" bgcolor="#CCC">
  <tr>
    <td width="101" height="40">Nome</td>
    <td width="113">Telefone</td>
    <td width="140">Endereço</td>
    <td width="85">Cep</td>
  </tr>
  <tr>
    <td height="40">Ricardo</td>
    <td>(21) 9999-9999</td>
    <td>Rua Dois, casa 3.</td>
    <td>99999-999</td>
  </tr>
</table>

Nome	Telefone	Endereço	Cep
Ricardo	(21) 9999-9999	Rua Dois, casa 3.	99999-999

Caso ainda queiram mudar as cores de apenas um campo e/ou a cor da borda de um campo, também é possível:

Listagem 6: Alterando as cores de apenas um campo na tabela

<table width="467" border="1px" >
  <tr>
  <!-- Podemos alterar a cor de somente um campo da tabela -->
    <td width="101" height="40" bgcolor="#666666">Nome</td>
    <td width="113">Telefone</td>
    <td width="140">Endereço</td>
    <!-- também é possível alterar somente a cor da borda de um campo específico -->
    <td width="85" bordercolor="#FF0000">Cep</td>
  </tr>
  <tr>
    <td height="40">Ricardo</td>
    <td>(21) 9999-9999</td>
    <td>Rua Dois, casa 3.</td>
    <td>99999-999</td>
  </tr>
</table>

Nome	Telefone	Endereço	Cep
Ricardo	(21) 9999-9999	Rua Dois, casa 3.	99999-999

Neste artigo falamos um pouco sobre algumas das inúmeras propriedades que uma tabela possui.

Espero que tenham gostado e até o próximo artigo.

Ricardo Arrigoni - Desenvolvedor Front-end