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