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

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
Este artigo está sob Licença Creative Commons.
Fonte: W3C.org.