Programação
 › Algoritmo  › C/C++  › Java
Web
 › HTML/XHTML  › JavaScript  › PHP
Sistema Operacional
 › Comandos de DOS  › Windows  › Linux  › Mac/BSD
Office
 › Word / Writer  › Excel / Calc
Áreas do Site
 › Download  › Fórum  › Blog
Recomendamos
Computadores e Informática em Lisboa
TI Expert » Programação » Web » HTML/XHTML » Bordas, Regras e Frames de Tabelas

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

Exemplo de renderização da tag TABLE com o atributo FRAME no Internet Explorer

Renderização no Firefox

Exemplo de renderização da tag TABLE com o atributo FRAME 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.

Creative Commons License
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.
Fonte: W3C.org.

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 31405 vezes
Bookmark e Compartilhe

Páginas Relacionadas

Enquete
O Google Chrome OS irá desbancar o Microsoft Windows 7?
» ProgramaçãoAlgorítmo | C/C++ | Java

» WebHTML/XHTML | JavaScript | PHP

» Sistema OperacionalComandos de DOS | Windows | Linux | Mac/BSD

» OfficeWord/Wirter | Excel/Calc

» Áreas do SiteDownloads | Fórum | Blog