Criar tabelas em HTML (com exemplos)

Por | Atualizado em 2013-12-15
Hoje o Montar um Blog irá explicar como criar uma tabela em HTML. Iremos utilizar tabelas de exemplo para facilitar a compreensão. Em primeiro lugar, deverá compreender a sintaxe utilizada na criação de tabelas.

Sintaxe para criar uma tabela em HTML:

<caption> <- Define um título para a sua tabela</caption>
<table> <- Iniciar a tabela
<tr> e <tr> <- do inglês table row (linha da tabela)
<td> e <td> <- do inglês table data (dados da tabela)
<th> e </th> <- do inglês table header (cabeçalho da tabela)
</table>

Saber o significado da sintaxe de construção da tabela facilita todo o processo. Portanto, para iniciar a sua tabela insira <table> seguido do título caption (não é obrigatório inserir título). Inicie uma linha inserindo o termo <tr> e insira todos os dados dentro dos termos <td> (por exemplo, <td>dados</td>). Para terminar a linha utilize o termo </tr>.

Após inserir todos os dados termine a tabela com o termo </table>.


Exemplo:

<table>
<caption>Exemplo Montar um Blog</caption>
<tr>
<td>Dado 1</td><td>Dado 2</td>
</tr>
<tr>
<td>Dado 3</td><td>Dado 4</td>
</tr>
</table>

Resultado:

Exemplo Montar um Blog
Dado 1 Dado 2
Dado 3 Dado 4

Num plano mais avançado poderá utilizar as propriedades COLSPAN e ROWSPAN.

COLSPAN: O atributo colspan define o número de colunas que uma célula deve abranger.
ROWSPAN: O atributo rowspan define o número de linhas que uma célula deve abranger.

Exemplo:

<table>
<caption>Exemplo Montar um Blog</caption>
<tr>
<td>Dado 1</td><td>Dado 2</td><td>Dado 3</td><td>Dado 4</td>
</tr>
<tr>
<td colspan=4>Dado 5</td></tr>
</table>

Resultado:

Exemplo Montar um Blog
Dado 1 Dado 2 Dado 3 Dado 4
Dado 5

Ou seja, a linha inferior englobou as 4 colunas.

Você pode ainda definir o tamanho da borda (contorno) da sua tabela, colocando o seguinte código no início da sua tabela: <table border=2>….</table>. Se deseja criar uma tabela sem borda defina <table border=0>


Um comentário em “Criar tabelas em HTML (com exemplos)

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *