Elementos HTML 23
Pré-visualização7 páginas
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ó