Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Tabelas em HTML

Agora, em nosso curso HTML Progressivo, vamos dar início a mais um importante assunto na criação de sites: as tabelas.

Usando as tabelas, teremos um poderoso recurso para organizar conteúdo e até mesmo melhorar o layout de nosso website.

O que é uma Tabela

Qual a primeira coisa que vem à sua mente quando falamos em tabela?
Provavelmente um monte de quadradinhos, um ao lado do outro, acima e abaixo.Como o Excel, por exemplo, ou a tabela periódica.
E está certo, são todos exemplos de tabelas.

De uma maneira geral, tabelas são uma maneira de exibir e organizar conteúdo.
Facilitam, e muito, a vida de quem tem muita informação.
E seu uso, no dia-a-dia, são algo bem, mas bem extenso mesmo.

As tabelas são também usadas o dia-a-dia, principalmente para armazenar informações na forma de listas. Por exemplo, uma tabela com notas de alunos.
Os nomes dos alunos ficam numa coluna, as notas em uma coluna ao lado.
Ou a tabela de presença e faltas.

Exemplos de tabela

Para sair um pouco do conceito e ideia de que tabelas são apenas quadriculados (células) que só servem para dispor informação, vamos mostrar diversos exemplos de tabela.

E não faremos isso à toa, se no mundo real as tabelas são úteis, no mundo virtual, principalmente em sites, elas são tão importantes quanto no dia-a-dia, por isso estudaremos à fundo as tabelas em HTML.

Assim como nos exemplos mostrados, poderemos fazer coisas incríveis usando tabela em nossos sites, através de códigos HTML, que nos permitirão ter sites bem diferentes.


Tabelas para cálculo

Quem já estudou eletrônica, seja num curso técnico ou mesmo em engenharia, já se deparou com tabelas-verdade, um conjunto de informações de bits (1 ou 0), onde é possível fazer cálculos para criar sistemas complexos.

Sim, as tabelas são muito utilizadas para cálculos.
No exemplo, uma tabela com as entradas e saídas de um dispositivo, para criar um display (led) de 7 segmentos, que exibe um dígito:

Usado uma tabela para calcular

Tabelas para gráficos e comparação de dados

As tabelas também são muito usadas para comparar dados através de gráficos.

Basta traçar um eixo horizontal, outro vertical e ir marcando os pontos.

Quanto mais pontos, mais detalhado vai ficando o gráfico.

Então é possível vermos evoluções, quedas e outros detalhes através desses gráficos, que são facilmente criados em cima de uma tabela.

São muito usado em setor financeiro, administrativo e até mesmo acadêmico, veja um exemplo deste tipo de tabela:

Compara dados através de uma tabela



Tabela do tipo Histograma


Se já usou o programa Excel para gerar gráficos, do pacote Office da Microsoft, com certeza já viu os gráficos do tipo Histograma, que se utilizam das tabelas para exibir informações de uma maneira diferente, como mostrado na figura a seguir:


Usando uma tabela para exibir um histograma


Aliás, o sistema do Excel inteiro é baseado em tabelas.
É incrível o que se pode fazer com ele: gráficos, cálculos, contar elementos, somá-los, tirar média, selecionar elementos e dados específicos, e uma série de outras coisas.

Esse sistema do Excel, que utiliza tabelas, é usado simplesmente em todo e qualquer ambiente.
Em uma hospital, numa padaria, num escritório de contabilidade e até mesmo nas universidades.

Daí você tira a importância de entender como funcionam as tabelas, e como usá-las, que são os objetivos desta seção de nossa apostila de HTML.





Tabelas em HTML: Para que servem

O conceito e utilidade das tabelas em HTML é bem diferente do que nestes exemplos do dia-a-dia.
Lembre-se que HTML é uma linguagem usada, de uma maneira geral, para exibir informações em websites. Ou seja: HTML é usado para criar sites, que vão exibir dados (textos, figuras, vídeos etc).

Logo, iremos usar as tabelas para nos auxiliar nisso.
Claro, também podemos usar as tabelas para exibir dados, em colunas e linhas, como em uma tabela de papel convencional.

Mas no HTML, iremos bem além disso, iremos usar as tabelas inclusive para criar nosso layout.


Tabelas como layout

Isso mesmo, as tabelas em HTML são muitíssimo usada para definir o corpo de um site.

Veja nosso site.
Tem, basicamente, três colunas principais: 
Na esquerda, que mostra o livro Use a Cabeça! HTML com CSS & XHTML, que é o indicado para nosso curso, alguns anúncios de afiliados (para você ganhar dinheiro com seu site), além de outros sites de nossa rede Progressiva.;
Na direita, mostramos uma imagem sobre certificação de Webmaster, nossa fanpage do Facebook e diversos posts de nossa apostila.
Já no meio, é onde fica o conteúdo mesmo de nosso curso.

Também temos um header, um bloco horizontal lá em cima, com o nome de nosso site.
Também temos um footer, que é o rodapé, lá embaixo.
Além disso, temos o menu.
Esses blocos horizontais são espécies de linhas de uma tabela.

Colunas, linhas...isso lembra algo? Sim, lembram tabelas!
Basicamente usamos o conceito de tabela para criar nosso site.
E não é somente nós!

Tabelas como alinhamento

Entre em um portal de notícias, como globo.com ou Terra.
Existem diversos blocos de notícias, uns com textos, outros com textos e imagens, e outros até com vídeos. Ok, essa é a visão comum, de um usuário normal.

Agora veja com olhos de Webmaster!
Está tudo alinhado! A imagem com o texto, com a notícia de baixo.
Três ou dois blocos de notícias se alinham com uma notícia maior em cima.
É tudo muito bem dividido e encaixado!

Fazer isso na mão é complicadíssimo. Alinhas e encaixar frequentemente é dor de cabeça para quem cria sites. Mostra disso foi quando usamos o atributo align para alinhas textos e imagens em HTML.

E com o recurso das tabelas em HTML, esse problema geralmente não existe.
É um importante recurso, senão o mais importante, de se trabalhar com tabelas em nossos sites:
alinhamento.

Tabelas são alinhas por natureza.
Simplesmente colocamos um texto ou imagem, e automaticamente elas vão se alinhas e encaixar.
Vamos ver que é possível fazer sites grandes, com muitas informações de texto e imagem, e todos muito bem alinhados!

E aí, convencido da importância das tabelas para criar sites em HTML ?

Um comentário:

Anônimo disse...

estou fazendo um site, ja tenho a tebela, mais gostaria de saber como faço pra colcar na minha tabela (no site) para quem visitar poder fazer seu próprio calculo. Envie no meu e-mail: phy.bruno@hotmail.com.

Grato!

Tutoriais de HTML e CSS