Tabelas HTML

Você pode criar tabelas usando HTML.

Exemplo

Tabela
Este exemplo demonstra como criar tabelas em documentos HTML.
Bordas de tabela
Este exemplo demonstra vários tipos de bordas de tabelas.

(Mais exemplos podem ser encontrados na parte inferior dessa página)

Tabela

A tabela é definida pela tag <table>. Cada tabela tem várias linhas (definidas pela tag <tr>), e cada linha é dividida em várias células (definidas pela tag <td>). A letra td representa os dados da tabela (table data), ou seja, o conteúdo da célula de dados. As células de dados podem conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, tabelas etc.

<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>

Será exibida no navegador da seguinte forma:

linha 1, célula 1 linha 1, célula 2
linha 2, célula 1 linha 2, célula 2

Tabela e propriedade de borda

Se não for definida a propriedade de borda, a tabela não exibirá a borda. Isso pode ser útil às vezes, mas na maioria das vezes, queremos exibir a borda.

Use a propriedade de borda para exibir uma tabela com borda:

<table border="1">
<tr>
<td>Linha 1, célula 1</td>
<td>Linha 1, célula 2</td>
</tr>
</table>

Cabeçalhos da tabela

Os cabeçalhos da tabela são definidos usando a tag <th>.

A maioria dos navegadores exibirá os cabeçalhos como texto em negrito e centralizado:

<table border="1">
<tr>
<th>Título</th>
<th>Outro Título</th>
</tr>
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>

Será exibida no navegador da seguinte forma:

Título Outro Título
linha 1, célula 1 linha 1, célula 2
linha 2, célula 1 linha 2, célula 2

Células em branco na tabela

Em alguns navegadores, as células da tabela sem conteúdo podem não ser exibidas corretamente. Se uma célula estiver vazia (sem conteúdo), o navegador pode não exibir a borda dessa célula.

<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td></td>
<td>linha 2, célula 2</td>
</tr>
</table>

O navegador pode exibir assim:

Células em branco na tabela

Atenção:Essa célula vazia não tem borda. Para evitar isso, adicione um caractere de espaço como marcador de posição na célula vazia, e a borda será exibida.

<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td> </td>
<td>linha 2, célula 2</td>
</tr>
</table>

Será exibida no navegador da seguinte forma:

linha 1, célula 1 linha 1, célula 2
　 linha 2, célula 2

Mais exemplos

Tabela sem borda
Este exemplo demonstra uma tabela sem borda.
Cabeçalho da tabela (Heading)
Este exemplo demonstra como exibir o cabeçalho da tabela.
Células vazias
Este exemplo demonstra como usar " " para tratar células de tabela sem conteúdo.
Tabela com título
Este exemplo demonstra uma tabela com título (caption).
Células de tabela que se estendem por linhas ou colunas
Este exemplo demonstra como definir células de tabela que se estendem por linhas ou colunas.
Etiquetas dentro da tabela
Este exemplo demonstra como exibir elementos dentro de diferentes elementos.
Margem de célula (Cell padding)
Este exemplo demonstra como usar o Cell padding para criar espaço entre o conteúdo da célula e a borda.
Espaçamento de célula (Cell spacing)
Este exemplo demonstra como usar o Cell spacing para aumentar o espaço entre as células.
Adicionar cor de fundo ou imagem de fundo à tabela
Este exemplo demonstra como adicionar fundo à tabela.
Adicionar cor de fundo ou imagem de fundo às células de tabela
Este exemplo demonstra como adicionar fundo a uma ou mais células de tabela.
Alinhar conteúdo dentro de células de tabela
Este exemplo demonstra como usar o atributo "align" para alinhar o conteúdo das células, criando uma tabela bonita.
Atributo de frame (frame)
Este exemplo demonstra como usar o atributo "frame" para controlar a borda ao redor da tabela.

Etiquetas de tabela

Tabela Descrição
<table> Define a tabela
<caption> Define o título da tabela.
<th> Define o cabeçalho da tabela.
<tr> Define a linha da tabela.
<td> Define a célula da tabela.
<thead> Define o cabeçalho da tabela.
<tbody> Define o corpo da tabela.
<tfoot> Define o rodapé da tabela.
<col> Define as propriedades usadas pelas colunas da tabela.
<colgroup> Define o grupo de colunas da tabela.