| Principais Partidos | |
|---|---|
| PMDB | 13 |
| PSDB | 10 |
| PFL | 9 |
| PT | 7 |
Um recurso especialmente �til para formatar o documento � a utiliza��o de tabelas. Para criar uma tabela usa-se o marcador:
<table align=left|center|right width=n|p% border[=n] cellspacing=n cellpadding=n bgcolor=#RRGGBB></table>
O atributo align define o alinhamento da tabela em rela��o � p�gina, e n�o do conte�do das c�lulas. A largura da tabela � definida pelo atributo width, e pode ser determinado em pixels ou em uma porcentagem da janela do browser. Podemos definir o uso de bordas na tabela com o atributo border, cujo valor default quando este atributo � declarado � 1 (se este atributo for omitido a tabela n�o ter� bordas). O atributo cellspacing define o n�mero de pixels entre o conte�do da c�lula e suas bordas, e o atributo cellpadding define o n�mero de pixels entre as c�lulas. O atributo bgcolor permite definir uma cor de fundo para a tabela. Podemos definir um t�tulo para a tabela usando o marcador:
<caption align=top|bottom>[</caption>]
O atributo align define se o t�tulo vai aparecer na parte superior (top) ou na parte inferior (bottom) da tabela. O texto delimitado por este marcador ser� exibido como t�tulo da tabela, normalmente centralizado e em negrito. O marcador caption deve aparecer imediatamente ap�s o marcador table e antes das linhas da tabela. Para criar as linhas da tabela usa-se o marcador:
<tr align=left|center|right valign=top|middle|bottom|baseline bgcolor=#RRGGBB>[</tr>]
O atributo align define o alinhamento horizontal de todas as c�lulas da linha, e valign o alinhamento vertical. O alinhamento vertical baseline indica que todas as c�lulas da linha devem ter a primeira linha de texto alinhadas. O atributo bgcolor permite definir uma cor de fundo para a linha e tem preced�ncia sobre a cor de fundo especificada para a tabela. As c�lulas s�o definidas com o marcador:
<td align=left|center|right valign=top|middle|bottom|baseline nowrap width=n height=n rowspan=n colspan=n bgcolor=#RRGGBB>[</td>]
Os valores de align e valign definidos para a c�lula t�m prioridade sobre os valores definidos para a linha. Para fazer com que o texto contido na c�lula n�o seja quebrado em v�rias linhas deve-se declarar o atributo nowrap. Os atributos width e height permitem indicar a largura e a altura da c�lula, em pixels. � poss�vel indicar que uma c�lula deve ocupar mais de uma linha ou mais de uma coluna, usando os atributos rowspan e colspan. O atributo bgcolor permite definir uma cor de fundo para a c�lula e tem preced�ncia sobre a cor de fundo especificada para a linha ou tabela. Para definir c�lulas de cabe�alho devemos usar o marcador:
<th align=left|center|right
valign=top|middle|bottom|baseline nowrap width=n height=n
rowspan=n colspan=n bgcolor=#RRGGBB>[</th>]
Os atributos deste marcador se comportam da mesma forma que os atributos do marcador td com exce��o do atributo align cujo valor default � center. Al�m disso o texto contido na c�lula � normalmente exibido em negrito. Aqui temos alguns exemplos de tabela:
| Vendas de Autom�veis no Varejo por Fabricante | ||
|---|---|---|
| Fabricante | 1995 | 1996 |
| Fiat | 124.345 | 135.670 |
| Ford | 74.431 | 73.575 |
| General Motors | 104.569 | 115.210 |
| Volkswagem | 152.340 | 169.632 |
A tabela acima foi criada com o seguinte c�digo:
<table>
<caption>Exemplo 1: Esta � uma tabela sem borda
<tr>
<th colspan=3>Vendas de Autom�veis no Varejo por Fabricante
<tr>
<th align=left>Fabricante
<th align=right>1995
<th align=right>1996
<tr>
<td>Fiat
<td align=right>124.345
<td align=right>135.670
<tr>
<td>Ford
<td align=right>74.431
<td align=right>73.575
<tr>
<td>General Motors
<td align=right>104.569
<td align=right>115.210
<tr>
<td>Volkswagem
<td align=right>152.340
<td align=right>169.632
</table>
| Vendas de Autom�veis no Varejo por Modelo | |||
|---|---|---|---|
| Fabricante | Marca (incluindo todos os modelos e categorias) | 1995 | 1996 |
| Fiat | Tempra | 12.345 | 15.670 |
| Uno | 101.275 | 105.692 | |
| Ford | Fiesta | 54.888 | 63.505 |
| General Motors | Corsa | 84.163 | 85.115 |
| Monza | 24.732 | 19.781 | |
| Vectra | 14.334 | 15.128 | |
| Volkswagem | Gol | 122.300 | 129.782 |
| Parati | 22.343 | 19.942 | |
A tabela acima foi criada com o seguinte c�digo:
<table align=center width=90% border=2 cellspacing=5
cellpadding=5 bgcolor=#BBFFBB>
<caption align=bottom>Exemplo 2: Uma tabela mais elaborada
<tr>
<th colspan=4 bgcolor=aqua>Vendas de Autom�veis no Varejo por Modelo
<tr bgcolor=#FFCCC8>
<th>Fabricante
<th align=left nowrap>Marca (incluindo todos os modelos e categorias)
<th align=right>1995
<th align=right>1996
<tr>
<th valign=top rowspan=2 bgcolor=yellow>Fiat
<td>Tempra
<td align=right>12.345
<td align=right>15.670
<tr>
<td>Uno
<td align=right>101.275
<td align=right>105.692
<tr>
<th valign=top bgcolor=lime>Ford
<td>Fiesta
<td align=right>54.888
<td align=right>63.505
<tr>
<th valign=top rowspan=3 bgcolor=silver>General Motors
<td>Corsa
<td align=right>84.163
<td align=right>85.115
<tr>
<td>Monza
<td align=right>24.732
<td align=right>19.781
<tr>
<td>Vectra
<td align=right>14.334
<td align=right>15.128
<tr>
<th valign=top rowspan=2 bgcolor=red>Volkswagem
<td>Gol
<td align=right>122.300
<td align=right>129.782
<tr>
<td>Parati
<td align=right>22.343
<td align=right>19.942
</table>
Usando tabelas podemos formatar o documento de maneiras que n�o seriam poss�veis de outra forma. As c�lulas podem conter tabelas, imagens, formul�rios, etc. � possivel tamb�m sobrepor c�lulas usando adequadamente os atributos rowspan e colspan. Ademais, n�o colocando borda na tabela ela fica ainda mais adequada para o prop�sito de formata��o. No exemplo a seguir, sobrepomos c�lulas de modo a mesclar as imagens e criamos uma tabela pequena dentro da tabela maior usada para formatar:
|
| ||||||||||
|
| ||||||||||
| ||||||||||
| Brasil | ||||||||||
Esta tabela foi gerada com o seguinte c�digo:
<table>
<tr>
<td width=300>
<td rowspan=4 colspan=2><img src=logohome.jpg>
<tr>
<td align=right valign=top colspan=2><img src=brasaotr.gif width=70>
<tr>
<td>
<div align=right>
<table border>
<tr>
<th colspan=2>Principais Partidos
<tr>
<th align=left>PMDB</th>
<td align=right>13
<tr>
<th align=left>PSDB</th>
<td align=right>10
<tr>
<th align=left>PFL</th>
<td align=right>9
<tr>
<th align=left>PT</th>
<td align=right>7
</table>
</div>
<tr>
<td colspan=3 align=right><font size=7 color=red><b><i>Brasil</i></b>
</table>
Definindo bordas para a tabela fica vis�vel a superposi��o de c�lulas:
|
| ||||||||||
|
| ||||||||||
| ||||||||||
| Brasil | ||||||||||