Tabelas

Um item muito utilizado em páginas HTML/XHTML é a tabela.

Tabelas são compostas por três tags diferentes, cada uma controlando uma função diferente.

A tag principal é a TABLE. Nesta tag serão definidos os comportamentos de nossa tabela como alinhamento, largura, espaçamento, etc.

Dentro da tabela deve haver pelo menos uma linha que é definida pela tag TR.

Dentro de toda linha deve haver pelo menos uma célula que é definida pela tag TD. Se mais de uma célula for inserida dentro de uma linha, então, será criado uma coluna para separá-las. O que estiver escrito dentro da tag que controla a célula será apresentado no browser.

Abaixo está uma tabela padrão com apenas uma linha e uma célula.

...
<TABLE>
  <TR>
    <TD>Célula 1</TD>
  </TR>
</TABLE>
...

O que demonstra o seguinte:

Agora, uma tabela com duas linhas e duas células.

...
<TABLE>
  <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>
...

Modificando Aspecto da Tabela

Existem atributos em uma tabela que podem ser modificados que afetam diretamente sua aparência.

• WIDTH: Controla a largura da tabela como um todo. Tabelas são renderizadas, por padrão, a se auto-ajustarem ao conteúdo das células e ao tamanho do elemento ao qual está aninhada. O atributo WIDTH da tag TABLE aceita dois tipos de valores:
• Fixo: um número inteiro que repesenta a largura fixa em pixels.
• Porcentagem: um número inteiro seguido de porcentagem que representa a porção do elemento que deve ser preenchida pela tabela. (Ex.: WIDTH="50%" faria com que a tabela ocupasse metade do elemento ao qual está aninhada)
• CELLSPACING: Determina o espaçamento entre uma célula e outra.
• CELLPADDING: Configura o espaçamento interno da célula. Por padrão, o valor de CELLPADDING é 0, ou seja, as bordas da célula estão sempre justas no conteúdo.
• BORDER: Modifica a largura da borda. Se o atributo BORDER for definido como 0, então, nenhuma borda será apresentada.
• ALIGN: É um atributo possível, porém, está definido como antiquado (deprecated) pelo W3C. Possui apenas três opções:
• left:
• center
• right

Veja os exemplos abaixo:

...
<TABLE WIDTH="400" CELLSPACING="10" CELLPADDING="0" BORDER="4">
  <TR>
    <TD>Célula 1</TD>
    <TD>Célula 2</TD>
  </TR>
  <TR>
    <TD>Célula 1</TD>
    <TD>Célula 2</TD>
  </TR>
</TABLE>
...

Mostra a seguinte tabela:

Modificando um pouco os atributos, temos uma nova tabela:

...
<TABLE WIDTH="200" CELLSPACING="2" CELLPADDING="5" BORDER="1">
  <TR>
    <TD>Célula 1</TD>
    <TD>Célula 2</TD>
  </TR>
  <TR>
    <TD>Célula 1</TD>
    <TD>Célula 2</TD>
  </TR>
</TABLE>
...

O que mostra a seguinte tabela:

Resumo (summary)

Um recurso recomendado pelo W3C, porém pouquíssimo utilizado, é o resumo. O resumo é definido pelo atributo SUMMARY que pertence a tag TABLE.

Resumos são utilizados principalmente para leitores virtuais ou sintetizadores que são utilizados para converter textos em som.

Como demonstração, usaremos uma tabela estatística retirada do site do IBGE sobre População residente - Brasil - 1997-2003.

...
<TABLE WIDTH="250" CELLSPACING="0" CELLPADDING="2" BORDER="1"
  SUMMARY="Esta tabela demonstra a população residente no Brasil entre 1997 e 2003">
  <TR>
    <TD>Ano</TD>
    <TD>População residente</TD>
  </TR>
  <TR>
    <TD>1997</TD>
    <TD>163 470 521</TD>
  </TR>
  <TR>
    <TD>1998</TD>
    <TD>165 687 517</TD>
  </TR>
  <TR>
    <TD>1999</TD>
    <TD>167 909 738</TD>
  </TR>
  <TR>
    <TD>2000</TD>
    <TD>169 799 170</TD>
  </TR>
  <TR>
    <TD>2001</TD>
    <TD>172 385 826</TD>
  </TR>
  <TR>
    <TD>2002</TD>
    <TD>174 632 960</TD>
  </TR>
  <TR>
    <TD>2003</TD>
    <TD>176 876 443</TD>
  </TR>
</TABLE>
...

Em um browser gráfico apareceria assim:

Mas um sintetizador ou leitor digital converteria a tabela em forma sonora da seguinte forma:

"Esta tabela demonstra a população residente no Brasil entre 1997 e 2003 - Ano - População residente - 1997 - 163 470 521 - 1998 - 165 687 517 - 1999 - 167 909 738 - 2000 - 169 799 170 - 2001 - 172 385 826 - 2002 - 174 632 960 - 2003 - 176 876 443"

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

Gostou? Indique nosso site!

Este artigo foi lido 5860 vezes

Páginas Relacionadas