HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






HTML - Tabelas - Plano de Fundo

Mediante o parâmetro BGCOLOR se pode colorir o fundo de uma tabela ou células individualmente e através do parâmetro BACKGROUND decorar o fundo das mesmas com uma imagem.

O parâmetro BGCOLOR deverá ser inserido dentro da tag de abertura TABLE ou TD.

A sintaxe poderá ser de uma das seguintes formas:
bgcolor="XXXXXX" onde XXXXXX é o código hexadecimal da cor . 
bgcolor="rgb(X,X,X)" onde X pode variar de 0 a 255.
bgcolor="XXXX"onde XXXX é o nome da cor na língua Inglesa.

Exemplo:
<table bgcolor="#BBBBBB" border="1" width="330">
<tr><td bgcolor="#DDFEFE">DDFEFE</td><td>&nbsp;</td><td bgcolor="#DDFEFE">DDFEFE</td></tr>
<tr><td>&nbsp;</td><td bgcolor="rgb(255,0,0)">rgb(255,0,0)</td><td>&nbsp;</td></tr>
<tr><td bgcolor="WHITE">white</td><td>&nbsp;</td><td bgcolor="WHITE">white</td></tr>
</table>

Resultado:

DDFEFE

 

DDFEFE

 

rgb(255,0,0)

 

white

 

white

Observações:

Se não inserir o parâmetro BGCOLOR na tag TABLE o fundo da tabela ou células não formatadas assumirá a cor do fundo da  página ou elemento que a contém.

Exemplo:
<table border="1" width="330">
<tr>
<td>não formatada</td><td bgcolor="#DDFEFE">formatada</td></tr>
<tr><td>não formatada</td><td>não formatada</td></tr>
</table>

Resultado:
 

não formatada formatada
não formatada não formatada

 

A formatação da cor de fundo da célula prevalece sobre a da tabela, conforme se pode verificar no exemplo a seguir:
<table bgcolor="BBBBBB" border="1" width="330">
<tr>
<td>não formatada</td><td bgcolor="#DDFEFE">formatada</td></tr>
<tr><td>não formatada</td><td>não formatada</td></tr>
</table>

Resultado:

não formatadaformatada
não formatadanão formatada



 As cores devem ser escolhidas com atenção e devem se harmonizar com as cores do site,  e principalmente escolher cores de fundo e texto que facilitem a leitura.

 

O parâmetro BACKGROUND insere uma figura de fundo na tabela ou nas células individualmente.

BACKGROUND - define uma imagem como plano de fundo da tabela ou células individualmente, sendo que se o tamanho da imagem for menor que a página ela será repetida de forma a preencher todo o espaço da página.

O valor do parâmetro BACKGROUND é um URL (endereço) que define o local (servidor) onde pode ser encontrada a imagem e pode ser relativo ou absoluto.
URL relativo:      <body background="../../../images/planfun.jpg">
URL absoluto:  <body background="http://www.kithomepage.com/images/planfun.jpg">

Exemplo:
<table background="image7.gif" border="1" width="330">
<tr>
<td>não formatada</td><td background="image7.gif">botão interativo</td></tr>
<tr><td>não formatada</td><td>não formatada</td></tr>
</table>

Click aqui para ver um exemplo

As observações acima também são válidas para plano de fundo com imagens.

<table border="6" background="http://kithomepage.com/kit/tutorial/css/images/miniaturas/image7.gif" cellspacing="4" cellpadding="4" width="660" height="400" bordercolor="#FFFFFF">
<tr>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="149" background="/images/num/image13.gif">blablabla
</td>
</tr>
</table>

Resultado:
   
  blablabla