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






HTML - Tabelas - Bordas

1 - Parâmetro BORDER  -   Sintaxe:  BORDER="X"
Para que uma tabela exiba bordas é possível utilizar dentro da tag de abertura table o parâmetro BORDER atribuindo-lhe um valor numérico, em pixels, com a finalidade de especificar a espessura da mesma. Quanto maior esse valor mais espessa será a borda. Se o valor não for especificado lhe é atribuído o valor 1 (default). Na ausência do parâmetro BORDER a tabela não apresentará bordas.


Exemplo 1: sem o parâmetro border, a tabela não apresentará bordas.
<table>
<tr><td>kithome</td></tr>
</table>

kithome


Exemplo 2: sem especificar o valor do parâmetro border (por default valor igual a 1)
<table border>
<tr><td>kithome</td></tr>
</table>

kithome

Exemplo 3: com valor 4 no parâmetro border:
<table border="4">
<tr><td>kithome</td></tr>
</table>

kithome

Outros exemplos:

<TABLE border ="1">

<TABLE border ="5">

<TABLE border ="10">

 


2 - Para que as bordas sejam exibidas com cores utilizam-se os parâmetros BORDERCOLOR, BORDERCOLORLIGHT e BORDERCOLORDARK.

2.1 - BORDERCOLOR  -  Parâmetro utilizado para definir a cor da borda de uma tabela inteira ou para células individualmente. Deverá estar acompanhado obrigatoriamente do parâmetro BORDER.
Sintaxe: BORDERCOLOR="código hexadecimal ou nome da cor"

Exemplo 1: uma linha e duas colunas com parâmetro bordercolor="#0000FF".
<table border="1" bordercolor="#FF0000">
<tr><td>kithome</td><td>kithome</td></tr>
</table>

kithome kithome

Exemplo 2: duas linhas e duas colunas sendo que a 1ª  e 4ª possuem bordas personalizadas individualmente.
 <table border="2" bordercolor="#000080" width="100">
<tr><td bordercolor="#FF0000">kithome</td><td>kithome</td></tr>
<tr><td>kithome</td><td bordercolor="#0000FF">kithome</td></tr>
</table>

kithome kithome
kithome kithome

2.2 - BORDERCOLORLIGHT -  utilizado para dar uma aparência tridimensional permitindo selecionar a cor mais clara de uma borda criando um efeito de luz. Deverá estar acompanhado do atributo BORDER.
Sintaxe: BORDERCOLORLIGHT="nome da cor ou código hexadecimal"

Exemplo: border com valor 3 e  bordercolorlight na cor vermelha
<TABLE border="3" bordercolorlight="Red">
<TR><TD>coluna1</TD><TD>coluna2</TD></TR>
<TR><TD>coluna1</TD><TD>coluna2</TD></TR>
<TR><TD>coluna1</TD><TD>coluna2</TD></TR>
</TABLE>

coluna1coluna2
coluna1coluna2
coluna1coluna2

2.3 - BORDERCOLORDARK -  utilizado para dar uma aparência tridimensional permitindo selecionar a cor mais escura de uma borda criando um efeito de luz. Deverá estar acompanhado do atributo BORDER.
Sintaxe: BORDERCOLORDARK="nome da cor ou código hexadecimal"

Exemplo: border com valor 3 e  bordercolordark na cor vermelha
<TABLE border="3" bordercolordark="Red">
<TR><TD>coluna1</TD><TD>coluna2</TD></TR>
<TR><TD>coluna1</TD><TD>coluna2</TD></TR>
<TR><TD>coluna1</TD><TD>coluna2</TD></TR>
</TABLE>

coluna1coluna2
coluna1coluna2
coluna1coluna2

 


3 - Estilos de bordas - aplicando estilos as bordas na tabela e células individualmente é possível criar uma gama de variações sem limites para a sua fantasia.
Grafia: style="border: N SOLID #XXXXXX" onde N é a espessura da borda em pixel, SOLID é o estilo de borda e XXXXXX o nome ou código da cor.

