Criar tabela HTML

Este tutorial irá demonstrar como criar tabela html para iniciantes. Vamos mostrar o básico e, no final, daremos o código pronto de uma tabela simples para você copiar e colar na sua página html.

Tags básicas para criar uma tabela html

Em HTML, você cria tabelas usando a tag da table, em conjunto com as tags tr e td. Para inserir uma tabela em sua página, basta adicionar estas tags onde deseja que ela apareça.

<table> </table>

A tabela acima seria inútil, pois não tem linhas nem colunas

Adicionando colunas à tabela

Para adicionar colunas à uma tabela, use as tags <tr> e </ tr>. Ver exemplo a seguir:

<table>
<tr></tr>
<tr></tr>
</table>

Como colocar linhas / células na tabela html

Para colocar linhas em uma tabela html, use as tags <td> e </ td>. Veja o exemplo a seguir:

<table>
<tr> <td>célula 1</td> <td>célula 2</td> </tr>
<tr> <td>célula 3</td> <td>célula 4</td> </tr>
</table>

Exemplo de tabela html mais código pronto

Segue abaixo o exemplo de uma tabela simples em html com duas colunas e quatro linhas. Primeiro o código, depois como ele vai ficar na sua página.

<table border=1>
<tr>
<td>1ª coluna - 1ª linha</td>
<td>2ª coluna - 1ª linha</td>
</tr>

<tr>
<td>1ª coluna - 2ª linha</td>
<td>2ª coluna - 2ª linha</td>
</tr>
</table>

1ª coluna - 1ª linha 2ª coluna - 1ª linha
1ª coluna - 2ª linha2ª coluna - 2ª linha

Nesta página você aprendeu o básico sobre como criar tabela html com linhas e colunas. Além dessas, existem diferentes opções para personalizar uma tabela com cor de fundo, margem, topo etc.


criar site