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

Como criar tabelas < table >, linhas < tr > e colunas < td > em HTML

Agora que já sabemos o que são tabelas e suas utilidades em HTML, vamos, de fato, colocar a mão na massa e começar a criar sites com tabelas.

Para tal,faremos uso de 3 tags básicas: <table>, <tr> e <td>, que serão estudadas e explicadas neste tutorial de nossa apostila de HTML.

<table> : Como criar uma tabela em HTML

A única tag de uso obrigatório em tabelas é: <table> </table>
Dentro das tags de abertura e fechamento table é que iremos definir nossas tabelas, sendo até possível aninhar tabelas, através do aninhamento de tags.
É dentro desta tag que iremos usar as tags tr e td para criar as linhas e colunas de nossas tabelas (assunto visto em breve, ainda neste tutorial de nosso curso).

Essa tag, junto seus mais diversos atributos, será responsável por diversas características de uma tabela em HTML para seu site, como:
  • definir se a tabela vai ter borda ou não
  • caso a tabela tenha borda, qual a espessura desta
  • cor de fundo
  • espaçamento entre células
  • que partes da tabela serão visíveis
  • etc



Espessura da borda de uma tabela - O atributo border

Inicialmente, para vermos bem claramente as linhas e colunas, vamos exibir as linhas de uma tabela.
Para isso, precisamos definir a espessura das bordas, o que é feito através do atributo border, que recebe um valor.

Assim, para uma borda fina:

<table border="1">
   código da tabela
</table>

Teremos algo como:
borda de espessura 1

borda de espessura 2

borda de espessura 3


<tr> - Como criar linhas de uma tabela em HTML

Agora que já mostramos a tag table e explicamos sua importância, vamos começar a definir os elementos de uma tabela.

O primeiro elemento que criamos em uma tabela são suas linhas.

Por linha, entenda aquela parte horizontal (deitada).
Já as colunas, são os elementos verticais (em pé).

Se já tiver estudado matrizes ou usado o Microsoft Excel, certamente entenderá de cara essa classificação. E assim como no Excel, em tabelas de HTML chamamos cada elemento ou bloquinho desses, de célula.

A figura a seguir possui 4 linhas e 4 colunas, totalizando 16 células:

Curso de HTML online grátis

Na tag tr, o "t" é de table e o "r" de row, que também significa linha, ou fileira.
E cada vez que colocamos o par de tags <tr> </tr> estamos criando uma linha em nossa tabela.

Assim, o código de uma tabela com uma linha só é:
<table border="1">
      <tr><td>Linha 1</td></tr>
</table>

E seu efeito:
Linha 1


Já o código de uma tabela com duas linhas é:
<table border="1">
      <tr><td>Linha 1</td></tr>
      <tr><td>Linha 2</td></tr>
</table>


E caso rodemos o código, veremos nosso site assim:
Linha 1
Linha 2


Analogamente, para uma tabela de três linhas, usamos três vezes a tag tr:
<table border="1">
      <tr><td>Linha 1</td></tr>
      <tr><td>Linha 2</td></tr>
      <tr><td>Linha 3</td></tr>
</table>

E veremos::
Linha 1
Linha 2
Linha 3

Note que também usamos a tag td, que será explicada a seguir.
Ela é necessária, pois trabalha em conjunto com a tr.

Cada bloquinho desse, de uma tabela, é chamado de célula.
Essas são células do corpo de uma tabela, são células, digamos, normais.

Note também que decidimos colocar um par de tags tr em cada linha do código, assim fica mais organizado e fácil de associar: cada tag representa uma linha, e pelo código HTML podemos ver qual a linha 1, a 2, a 3 etc.

<td> - Como criar linhas de uma tabela em HTML

Como já devem suspeitar, a tag td será a responsável por criar colunas em nossas tabelas.
Colunas são os elementos verticais.

No exemplo passado de código, todas nossas tabelas possuíam apenas uma coluna.

No HTML, a linha tem uma certa hierarquia em relação as colunas, pois as linhas são compostas de colunas.
Ou seja, criarmos colunas dentro de cada linhas.

