Tabelas em HTML

As tabelas são muito utilizadas na internet hoje em dia, para estruturar o layout das páginas,

para organizar dados, etc.

Em uma tabela podemos inserir textos, imagens, links e outros elementos e ainda podemos

utilizar uma tabela dentro outra tabela.

No primeiro contato, é possível achar difícil a compreensão das tags utilizadas para estruturar

as tabelas, mas com o uso tornará mais fácil a utilização e a interpretação de possíveis falhas que um editor

de HTML qualquer possa gerar.

8.1 MARCAÇÕES BÁSICAS

<TABLE> </TABLE>

Esta tag indica o ínicio e o fim da tabela. O atributo border insere uma borda para marcar a

divisão das células.

<TR> </TR>

Esta tag indica as linhas da tabela.

<TD> </TD>

Esta tag indica as células contidas em cada linha da tabela. É nesta tag que inserimos os

dados que serão exibidos na tabela.

<TH> </TH>

Esta tag define os títulos de uma tabela, podendo ser utilizado em qualquer célula. A diferença

entre a tag <TD></TD> e a tag <TH> <TH> é que o conteúdo inserido entre as tags <TH></TH> será

exibido em negrito.

<CAPTION> </CAPTION>

Esta tag insere a legenda da tabela. Deve ser inserida entre as tags <TABLE> </TABLE>.

____________________________________________________________

8.2 DESENVOLVENDO UMA TABELA SIMPLES

Com base no conteúdo do item acima, vamos desenvolver nossa primeira tabela.

1.º MODELO

<table border>

<tr>

<td>Primeira Célula – 1ª Linha</td>

<td>Segunda Célula – 1ª Linha</td>

</tr>

<tr>

<td>Primeira Célula – 2ª Linha</td>

<td>Segunda Célula – 2ª Linha</td>

</tr>

</table>

Onde o comando acima irá ser exibido da seguinte forma:

Fígura 8.1 Primeiro modelo de tabela

____________________________________________________________

2.º MODELO

<table border>

<CAPTION>Modelo 2 de Tabelas Simples</CAPTION>

<tr>

<td>Itens/Mês</td>

<th>Janeiro</th>

<th>Fevereiro</th>

<th>Março</th>

</tr>

<tr>

<th>Usuários</th>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<th>Linhas</th>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</table>

Fígura 8.2 Segundo exemplo de tabela

____________________________________________________________

8.3 ATRIBUTOS DE CONTROLE DE TABELAS

WIDTH

Este atributo é utilizado para alterar a largura da tabela e das células em relação ao

navegador. Os valores inseridos podem ser em pixel ou em percentuais, ou seja, este atributo determina a

área da tela que a tabela irá ocupar.

Comando:

1º MODELO – WIDTH na tag <TABLE>

<table border widht=”50”>

<tr>

<td>Segunda</td>

<td>Terça </td>

<td>Quarta</td>

</tr>

<tr>

<td>Quinta</td>

<td>Sexta</td>

<td>Sábado</td>

</tr>

</table>

____________________________________________________________

Fígura 8.3 Modelo de atributo width na tabela

2º MODELO – WIDTH na tag <TD>

<table border>

<tr>

<td width=”50%”>Segunda</td>

<td>Terça </td>

<td>Quarta</td>

</tr>

<tr>

<td>Quinta</td>

<td>Sexta</td>

<td>Sábado</td>

</tr>

</table>

____________________________________________________________

Fígura 8.4 Modelo de atributo width na tag <TD>

BORDER

O atributo border é utilizado na tag <TABLE>, para definir se a tabela será exibida com linhas

de contorno. Caso o atributo não esteja informado, a tabela aparecerá sem bordas.

Observe:

Fígura 8.5 Modelo do uso do atributo BORDER

____________________________________________________________

Modelo de uso utilizando o atributo BORDER

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributos BORDER</h1><BR>

<table width=”300″ border=”2″ >

<tr>

<td >1</td>

<td >2</td>

<td>3</td>

</tr>

</table>

</body>

</html>

Modelo de uso sem o atributo BORDER

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributos BORDER </h1><BR>

<table width=”300″ >

<tr>

<td >1</td>

<td >2</td>

<td>3</td>

</tr>

</table>

</body>

</html>

ALIGN

O atributo ALIGN controla o alinhamento da tabela em relação a página. Pode se utilizado nas

tags <TD> <TH>, onde este alinhará o texto contidos nas células a posição informada no ALIGN.

O atributo ALIGN aceita as seguintes posições:

􀀀 LEFT : alinhamento a esquerda;

􀀀 RIGHT: alinhamento a direita;

􀀀 CENTER: alinhamento centralizado.

____________________________________________________________

Fígura 8.6 Modelo de uso do atributo ALIGN

Modelo de uso do atributo ALIGN na tag <TABLE>

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributos ALIGN – tag TABLE</h1><BR>

<table width=”300″ border=”2″ align=”center”>

<tr>

<td >1</td>

<td >2</td>

<td >3</td>

</tr>

</table>

</body>

</html>

____________________________________________________________

Modelo de uso do atributo ALIGN na tag <TD> <TH>

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributos ALIGN – tag TD e TH</h1><BR>

<table width=”300″ border=”2″ align=”center”>

<tr>

<td align=”center”>1</td>

<td align=”left”>2</td>

<td align=”right”>3</td>

</tr>

<tr>

<tH align=”center”>Alinhamento CENTER</tH>

<tH align=”left”>Alinhamento LEFT</tH>

<tH align=”right”>Alinhamento RIGHT</tH>

</tr>

</table>

</body>

</html>

VALIGN