Estilos de bordas

Exemplo 1:
<table border style="border: 3 outset #993300" width="100">
<tr><td width="50%" border style="border: 3 outset #3399FF">kithome</td>
<td width="50%" border style="border: 3 outset #CC33FF">kithome</td></tr>
</table>

 kithome    kithome

Exemplo:2
<table border="1" style="border: 5 outset #0000FF">
<tr><td>kithome</td><td>kithome></td><td>kithome</td></tr>
<tr><td style="border: 2 dotted #FF0000">kithome</td><td>kithome</td><td>kithome</td></tr>
</table>

kithome kithome> kithome
kithome kithome kithome

 


4 - Estilo CSS  - você tem a opção de criar uma borda personalizada que poderá ser aplicada a lados específicos, e cada lado poderá ter diferentes estilo, cor e largura.

O 1º passo é inserir a propriedade STYLE="BORDER-COLLAPSE:COLLAPSE; dentro da tag de abertura TABLE e/ou tag de abertura TD da célula(s) pretendida(s).

O 2º passo é inserir dentro das tags de abertura as configurações  de estilo, cor e largura a cada lado da borda. Para isso a sintaxe geral é:
BORDER-LADO: N px TIPO #XXXXXX
onde LADO pode assumir os seguintes valores: LEFT (borda esquerda), RIGHT (borda direita), TOP (borda superior) e BOTTOM (borda inferior). Para  N atribuímos valores numéricos expressos em Pixels. O TIPO poderá ser solid (sólido), dotted (pontilhado), dashed (tracejado), double (duplo), groove (sulco), ridge (ressalto), insert (baixo relevo), outset (alto relevo), e  XXXXXX o nome ou código da cor.

Exemplos:
a)
<table style="border-collapse: collapse; border-left: 4px solid #0000FF" width="100">
<tr><td>kithome</td></tr>
</table>

kithome

b)
 <table style="border-collapse: collapse; border-left: 3px solid #ff0000; border-right: 3px solid #ff0000" width="100">
<tr><td>kithome</td></tr>
</table>

kithome
 


c)
<table  style="border-collapse: collapse; border-left: 5px solid #0000FF; border-right: 5px solid #800080; border-top: 5px solid #FF0000" width="100">
<tr><td>kithome</td></tr>
</table>

 

kithome
 

d)
<table width="200" style="border-collapse: collapse; border-left: 1px solid #008080; border-right: 1px solid #111111; border-top: 1px solid #808080; border-bottom: 1px solid #FF00FF">
<tr>
<td style="border-left: 1px solid #00FFFF; border-right: 6px solid #FFFF00; border-top: 1px solid #00FF00; border-bottom: 6px solid #FF0000">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="border: 1px solid #0000FF">&nbsp;</td>
</tr>
</table>

  
  


A inclusão da formatação style="border-collapse: collapse" transforma a borda em linha simples,
que pode ser melhor percebido através do exemplo que segue::

A - <table border="1" bordercolor="#FF0000">
<tr><td>Exemplo A</td><td>Exemplo A</td></tr>
</table>

B - <table border="1" bordercolor="#FF0000" style="border-collapse: collapse">
<tr><td>Exemplo B</td><td>Exemplo B</td></tr>
</table>

Exemplo AExemplo A
Exemplo B Exemplo B

 


Considerações

  • Os parâmetros bordercolor, bordercolorlight, bordercolordark que possibilitam criar belos efeitos nas bordas, somente são visualizados corretamente no Internet Explorer, nos outros navegadores são visualizados de modo parcial ou incorretamente.

  • O modo correto para impostar cores as bordas é utilizar estilo CSS.

  • Quando não se especifica a altura e largura da tabela, ela é dimensionada conforme o conteúdo, isto é, a altura e largura das células se expandem automaticamente para que todo o conteúdo
    caiba dentro dela (ver exemplos dos itens 1, 2 e 3).