Tabelas em HTML Com a HTML você pode criar tabelas. Exemplos Tabelas Este exemplo demonstra como criar tabelas em um documento HTML. Bordas da Tabela Este exemplo demonstra diferentes bordas de tabelas. (Você pode encontrar mais exemplos no final desta página.) Tabelas As tabelas são definidas com a tag <table>. Uma tabela é dividida em linhas (com a tag <tr>), e cada linha é dividida em células de dados (com a tag <td>). As letras td significam "table data," que é o conteúdo de uma célula de dados. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, filetes horizontias, 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> Como aparece no navegador: linha 1, célula 1 linha 1, célula 2 linha 2, célula 1 linha 2, célula 2 As Tabelas e o Atributo Border (Borda) Se você não especificar um atributo border a tabela será exibida sem qualquer borda. Às vezes isto pode ser útil, mas geralmente, você irá querer que as bordas sejam mostradas. Para exibir uma tabela com bordas, você usará o atributo border:

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

Cabeçalhos em uma Tabela

Os cabeçalhos em uma tabela são definidos com a tag <th>.

<table border="1">
<tr>
<th>Cabeçalho</th>
<th>Outro Cabeçalho</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>

Como aparece no navegador:

Células Vazias em uma Tabela

Células sem conteúdo não são bem exibidas em muitos navegadores.

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

Como aparece no navegador:

Observe que as bordas em torno da célula vazia estão faltando.

Para evitar isso, adicione um espaço não separável (&nbsp;) às céluas vazias, para tornar as bordas visíveis:

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

Como aparece no navegador:

Observações Básicas - Dicas Úteis

Os elementos <thead>,<tbody> e <tfoot> são raramente usado por causa do mau suporte dos navegadores. Espere mudanças em versões futuras da XHTML. Se você tem o Internet Explorer 5.0 ou mais recente, você pode ver um exemplo funcional no tutorial de XML.

Mais Exemplos

Tabela sem bordas
Este exemplo demonstra uma tabela sem bordas.

Cabeçalhos em uma Tabela
Este exemplo demonstra como exibir cabeçalhos de tabelas.

Células Vazias
Este exemplo demonstra como usar "&nbsp;" para manejar células que não têm conteúdo.

Tabela com título
Este exemplo demonstra uma tabela com um título.

Células que abrangem mais do que uma linha/coluna
Este exemplo demonstra como definir células que abrangem mais de uma linha ou uma coluna.

Tags dentro de uma tabela
Este exemplo demonstra como exibir elementos dentro de outros elementos.

Enchimento de célula
Este exemplo demonstra como usar enchimento de célula para criar mais espaço em branco entre o conteúdo da célula e suas bordas.

Espaçamento de célula
Este exemplo demonstra como usar espaçamento de célula para aumentar a distância entre as células.

Adicionar uma cor de fundo ou uma imagem de fundo a uma tabela
Este exemplo demonstra como adicionar um fundo a uma tabela.

Adicionar uma cor de fundo ou uma imagem de fundo a uma célula de tabela
Este exemplo demonstra como adicionar um fundo a uma ou mais células de tabela.

Alinhar o conteúdo em uma célula de tabela
Este exemplo demonstra como usar o atributo "align" para alinhar o conteúdo de células, par criar uma tabela mais "agradável".

O atributo frame (moldura)
Este exemplo demonstra como usar o atributo "frame" para controlar as bordas em torno da tabela.

Tags de Tabela