Codex

< Imagens | Índice | Listas >

Exemplo de tabela HTML

Maçãs 44%
Bananas 23%
Laranjas 13%
Outro 10%

Tabelas em HTML

Tabelas são definidas com a tag <table>.

Uma tabela é dividida em linhas (com a tag <tr>), e cada linha é dividida em células (com a tag <td>). td significa "table data", ou dados da tabela, e é responsável por conter os dados da tabela. A tag <td> pode conter texto, links, imagens, listas, formulários, outras tabelas e etc.

Exemplo:

Como o código html acima aparece em um browser:

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

Tabelas HTML e o atributo border

Se você não especificar o atributo border, A tabela será mostrada sem bordas. Isso pode ser útil, mas na maior parte do tempo, nós queremos que as bordas apareçam.

Para mostrar uma tabela com bordas, especifique o atributo borda:

Linha 1, célula 1 Linha 1, célula 2

Cabeçalho de tabela

As informações de cabeçalho em uma tabela, são definidos com a tag <th>.

A maioria dos browsers mostra o texto no elemento <th> em negrito e centralizado.

A tabela HTML acima irá aparecer no seu browser da seguinte maneira:

Cabeçalho 1 Cabeçalho 2
linha 1, célula 1 linha 1, célula 2
linha 2, célula 1 linha 2, célula 2

Tags para tabelas HTML

Tag Descrição
<table> Define a tabela
<th> Define um cabeçalho de tabela
<tr> Define uma linha de tabela
<td> Define uma célula de tabela
<caption> Define um título para a tabela
<colgroup> Define um grupo de colunas em uma tabela, para formatação
<col /> Define valores de atributo para uma ou mais colunas na tabela
<thead> Agrupa o conteúdo dos cabeçalhos de uma tabela
<tbody> Agrupa conteúdo de uma tabela que não seja cabeçalho ou o pé da tabela
<tfoot> Agrupa conteúdo do pé e rodapé de tabela


< Imagens | Índice | Listas >