Tabelas em HTML: tags e atributos

Prévia do material em texto

www.tiexpert.net – O ponto de encontro do estudante de TI
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. 
http://www.tiexpert.net/ver.php?page=162 Página 1
www.tiexpert.net – O ponto de encontro do estudante de TI
• 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.
http://www.tiexpert.net/ver.php?page=162 Página 2
www.tiexpert.net – O ponto de encontro do estudante de TI
...
<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"
http://www.tiexpert.net/ver.php?page=162 Página 3
www.tiexpert.net – O ponto de encontro do estudante de TI
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
Fonte: w3.org
Autor: Denys William Xavier
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/ver.php?page=162 Página 4