Rafael Paulino Desenvolvedor web e mobile

portfolio de Rafael Paulino desenvolvedor web e mobile

Blog - Criando tabelas com HTML

Postado por Rafael Paulino - sexta-feira, 8 de março de 2013

As tabelas são usadas como uma das formas mais eficazes de aramazenamento de informações.
Abaixo segue o código para a criação de uma tabela simples:

<table>
<th>Cabeçalho</th><th>Cabeçalho</th>
<tr><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td></tr>
</table>

Explicação do código acima:
<table>…</table> – Diz ao navegador que será inserida uma tabela.
<th>… </th> – Insere uma célula de cabeçalho.
<td>… </td> – Insere uma célula comum.
<tr>… </tr> – Insere uma quebra de linha.

Veja abaixo como ficaria essa tabela:

tabela_simples

 

Para mesclar as linhas da tabela nós usamos o comando rowspan, veja o exemplo:

<table>
<th>Cabeçalho</th><th>Cabeçalho</th>
<tr><td rowspan="2">Célula</td><td>Célula</td></tr>
<tr><td>Célula</td></tr>
</table>

Veja abaixo como ficaria essa tabela:

tabela_rowspan

 

E para mesclar as colunas nós usamos o comando colspan:

<table>
<th>Cabeçalho</th><th>Cabeçalho</th>
<tr><td colspan="2">Célula</td></tr>
<tr><td>Célula</td><td>Célula</td></tr>
</table>

Veja abaixo como ficaria essa tabela:

tabela_colspan

Comandos adicionais para a criação de tabelas:

<table bgcolor="black">

Cor de fundo em inglês ou hexadecimal.

 

<table border="3">

Espessura da borda da tabela (Número ou porcentagem).

 

<table bordercolor="red">

Cor das bordas da tabela.

 

<table bordercolorlight="lime" bordercolordark="green">

Cor da borda clara e escura da tabela.

 

<table width="60%" height="300">

Largura e altura da tabela (Em pixels ou porcentagem).

 

<table cellspacing="3">

Espaçamento das linhas da tabela.

 

<table cellpadding="3">

Espaçamento interno da célula.

 

<table align="center|left|right">

Alinhamento da tabela.

 

<table valign="top|middle|bottom">

Alinhamento vertical do conteúdo da Tabela.

 

<table frame="void|above|below|hsides|vsides|lhs|rhs|box-border">

void (sem moldura)
above (acima)
below (abaixo)
hsides (acima+abaixo)
vsides (direita + esquerda)
lhs (esquerda)
rhs (direita)
box-border (com moldura)

 

<table rules="none|groups|rows|cols|all">

none (sem linhas)
groups (sem linhas)
rows (linhas horizontais)
cols (linhas verticais)
all (todas as linhas)

 

<caption align="center|left|right" valign="top|middle|bottom">Insere uma legenda na tabela.</caption>

 

Criando uma tabela com cabeçalho corpo, rodapé e legenda:

<table border="1">
<caption>Os meus carros</caption>
<thead>
<tr>
<th>Carro</th>
<th>Ano</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Carro</td>
<td>Ano</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ferrari</td>
<td>2012</td>
</tr>
<tr>
<td>Lamborguini</td>
<td>2013</td>
</tr>
</tbody>
</table>

Explicação do código:

<caption>...</caption>

Cria uma legenda na tabela.

 

<thead>...</thead>

Cria o cabeçalho da tabela.

 

<tbody>...</tbody>

Cria o corpo da tabela.

 

<tfoot>...</tfoot>

Cria o rodapé da tabela.

 

Veja abaixo como ficaria essa tabela:

tabela_estruturada



Rafael Paulino

Rafael Paulino: Desenvolvedor web e mobile, atua na área desde 2008, apaixonado por esportes principalmente por corrida, musculação, natação e artes marciais. PHP - jQuery - Java Script - Ajax - XHTML5 - CSS - iOS

Veja também:



Recomende 

Entre em contato