Assim como as linhas, cada coluna é definida pelo par: <td> </td>
Portanto, se quisermos criar 2 colunas, colocamos duas tags dentro de cada linha, e nosso código HTML com uma linha e duas colunas é:
<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> </tr>
</table>

E o resultado seria:
Linha 1, Coluna 1 Linha 1, Coluna 2

Veja agora como seria o código HTML para 3 colunas:
<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td>  <td> Linha 1, Coluna 3 </td> </tr>
</table>

Nossa tabela ficaria assim:
Linha 1, Coluna 1 Linha 1, Coluna 2 Linha 1, Coluna 3

Agora vamos criar uma tabela 2x2, ou seja, duas linhas e duas colunas:
<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td> Linha 2, Coluna 2 </td> </tr>
</table>

O resultado é:
Linha 1, Coluna 1 Linha 1, Coluna 2
Linha 2, Coluna 1 Linha 2, Coluna 2

Agora uma 3x3:
<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> <td> Linha 1, Coluna 3 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td> Linha 2, Coluna 2 </td> <td> Linha 2, Coluna 3 </td> </tr>
   <tr><td>Linha 3, Coluna 1</td> <td> Linha 3, Coluna 2 </td> <td> Linha 3, Coluna 3 </td> </tr>
</table>

E como é de se esperar, nossa tabela fica assim:
Linha 1, Coluna 1 Linha 1, Coluna 2 Linha 1, Coluna 3
Linha 2, Coluna 1 Linha 2, Coluna 2 Linha 2, Coluna 3
Linha 3, Coluna 1 Linha 3, Coluna 2 Linha 3, Coluna 3


Ou seja, bem simples e sem segredo.

Células em branco em uma tabela

Nem sempre queremos preencher todas as células de uma tabela.
As vezes não precisa de dados, a informação está faltando ou esperando o usuário completar.

Para criar uma célula em branco, basta não colocar nada de texto.
Mas mesmo deixando ela em branco, é importante deixar as tags tr e td para aquela célula, como se tivesse algo dentro.

Vejamos o último exemplo de uma tabela 3x3.
Vamos retirar o elemento da linha 2 coluna 2. Nosso código fica:
<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> <td> Linha 1, Coluna 3 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td></td> <td> Linha 2, Coluna 3 </td> </tr>
   <tr><td>Linha 3, Coluna 1</td> <td> Linha 3, Coluna 2 </td> <td> Linha 3, Coluna 3 </td> </tr>
</table>

A parte em branco é: <td></td>
Veja como ficou nossa tabela:
Linha 1, Coluna 1 Linha 1, Coluna 2 Linha 1, Coluna 3
Linha 2, Coluna 1 Linha 2, Coluna 3
Linha 3, Coluna 1 Linha 3, Coluna 2 Linha 3, Coluna 3

Vamos tirar todos os elementos da célula da coluna central (coluna 2):
<table border="1">
   <tr><td>Linha 1, Coluna 1</td> <td></td> <td> Linha 1, Coluna 3 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td></td> <td> Linha 2, Coluna 3 </td> </tr>
   <tr><td>Linha 3, Coluna 1</td> <td></td> <td> Linha 3, Coluna 3 </td> </tr>
</table>

Nossa tabela agora fica assim:
Linha 1, Coluna 1 Linha 1, Coluna 3
Linha 2, Coluna 1 Linha 2, Coluna 3
Linha 3, Coluna 1 Linha 3, Coluna 3

É como se a coluna do meio tivesse sumido.
Porém, dá para ver tem uma coluna ainda, mas bem fina, quase que não dá pra ver.
Em breve vamos aprender como exibir uma coluna ou linha, mesmo quando não há nada nas células.

Tabelas sem borda e alinhamento

Como vimos nos exemplos, as células ficam bem alinhadas e delimitadas pelas linhas e colunas.
É bem fácil também de se separar informações em uma tabela, por conta dos traços, da borda da tabela.

Porém, esse traço existe porque definimos uma borda com espessura 1, através do atributo border.
Mas esse atributo da tag table não é obrigatório, e se omitirmos ele, a tabela continuará existindo, com suas divisões e alinhamentos.

