Curso de html para Cegos. Aula 7 - Tabelas.
Vamos ver ordenadamente (de fora para dentro) as etiquetas necessárias para
confeccionar as tabelas.
A etiqueta geral, que engloba todas as demais é <TABLE> e </TABLE>:
<TABLE>
Com isso se apresentam os dados tabulados, porém falta a característica mais
atrativa das tabelas, ou seja, as bordas, que dão uma noção de
trimensionalidade com relação ao fundo de página. Para isto, temos que acrescentar o
atributo BORDER à etiqueta:
<TABLE BORDER>
a seguir, dentro da anterior, estão as etiquetas para formar cada linha
(row) da tabela, que são <TR> e </TR>. Temos que repeti-las tantas vezes
quanto for o número de linhas que queremos em nossa tabela. A seguir, para
uma tabela de duas linhas:
<TR>
Em último nível (dentro das anteriores) estão as etiquetas de cada célula,
que são <TD> e </TD>, que englobam o conteúdo de uma determinada célula
(texto, imagens, etc.). Temos que repetir tantas vezes quantas forem as
celulas que queremos nesta linha.
Vejamos um exemplo de uma tabela com duas linhas. Cada linha vai ter três
celulas. Dentro de cada célula vamos colocar um texto explicativo da posição de
cada célula:
<CENTER>
Que resulta:
linha1-célula1 linha1-célula2 linha1-célula3
As linhas podem possuir desigual número de células entre si.
Títulos na tabela.
Podemos acrescentar um título (caption) à tabela, bastando colocar um texto
acima da tabela que indica qual o seu conteúdo. Conseguimos com as etiquetas
<CAPTION> e </CAPTION>.
Se no exemplo anterior acrescentarmos, após <TABLE>, a seguinte
linha:
Exemplo de tabela com linhas iguais.
Variando a espessura das bordas.
O atributo BORDER (visto mais acima) coloca por default uma borda com
espessura de uma unidade. Porém podemos aumentar ou diminuir a espessura da
borda da tabela, colocando:
Se no exemplo anterior colocarmos:
Cabeçalho das colunas.
Podemos colocar cabeçalho (header) nas colunas, que se diferenciam das
demais por estar em negrito e centralizado. Conseguimos com as etiquetas
<TH> e </TH> (em vez da normal <TD> e </TD>).
(Perceba que o <th> está no lugar da célula e não da linha <tr>)
Vamos acrescentar, no exemplo anterior, uma linha, antes das que já existem,
com o título de cada coluna:
<TR>
Que resulta:
Exemplo de tabela com linhas iguais.
Coluna 1 Coluna 2 Coluna 3
linha1-célula1 linha1-célula2 linha1-célula3
linha2-célula1 linha2-célula2 linha2-célula3 ..
Conteúdo das células.
Até agora, em todos os exemplos, existe um texto dentro de cada célula.
Porém, podemos colocar qualquer elemento que vai dentro de um documento HTML, como
imagens, links, etc.
Exemplo com uma imagem:
Exemplo com um link:
Posicionamento do conteúdo dentro de cada célula.
Normalmente, o conteúdo de uma célula está alinhado à esquerda. Porém podemos
trocar este acrescentando dentro da etiqueta de cada célula os seguintes
atributos:
O alinhamento por default no sentido vertical é ao centro.
Variando as dimensões da tabela.
Normalmente, o navegador se encarrega de dimensionar o tamanho total da tabela
de acordo com o número de linhas, de colunas, pelo conteúdo das células,
espessura das bordas, etc.
As vezes podemos "forçar" para que uma tabela tenha dimensões totais maiores,
tanto em altura como em largura. Conseguimos isto acrescentando-se dentro da
etiqueta da tabela os atributos WIDTH e HEIGHT igual a uma porcentagem da
dimensão do documento ou um número em pixels. Por exemplo:
<TABLE WIDTH=70%>
A tabela ficará circunscrita a 70% da largura da tela.
<TABLE HEIGHT=200>
A tabela ficará circunscrita em 200 pixels na altura.
Cor de fundo nas tabelas.
Podemos conseguir que as tabelas tenham uma cor de fundo, seguindo um
procedimento totalmente análogo ao empregado para que uma página tenha uma cor
de fundo uniforme. Para isso devemos utilizar o atributo
BGCOLOR="#XXYYZZ"
<CENTER><TABLE BORDER BGCOLOR="#00FF00">
Que somente uma determinada célula tenha uma cor de fundo. Para isso,
colocamos o atributo dentro da etiqueta da célula correspondente. Por
exemplo, vamos fazer com que só a célula1 da linha1 tenha cor verde:
<td bgcolor="#00ff00"> linha1-celula1</td>
Que todas as células tenham uma cor, porém algumas células com uma cor
particular. O atributo da cor geral colocamos na etiqueta TABLE, e as
cores particulares nas células em questão (uma combinação dos casos
anteriores). Por exemplo, vamos fazer com que a tabela tenha a cor de
fundo vermelha (#FF0000), porém a célula1 da linha1 seja de cor azul
(#0000FF):
<CENTER><TABLE BORDER BGCOLOR="#FF0000">
<TR>
Imagens de fundo nas tabelas.
O Internet Explorer da Microsoft suporta a colocação de imagens de fundo no
interior das tabelas, de uma maneira análoga de uma página.
Para isso, devemos utilizar o atributo BACKGROUND="imagem.gif" ou
BACKGROUND="imagem.jpg".
Se utilizada dentro da etiqueta <TABLE> a imagem em questão se multiplicará
atrás de todas as células.
Por exemplo, se colocarmos:
<CENTER><TABLE BORDER BACKGROUND="fundo.jpg">
Que resultará em uma tabela com 4 figuras fundo.jpg em duas linhas e
duas colunas.
Se só for colocada uma única célula em toda a tabela, logicamente, essa
ocupará o tammanho inteiro da tabela. É conveniente, nesse caso, que a
etiqueta de imagem de fundo.jpg esteja como etiqueta da célula.
Separação entre células de uma tabela.
Por default, a separação entre as diferentes células de uma tabela é de dois
pixels. Porém, podemos mudar isto com o atributo CELLSPACING, que se coloca
dentro da etiqueta TABLE.
Separação entre a borda e o conteúdo das células.
Por default, a separação entre a borda e o conteúdo da célula é de um pixel.
Podemos trocar isto com o atributo CELLPADDING, que se coloca dentro da
etiqueta TABLE.
<HTML>
Obs: repare que esta página de html está feita com uma tabela, salve o
código no "salvar como" na opção "somente html" e
verifique como foi feita.
|