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 » Tabelas - tag TABLE

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:

Célula 1

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>
...
Célula 1 Célula 2
Célula 3 Célula 4

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:

Célula 1 Célula 2
Célula 1 Célula 2

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:

Célula 1 Célula 2
Célula 1 Célula 2

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:

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

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"

Fonte: w3.org
Características - tag TABLE (tabela)
uso HTML 4.01 <TABLE><TR><TD> ... </TD></TR></TABLE>
XHTML <TABLE><TR><TD> ... </TD></TR></TABLE>
HTML 5 <TABLE><TR><TD> ... </TD></TR></TABLE>
Formatação Padrão fonte Serif, 16px
cor #000000 (Preto)
cor de fundo transparente
largura ajustado ao conteúdo
altura ajustado ao conteúdo
borda nenhuma
visualização tabela
Atributos Aceitos id, class, lang, dir, title, style, bgcolor, frame, rules, border, cellspacing, cellpadding
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

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

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 46479 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