O atributo VALIGN controla o alinhamento do conteúdo das células em relação a borda

superior e inferior. Pode se utilizado nas tags <TD> <TH>.

O atributo VALIGN aceita as seguintes posições:

􀀀 TOP : alinhamento ao topo;

􀀀 MIDDLE: alinhamento ao centro;

􀀀 BOTTOM: alinhamento ao rodapé.

____________________________________________________________

Fígura 8.7 Modelo de uso do atributo VALIGN

Modelo de uso do atributo VALIGN

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributos VALIGN</h1><BR>

<table width=”300″ border=”2″ align=”center”>

<tr>

<td align=”center” valign=”top” height=”50″>1</td>

<td align=”center” valign=”middle”>2</td>

<td align=”center” valign=”bottom”>3</td>

</tr>

<tr>

<tH align=”center”>Alinhamento TOP</tH>

<tH align=”center”>Alinhamento MIDDLE</tH>

<tH align=”center”>Alinhamento BOTTOM</tH>

</tr>

</table>

</body>

</html>

____________________________________________________________

CELLSPACING

O atributo CELLSPACING define a distância entre as células e linhas, sendo aplicavél a tag

<TABLE>. Os valores informados neste atributo são em pixels.

Fígura 8.8 Modelo de uso do atributo CELLSPACING com valores variados

____________________________________________________________

Modelo de uso do atributo CELLSPACING

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributo CELLSPACING</h1><BR>

<table width=”300″ border=”2″ align=”center” cellspacing=”0″>

<tr>

<td align=”center” height=”30″>1</td>

<td align=”center” >2</td>

<td align=”center” >3</td>

</tr>

</table>

</body>

</html>

CELLPADDING

O atributo CELLPADDING defne a distância ente o conteúdo da célula em relação as suas

bordas, sendo aplicavél na tag <TABLE>. Os valores informados neste atributo são em pixels.

Fígura 8.9 Modelo de uso do atributo CELLPADDING com valores variados

____________________________________________________________

Modelo de uso do atributo CELLPADDING

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributo CELLPADDING</h1><BR>

<table width=”300″ border=”2″ align=”center” cellspacing=”0″ cellpadding=”10″>

<tr>

<td align=”center” >1</td>

<td align=”center” >2</td>

<td align=”center” >3</td>

</tr>

</table>

</body>

</html>

COLSPAN

O atributo COLSPAN é aplicado nas tags <TH> e <TD>, pois define quantas colunas uma

célula pode abranger. Por padrão, na maioria dos navegadores cada célula corresponde a uma coluna na

tabela.

Fígura 8.10 Modelo de uso do atributo COLSPAN

____________________________________________________________

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributo COLSPAN</h1><BR>

<table width=”300″ border=”2″ align=”center” cellspacing=”2″ cellpadding=”2″>

<tr>

<td align=”center” colspan=”2″>1</td>

<td align=”center”>2</td>

</tr>

<tr>

<td align=”center” >3</td>

<td align=”center” >4</td>

<td align=”center” >5</td>

</tr>

</table>

</body>

</html>

ROWSPAN

O atributo ROWSPAN é aplicado nas tags <TH> e <TD>, pois define quantas colunas uma

célula pode abranger. Por padrão, na maioria dos navegadores cada célula corresponde a uma coluna na

tabela.

Fígura 8.11 Modelo de uso do atributo ROWSPAN

____________________________________________________________

Modelo de uso do atributo ROWSPAN

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>Atributo ROWSPAN</h1><BR>

<table width=”300″ border=”2″ align=”center” cellspacing=”2″ cellpadding=”2″>

<tr>

<td align=”center” rowspan=”2″>1</td>

<td align=”center”>2</td>

<td align=”center”>3</td>

</tr>

<tr>

<td align=”center” >4</td>

<td align=”center” >5</td>

</tr>

</table>

</body>

</html>

8.4 CORES E IMAGEM NA TABELA

8.4.1 CORES NA TABELA

O atributo BGCOLOR é utilizado para aplicar cor de fundo a célula ou a tabela. Este atributo

pode ser inserido nas tags <TABLE> , <TD> e <TH>.

Fígura 8.12 Modelo de uso de cores de fundo

____________________________________________________________

Modelo de uso do atributo BGCOLOR

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>CORES NA TABELA</h1><BR>

<table width=”300″ border=”2″ align=”center” cellspacing=”2″ cellpadding=”2″>

<tr>

<td align=”center” bgcolor=”blue”>1</td>

<td align=”center” bgcolor=”green”>2</td>

<td align=”center” bgcolor=”magenta”>3</td>

</tr>

<tr>

<td align=”center” bgcolor=”red”>4</td>

<td align=”center” bgcolor=”white”>4</td>

<td align=”center” bgcolor=”yellow”>5</td>

</tr>

</table>

</body>

</html>

8.4.2 IMAGEM DE FUNDO NAS TABELAS

Semelhante a inserir cores de fundo, é possível colocar imagens com fundo da tabela. Essa

técnica é muito utilizada, e para isso usamos o atributo BACKGROUND. Este atributo pode ser utilizado nas

tags <TABLE>, <TD>, <TH>.

Fígura 8.13 Modelo de uso de imagens como fundo de tabela.

____________________________________________________________

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h1>IMAGENS NA TABELA</h1><BR>

<table width=”300″ border=”2″ align=”center” cellspacing=”2″ cellpadding=”2″

background=”ft02.gif”>

<tr>

<td align=”right” valign=”bottom”><H2>Modelo de Imagem de Fundo<H2></TD>

</tr>

</table>

</body>

</html>

 

Deixe uma resposta

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s