Close

Tabelas em HTML

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 1linha 1, célula 2
linha 2, célula 1linha 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çalhoOutro Cabeçalho
linha 1, célula 1linha 1, célula 2
linha 2, célula 1linha 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 1row 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 (&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:

linha 1, célula 1linha 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

TagDescriçã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

Related Posts