Elementos HTML 23

com o atributo width; se essa largura 
não for suficiente para a largura do texto, então haverá quebras de linha e a célula 
crescerá automaticamente na altura. Além disso, há de se considerar o fato de que esse 
atributo não é contemplado por todos os browsers. Mas há situações em que sua 
utilização pode ser interessante. 
Apesar de funcionar, não há muito sentido na utilização de height em <td> porque não 
há como fazer com que células pertencentes a uma mesma linha apresentem-se com 
alturas diferenciadas. O que ocorre é que a linha toda assume altura da célula de maior 
altura. Assim é preferível definir a altura em <tr>. Dá mais clareza ao código. 
O funcionamento de height é muito parecido com o de width, mas height, em vez de 
atuar na largura, atua na altura, obviamente. Então, para se ter uma idéia a respeito, você 
pode ler as considerações feitas em width. Observe, entretanto, que <tr> nao possui 
width. 
align 
Como atributo de <table> 
Define o alinhamento da tabela dentro da página e controla o fluxo do texto ao seu 
redor. Tal texto é o que é digitado imediatamente após a tag </table>. Descrevemos 
abaixo como isso funciona com cada um dos valores que podemos atribuir. 
left - A tabela coloca-se à esquerda da página. O texto tem seu início na 
linha nivelada com o canto superior direito da tabela, contornando-a. 
Exemplo: <table align="left">...</table>texto 
right - A tabela coloca-se à direita da página. O texto tem seu início na 
linha nivelada com o canto superior esquerdo da tabela, contornando-a. 
Exemplo: <table align="right">...</table>texto 
center - A tabela coloca-se no centro da página. O fluxo do texto não é afetado, ou seja, 
ele aparece normalmente abaixo da tabela. 
Exemplo: <table align="center"> 
Observações: 
1) Os efeitos obtidos com left e right numa tabela são os mesmos que se obtém com 
uma imagem, mas, quanto aos obtidos em <img> através dos valores bottom, middle e 
top, não há para eles correspondentes em <table>. 
2) O alinhamento de uma tabela também pode ser definido no parágrafo que a contém, 
mas a definição em <table> prevalece sobre a feita em <p>. 
align 
Como atributo de <tr> e <td> 
Define o alinhamento horizontal do conteúdo das células. Quando é atribuído a <tr>, 
todas as células pertencentes à linha terão o alinhamento definido e, quando atribuído a 
<td>, somente a célula que teve a definição. Mesmo tendo feito a definição para a linha, 
você poderá fazê-la também para uma ou mais células. Assim todas as células terão um 
alinhamento igual, exceto as que tiveram uma definição particular. 
São os seguintes os valores que podem ser atribuídos: 
left - alinhamento à esquerda (o padrão). 
center - alinhamento ao centro. 
right - alinhamento à direita. 
Exemplos: 
<tr align="center"> 
<td align="right"> 
valign 
Como atributo de <tr> e <td> 
Define o alinhamento vertical do conteúdo das células. Quando é atribuído a <tr>, todas 
as células pertencentes à linha terão o alinhamento definido e, quando atribuído a <td>, 
somente a célula que teve a definição. Mesmo tendo feito a definição para a linha, você 
poderá fazê-la também para uma ou mais células. Assim todas as células terão um 
alinhamento igual, exceto as que tiveram uma definição particular. 
São os seguintes os valores que podem ser atribuídos: 
top - alinhamento no topo da célula. 
middle - alinhamento no meio da célula (o padrão). 
bottom - alinhamento na parte de baixo da célula. 
Exemplos: 
<tr align="middle"> 
<td align="bottom"> 
colspan 
Como atributo de <td> 
Expande a largura de uma célula. O valor atribuído é um número inteiro que 
corresponde à quantidade de colunas que a célula expandida abrange. 
Veja o exemplo: 
<table border="1"> 
<tr><td colspan="2" align="center">célula expandida</td></tr> 
<tr> 
<td>célula 1/linha 2</td> 
<td>célula 2/linha 2</td> 
</tr> 
</table> 
célula expandida 
célula 1/linha 2 célula 2/linha 2 
Veja ao lado a tabela criada no código exemplificado. Possui duas linhas: na segunda 
linha colocamos duas células e na primeira linha apenas uma com colspan="2". Assim 
criamos na primeira linha uma célula expandida que tem a largura igual à soma das 
larguras das células da segunda linha. Apenas para melhorar a estética, acrescentamos 
align="center". 
rowspan 
Como atributo de <td> 
Expande a altura de uma célula. O valor atribuído é um número inteiro que corresponde 
à quantidade de linhas que a célula expandida abrange. 
Veja o exemplo: 
<table border="1"> 
<tr> 
<td rowspan="3">célula 1(expandida)</td><td>célula 2/linha 1</td> 
</tr><tr> 
<td>célula 2/linha 2</td> 
</tr><tr> 
<td>célula 2/linha 3</td> 
</tr> 
</table> 
célula 1(expandida) 
célula 2/linha 1 
célula 2/linha 2 
célula 2/linha 3 
Veja ao lado a tabela criada no código exemplificado. Note que a criamos com três 
linhas: na primeira linha colocamos célula 1 e célula 2, sendo que a primeira foi 
expandida na altura com rowspan="3". Nas linhas 2 e 3, colocamos apenas célula 2, 
porque a célula 1 da primeira linha ocupa o espaço no sentido vertical. 
 
 
shape e coords 
Como atributos de <area> 
O atributo shape 
define o formato de uma área clicável de um mapa de imagens processado no cliente e 
coords estabelece as coordenadas dessa área em pixels. Os valores de coords devem ser 
separados por vírgulas. Abaixo, vamos tecer comentários sobre cada um dos formatos e 
apresentar exemplos com base na figura ao lado. 
rect - Cria uma área retangular. Temos obrigatoriamente quatro valores para coords, 
sendo que os dois primeiros (x1,y1) correspondem às coordenadas do vértice de um dos 
ângulos e os outros dois (x2,y2) às coordenadas do vértice do ângulo oposto. 
Exemplos: 
<area shape="rect" coords="21,16,132,87" href="arq.htm"> 
<area shape="rect" coords="132,16,21,87" href="arq.htm"> 
<area shape="rect" coords="21,87,132,16" href="arq.htm"> 
<area shape="rect" coords="132,87,21,16" href="arq.htm"> 
Os quatro exemplos fazem exatamente a mesma coisa, portanto deve-se adotar apenas 
um deles. Para apresentação desses exemplos, indicamos na figura as coordenadas dos 
vértices dos quatro ângulos, mas isso é desnecessário, porque você precisa apenas das 
coordenadas dos vértices de dois ângulos opostos. Aqui quisemos apenas demonstrar 
todas as possibilidades. 
circle - Cria uma área circular. Temos obrigatoriamente três valores para coords (x,y,r). 
Onde x e y são as coordenadas do centro do círculo e r o comprimento do seu raio. 
Exemplo: 
<area shape="circle" coords="226,59,52" href="arq.htm"> 
poly - Cria uma área poligonal. Temos obrigatoriamente para coords tantos valores 
quantos forem os ângulos. A quantidade de valores é indeterminada, porque um 
polígono pode possuir qualquer quantidade de ângulos. Então, 
coords=x1,y1,x2,y2,x3,y3,...,xn,yn. Onde x1 e y2 correspondem às coordenadas do 
vértice do primeiro ângulo, x2 e y2 às coordenadas do vértice do segundo ângulo e 
assim por diante. Isso tem de ser na ordem em que os pontos estão localizados no 
perímetro do polígono, percorrendo-o no sentido horário. Mas qual deve ser colocado 
primeiro não importa. Um triângulo tem três pontos, um losango quatro, um hexagono 
seis, etc. 
Exemplos: 
<area shape="poly" coords="327,16,424,41,413,106,341,77,363,44" href="arq.htm"> 
<area shape="poly" coords="424,41,413,106,341,77,363,44,327,16" href="arq.htm"> 
Os dois exemplos fazem a mesma coisa. No primeiro, iniciamos num ponto, no segundo 
noutro, mas seguimos a ordem de localização desses pontos no sentido horário. 
Observação: 
Você que conhece o sistema cartesiano pode se confundir ao estabelecer os pontos. No 
sistema cartesiano, a reta x cresce da esquerda para a direita e a y de baixo para cima. Já 
aqui a quantidade de pixels cresce a partir do topo da imagem em direção à parte de 
baixo e cresce a partir da extremidade esquerda em direção à extremidade direita. Note 
bem: é ao contrário só