Tabelas em HTML
Com a HTML você pode criar tabelas.
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:
| Cabeçalho | Outro Cabeçalho |
|---|---|
| linha 1, célula 1 | linha 1, célula 2 |
| linha 2, célula 1 | linha 2, célula 2 |
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:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
Observe que as bordas em torno da célula vazia estão faltando.
Para evitar isso, adicione um espaço não separável ( ) à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> </td> </tr> </table> |
Como aparece no navegador:
| linha 1, célula 1 | linha 1, célula 2 |
| linha 2, célula 1 |
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.
Tags de Tabela
| Tag | Descrição |
|---|---|
| <table> | Define uma 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 de tabela |
| <colgroup> | Define um grupo de colunas de tabela |
| <col> | Define os valores de atributo para uma ou mais colunas em uma tabela |
| <thead> | Define um cabeçalho de tabela |
| <tbody> | Define o corpo de uma tabela |
| <tfoot> | Defines o rodapé (footer) de uma tabela |