Vejamos como ficar o código de uma tabela sem borda (ou com borda de espessura nula):
<table>
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> <td> Linha 1, Coluna 3 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td> Linha 2, Coluna 2 </td> <td> Linha 2, Coluna 3 </td> </tr>
   <tr><td>Linha 3, Coluna 1</td> <td> Linha 3, Coluna 2 </td> <td> Linha 3, Coluna 3 </td> </tr>
</table>

E o efeito disso é:
Linha 1, Coluna 1 Linha 1, Coluna 2 Linha 1, Coluna 3
Linha 2, Coluna 1 Linha 2, Coluna 2 Linha 2, Coluna 3
Linha 3, Coluna 1 Linha 3, Coluna 2 Linha 3, Coluna 3

Podemos, inclusive, deixar uma célula em branco.
A células da linha 2 e coluna 3:
<table>
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> <td> Linha 1, Coluna 3 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td>  </td> <td> Linha 2, Coluna 3 </td> </tr>
   <tr><td>Linha 3, Coluna 1</td> <td> Linha 3, Coluna 2 </td> <td> Linha 3, Coluna 3 </td> </tr>
</table>

Veja como ficou nossa tabela:
Linha 1, Coluna 1 Linha 1, Coluna 2 Linha 1, Coluna 3
Linha 2, Coluna 1 Linha 2, Coluna 3
Linha 3, Coluna 1 Linha 3, Coluna 2 Linha 3, Coluna 3

A partir desses exemplos, começamos a notar o poder das tabelas na criação de sites em HTML, pois ela faz o alinhamento de maneira perfeita e totalmente automática.

14 comentários:

SERGIO SOFT disse...

Ótimo blog. Postagem super útil. Me ajudou mesmo. Estava procurando, e quebrando a cabeça, até que achei aqui. Obrigado!

Juliano Neves disse...

Muito bom, fácil de entender

demolidor disse...

legal cara seu post gostei das tags em html vlw .... http://zonadeconteudo.blogspot.com.br/2016/01/erros-cometidos-depois-de-malhar-que.html

Dinei disse...

ola, ótimo post, porém gostaria de saber no exemplo "Células em branco em uma tabela com bordas", a linha 2 da coluna 2 que esta vazia, como fazer para somente ela ficar sem bordas?
aguardo

Unknown disse...

Gostei imenso...

Sandson Costa disse...

Como que eu faço para um código dentro da página? Tipo a que ta nessa página?

Leandro Andrade disse...

não consigo fazer essas bordas , eu boto o código aparece só o nome

Unknown disse...

Muito bom mesmo... iniciei em HTML a pouco tempo e já vejo muito progresso pois as explicações são simples e detalhadas usando elementos que usamos diariamente facilitando o entendimento.
Só tenho a agradecer!

Unknown disse...

Muito obrigado, gostei e me ajudou muito.
Muito boa a sua explicação.

Anônimo disse...

Boa tarde!

Alguém saberia informar qual a melhor forma de programar a seguinte questão:

Um site de serviços onde o cliente faz a opção de tipo (ex: cartão), tipo de papel, tamanho, quantidade de cores, etc... como faço a programação dessas opções?
Teria que criar uma programação só para cartão e todas as suas opções ou tem um jeito mais fácil para linkar o cartão de visita com o folder, com o catálogo, com flyr, etc...
Surgiu essa dúvida porque to começando agora a mexer com programação e esse fluxo tá me dando um nó na cabeça.
Se eu for cadastrar todas as opções, vão ser +/- 50 tipos de cadastro, sendo que alguns são parecidos.

Espero ter sido claro na pergunto. Agradeço se alguém tiver uma ideia.

Obrigado.

Anônimo disse...

Me ajudou muito

Deborah Jäger disse...

não funcionou no meu blog. Aparece as linhas na edição mas não no blog.

Bitcoin Tuto disse...

boa tarde, ótimo poste, como eu faria para poder dar cor a determinada área da tabela, parecido como no exel, des de já agradeço.

Unknown disse...

Muito obrigado, foi muito bem explicado gostei muito.

Tutoriais de HTML e CSS