TABELAS EM HTML
Uma tabela em um conjunto de celulas organizadas dentro das quais podemos alojar distintos conteudos.
A principio, poderia parecer que as tabelas sao raramente uteis e que podem ser utilizadas simplesmente para listar dados como agendas, resultados e outros dados de uma forma organizada. Nada mais distante
da realidade.
Hoje, grande parte dos desenhadores de paginas baseia seu planejamento neste tipo de engenhoca. De
fato, uma tabela nos permite organizar e distribuir os espacos da melhor forma. Pode nos ajudar a gerar
textos em colunas como os jornais, prefixar os tamanhos ocupados por distintas secoes da pagina ou
colocar de uma maneira simples uma legenda a uma imagem.
Pode ser que a principio seja um pouco complicado trabalhar com estas estruturas mas, se desejamos
criar uma pagina de qualidade, mais cedo ou mais tarde teremos que nos ver com elas e nos dar conta
das possibilidades que nos oferecem.
Para comecar, nada mais simples do que pelo principio: as tabelas sao definidas pelas etiquetas <table>
e </table>
Dentro dessas duas etiquetas colocaremos todas as outras etiquetas, textos e imagens que darao forma e
conteudo a tabela.
As tabelas sao descritas por linhas da esquerda para direita. Cada uma destas linhas e definida por outra
etiqueta e seu fechamento: <tr> e </tr>
Ainda assim, dentro de cada linha, havera diferentes celulas. Cad uma dessas celulas sera definida por
outro par de etiquetas:<td> e </td>. Dentro desta etiqueta sera onde colocaremos nosso conteudo.
Aqui temos um exemplo de estrutura de tabela:
<table>
<tr>
<td>Celula 1, linha 1</td>
<td>Celula 2, linha 2</td>
</tr>
<tr>
<td>Celula 1, linha 2</td>
<td>Celula 2, linha 2</td>
</tr>
</table>
O resultado:
Celula 1, linha 1 Celula 2, linha1
Celula 1, linha 2 Celula 2, linha 2
NOTA: Ate aqui vimos todas as etiquetas que necessitamos conhecer para criar as tabelas. Existem
outras etiquetas, mas o que podemos conseguir com elas se pode conseguir tambem usando as que ja
vimos.
Por exemplo, assinalamos a etiqueta <th>, que serve para criar uma celula cujo conteudo esteja
formatado como um titulo ou cabecalho da tabela. Na pratica, o que faz e colocar em negrito e
centralizado o conteudo dessa celula, o que se pode conseguir aplicando as correspondentes etiquetas
dentro da celula. Assim:
<td align="center"><b>Conteudo da celula</b></td>
A partir desta ideia simples, as tabelas adquirem outra magnitude quando lhes incorporamos toda uma
bateria de atributos aplicados sobre cada tipo de etiquetas que as compoem. Ao longo dos proximos
capitulos nos aprofundaremos no estudo desses atributos de forma a proporcionar-lhe tudo que e util e
indispensavel para um bom arranque em paginas.
Tabelas em HTML. Atributos para filas e células.
Vimos no capitulo anterior que as tabelas estao compostas de linhas que, por sua vez, contem celulas. As
celulas sao delimitadas pelas etiquetas <td> ou pelas etiquetas <th> (se queremos texto em negrito e
centralizado) e constituem um entorno independente do resto do documento. Isto quer dizer que:
・ Podemos usar praticamente qualquer tipo de etiqueta dentro da etiqueta <td> para, desta forma,
dar forma a seu conteudo.
・ As etiquetas situadas no interior da celula nao modificam o resto do documento.
・ As etiquetas de fora da celula nao sao tidas em conta por esta.
Sendo assim, podemos especificar o formato de nossas celulas a partir de etiquetas introduzidas em seu
interior ou mediante atributos colocados dentro da etiqueta de celula <td> ou tambem, em alguns casos,
dentro da etiqueta <tr>, se desejamos que o atributo seja valido para toda a linha. A forma mais util e
atual de dar forma as celulas e a partir das folhas de estilo em cascata que ja teremos a oportunidade de
abordar mais adiante.
Vemos em seguida alguns atributos uteis para a construcao de nossas tabelas. Comecamos vendo
alguns atributos que nos permite modificar uma celula em concreto ou toda uma linha.
align Justifica o texto da celula da mesma forma que se fosse o de um paragrafo.
valign Podemos escolher se queremos que o texto apareca acima (top), no centro (middle) ou abaixo
(bottom) da celula.
bgcolor Da cor a celula ou escolha de linha.
bordercolor Define a cor da borda.
Outros atributos que podem ser unicamente atribuidos a uma celula e nao ao um conjunto de celulas de
uma linha sao:
background Permite-nos colocar um fundo para a celula a partir de um link a uma imagem.
height Define a altura da celula em pixels ou porcentagem.
width Define a largura da celula em pixels ou porcentagem
colspan Expande um celula horizontalmente.
rowspan Expande um celula verticalmente.
Nota: O atributo height nao funciona em todos os navegadores, ademais, seu uso nao esta
muito estendido. As celulas em geral, tem a altura que necessitam para caber todo o conteudo
que tenha inserido, ou seja, crescem o suficiente para que caiba o que colocamos dentro. O
atributo width sim que funciona em todos os navegadores e deve ser utilizado constantemente.
Se lhe atribuimos uma largura a celula, a largura sera respeitada e se a tal celula tiver muito
texto ou qualquer outro conteudo, a celula crescera um tanto para baixo quanto for o
necessario para caber o que colocamos. Uma observacao neste ultimo paragrafo. Trata-se que
se definimos uma celula de uma largura 100, por exemplo e colocamos na celula um conteudo
como uma imagem que meca mais de 100 pixels, a celula crescera em horizontalmente tanto
quanto for necessario para que a imagem caiba. Se o elemento, mesmo mais largo, fosse
divisivel (como um texto) a largura seria respeitada e o texto cresceria para baixo, ou o que e o
mesmo, em altura, como assinalamos no paragrafo anterior.
Estes ultimos quatro atributos descritos sao de grande utilidade. Concretamente, height e width nos
ajudam a definir as dimensoes de nossas celulas de uma forma absoluta (em pixel ou em pontos de tela)
ou de uma forma relativa, ou seja, por porcentagens referentes ao tamanho total da tabela.
Por exemplo:
<td width="80">
Dara uma largura de 80 pixels a celula. Entretanto,
<td width =80%>
Dara uma largura a celula do 80% da largura da tabela.
Ha de ter em conta que, definidas as dimensoes das celulas, o navegador vai fazer o que bondosamente
puder para satisfazer ao programador. Isto quer dizer que pode que em algumas ocasioes o resultado que
obtenhamos nao seja o esperado. Concretamente, se o texto apresenta uma palavra excessivamente
comprida pode que a largura da celula se veja aumentada para manter a palavra na mesma linha. Por
outro lado, se o texto e muito grande , a celula aumentara sua para poder mostrar todo o seu conteudo.
Analogamente se, por exemplo, definimos duas larguras distintas as celulas de uma mesma coluna, o
navegador nao saber qual atender. E por isso que e conveniente ter bem claro desde o principio como e a
tabela que queremos desenhar. Nao e demais saber se pre-desenhamos no papel se a complexidade e
importante. O HTML em geral e facil, mas as tabelas podem converte-se em um verdadeiro quebracabeca
se nao chegamos a compreende-las devidamente.
Os atributos rowspan e colspan sao tambem utilizados frequentemente. Gracas a isso e possivel expandir
celulas fundindo estas com suas vizinhas. O valor que podem tomar estas etiquetas e numerico. O
numero representa a quantidade de celulas fundidas.
Assim,
<td colspan="2">
Fundira a celula em questao com sua vizinha direita.
Esta celula tem um colspan="2"
Celula normal Outra celula
Do mesmo modo,
<td rowspan="2">
Celula
Esta celula tem rowspan="2", por isso Normal
tem fundida a celula abaixo.
Outra celula
normal
A celula expandira para baixo fundindo-se com a celula inferior.
O resto dos atributos apresentados apresenta uma utilidade e um uso bastante obvio. Por isso, os
deixamos a sua propria investigacao.
Tabelas em HTML. Atributos da tabela e conclusão.
Alem dos atributos especificos de cada celula ou linha, as tabelas podem ser adicionalmente formatadas
a partir dos atributos que nos oferece a propria etiqueta <table>. A seguir, mostramos aqueles que nos
podem parecer a principio mais importantes:
align Alinha horizontalmente a tabela em relacao ao seu entorno.
background Permite-nos colocar um fundo para a tabela desde um link a uma
imagem.
bgcolor Da cor de fundo a tabela.
border Define o numero de pixels da borda principal.
bordercolor Define a cor da borda.
cellpadding Define, em pixels, o espaco entre as bordas da celula e o conteudo da
mesma.
cellspacing Define o espaco entre as bordas (em pixels).
height Define a altura da tabela em pixels ou porcentagem.
width Define a largura da tabela em pixels ou porcentagem.
Os atributos que definem as dimensoes, height e width, funcionam de uma maneira analoga ao das
celulas, tal como vimos no capitulo anterior. Contrariamente, o atributo align nao nos permite justificar o
texto de cada una das celulas que compoem a tabela, mas sim que permite, justificar a propria tabela em
relacao ao seu entorno.
Vamos colocar tres exemplos de alinhamento de tabelas, centralizadas, alinhadas a direita e a esquerda.
Exemplo de tabela centralizada
Esta tabela esta centralizada
(aling="center"). Tem somente uma
celula.
Este seria um texto qualquer colocado ao lado de uma tabela
centralizada.
Exemplo de tabela alinhada à direita
Para que seja visto o
efeito de
alinhamento da
tabela devemos
colocar um texto ao lado e o texto ira rodear a tabela, assim
como ocorreria como as imagens alinhadas a um lado.
Esta tabela esta alinhada a direita
(aling="right"). Tem somente uma
celula.
Exemplo de tabela alinhada à esquerda
Para que seja visto o
efeito de
alinhamento da
tabela, devemos colocar um texto ao lado e o texto ira rodear a
tabela, assim como ocorreria com as imagens alinhadas a um
lado.
Esta tabela esta alinhada a esquerda
(aling="left"). Tem somente uma celula.
Os atributos cellpading e cellspacing ajudarao a dar a nossa tabela um aspecto mais estetico. A principio
pode nos parecer um pouco confuso seu uso mas com um pouco de pratica ja sera suficiente para saber
utiliza-los.
Na seguinte imagem podemos ver graficamente o significado destes atributos:
Voce mesmo pode comprovar que os atributos definidos para uma celula tem prioridade em relacao aos
definidos para uma tabela. Podemos definir, por exemplo, uma tabela com a cor de fundo vermelha e uma
das celulas com a cor de fundo verde. E assim, toda a tabela sera vista de cor vermelha manos a celula
verde. Da mesma forma, podemos definir uma cor azul para as bordas da tabela e fazer com que uma
celula particular seja mostrada com uma borda vermelha. (Apesar de que isto nao funcionara em todos os
navegadores devido ao fato de alguns nao reconhecerem o atributo bordercolor.)
Tabela de cor
vermelha de fundo
O atributo bgcolor da tabela esta
em vermelho.
Celula normal Esta celula esta em verde. Tem
o atributo bgcolor na cor verde
Tabelas aninhadas
O uso de tabelas aninhadas tambem e muito util. Da mesma forma que podiamos incluir listas dentro de
outras listas, as tabelas podem ser incluidas dentro de outras. Assim, podemos incluir uma tabela dentro
da celula de outra. A forma de funcionamento continua sendo o mesmo apesar de que a situacao pode se
complicar se o numero de tabelas incluidas dentro de outras for elevado.
Vamos ver um codigo de um aninhamento de tabelas. Veremos primeiro o resultado e em seguida, o
codigo, pois assim conseguiremos entende-lo melhor.
Celula da tabela principal
Tabela aninhada, celula 1 Tabela aninhada, celula 2
Tabela aninhada, celula 3 Tabela aninhada, celula 4
Este seria o codigo:
<table cellspacing="10" cellpadding="10" border="3">
<tr>
<td align="center">
Celula da tabela principal
</td>
<td align="center">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Tabela aninhada, celula 1</td>
<td>Tabela aninhada, celula 2</td>
</tr>
<tr>
<td>Tabela unida, celula 3</td>
<td>Tabela aninhada, celula 4</td>
</tr>
</table>
</td>
</tr>
</table>
Exemplos práticos
Estas sao as informacoes que pretendiamos transmitir-lhes sobre as tabelas em HTML. Agora seria
importante fazer algum exemplo de realizacao de uma tabela um pouco mais complexa. Por exemplo, a
seguinte:
Animais em perigo de extinção
Nome Cabecas Previsao 2010 Previsao 2020
Baleia 6000 4000 1500
Urso Pardo 50
Lince 10
0
Tigre 300 210
Outro exemplo de tabela com a qual podemos praticar:
Climas de América do Sul
Venezuela Argentina
Norte da America de
Sul. Paises como:
Colombia
Equador
Peru
Sul da America do Sul.
Paises como:
Chile
Uruguai
Paraguai
Floresta tropical, clima de savana,
clima maritimo com invernos
secos.
Climas maritimos com veroes
secos, com invernos secos,
climas frios, clima de estepe,
clima desertico.
Nenhum comentário:
Postar um comentário