tabela border frame rules

Prévia do material em texto

www.tiexpert.net Pág. 1 de 2 
Bordas, Regras e Frames de Tabelas
Iremos tratar agora com a parte de bordas da tabela.
A tag TABLE possui alguns atributos que são utilizados exclusivamente para o controle das 
bordas da tabela usando regras (rules) e quadros (frames).
A princípio criaremos uma tabela com uma borda de dois pixels. A largura da borda é sempre 
controlada pelo atributo BORDER.
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="10">
 <TR>
 <TD>Célula 1</TD>
 <TD>Célula 2</TD>
 </TR>
 <TR>
 <TD>Célula 3</TD>
 <TD>Célula 4</TD>
 </TR>
</TABLE>
Frame
Agora que temos nossa tabela com bordas, usaremos o atributo FRAME para controlar a forma 
como essas bordas aparecerão. Assim, podemos controlar facilmente o aspecto de nossa 
tabela.
O atributo FRAME aceita 9 valores diferentes:
• void: Este é o valor padrão do frame, no qual não há lados escolhidos. 
• above: Borda só na parte de cima. 
• below: Borda só na parte de baixo. 
• hsides: Apenas bordas horizontais, ou seja, bordas nas partes de cima e de baixo. 
• vsides: Apenas bordas verticais, ou seja, bordas ao lado direito e esquerdo. 
• lhs: Borda só no lado esquerdo. 
• rhs: Borda só no lado direito. 
• box: Borda nos quatro cantos. 
• border: Borda nos quatro cantos. 
Como exemplo usaremos a mesma tabela acima, porém apenas com bordas ao lado direito e 
esquerdo.
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="10" FRAME="vsides">
 <TR>
 <TD>Célula 1</TD>
 <TD>Célula 2</TD>
 </TR>
 <TR>
 <TD>Célula 3</TD>
 <TD>Célula 4</TD>
 </TR>
</TABLE>
A princípio, Internet Explorer e Firefox irão renderizar a tabela de forma diferente. Vejamos:
Renderização no Internet Explorer
http://www.tiexpert.net/programacao/web/html/tabela-border-frame-rules.php
www.tiexpert.net Pág. 2 de 2 
Renderização no Firefox
Rules
Para termos total controle sobre a forma como as bordas irão se comportar dentro de uma 
tabela, além do atributo FRAME, devemos usar também o atributo RULES que determinará a 
regra de como será aplicado o frame.
O atributo RULES possui 5 valores:
• none: Sem regras específicas de aplicação do frame. Este é o valor padrão de regras 
(rules). 
• groups: Faz com que o frame seja aplicado apenas entre grupos, tanto de linhas 
(THEAD, TFOOT, TBODY) como de colunas (COLGROUP, COL). 
• rows: Faz com que o frame seja aplicado apenas entre as linhas. 
• cols: Faz com que o frame seja aplicado apenas entre as colunas. 
• all: Faz com que o frame seja aplicado na tabela como um todo. 
Para que o exemplo mostrado anteriormente seja mostrado de forma parecida tanto no 
Internet Explorer quanto no Firefox, usaremos a regra para todos (all).
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="10" FRAME="vsides" RULES="all">
 <TR>
 <TD>Célula 1</TD>
 <TD>Célula 2</TD>
 </TR>
 <TR>
 <TD>Célula 3</TD>
 <TD>Célula 4</TD>
 </TR>
</TABLE>
Pronto, agora ambos os browsers (navegadores) irão mostrar tabelas similares.
Autor: Denys William Xavier
Fonte: http://www.w3.org/TR/html401/struct/tables.html#h-11.3.1
Este artigo está sob Licença Creative Commons
Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by-nc-sa/2.5/br/
ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
http://www.tiexpert.net/programacao/web/html/tabela-border-frame-rules.php