Tabelas HTML

A tabela é realmente muitas pequenas células, e essas pequenas células estão organizadas em ordem. Elas têm muitas linhas e muitas colunas. Este layout composto por linhas e colunas é chamado de tabela, e a tabela é definida pela etiqueta table.

Exemplo de tabela do HTML:

Exemplo online

Tabela do HTML
Este exemplo demonstra como criar uma tabela em um documento HTML.

<table border="1" width="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

Tabelas HTML

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

Exemplo de tabela

<table border="1">
　　　　<tr>
　　　　　　　　<td>linha　1, coluna　1</td>
　　　　　　　　<td>linha　1, coluna　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>linha　2, coluna　1</td>
　　　　　　　　<td>linha　2, coluna　2</td>
　　　　</tr>
</table>

Mostra no navegador como:

Tabela do HTML e propriedade de borda

Se não definir a propriedade de borda, a tabela não exibirá 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, coluna　1</td>
　　　　　　　　<td>linha　1, coluna　2</td>
　　　　</tr>
</table>

Cabeçalhos de tabela do HTML

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

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

<table border="1">
　　　　<tr>
　　　　　　　　<th> cabeçalho um</<th>
　　　　　　　　<th> cabeçalho dois</<th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>linha　1, coluna　1</td>
　　　　　　　　<td>linha　1, coluna　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>linha　2, coluna　1</td>
　　　　　　　　<td>linha　2, coluna　2</td>
　　　　</tr>
</table>

Mostra no navegador como:

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.

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 entre células (Cell padding)
Este exemplo demonstra como usar o Cell padding para criar espaço entre o conteúdo da célula e sua borda.

Espaçamento entre células (Cell spacing)
Este exemplo demonstra como usar o Cell spacing para aumentar o espaço entre as células.

Etiquetas de tabela do HTML