Curso de HTML - Aula 8 - Tabelas - Final

[Autor: Gleison]

---

O HTML é uma linguagem que não possui formas de se organizar os itens, afinal ele encara a página como sequencias de linhas, sendo assim ao inserirmos uma imagem ao lado de um texto, ele interpreta como se a imagem fizesse parte do texto, isso se contar que não é possível inserir objetos em qualquer parte da página.
A única forma de burlarmos isso é usando Tabelas.
Para iniciarmos uma tabela devemos usar a tag , dentro dessa tag devemos criar as linhas usando a tag e nelas criarmos as colunas usando a tag .

____________________________________________________________________________________

Ao criarmos a tabela devemos definir dentro da tag o atributo Width (Largura), entretatanto ele pode ser colocado fixo (ou seja o valor exato) ou em porcentagem.
Vamos a um exemplo, abra o Bloco de Notas e crie digite o código abaixo e salve com o nome de EX7.html.






width="50%" border="3">

Tabela

Veja que é criada uma tabela com metade do tamanho da página, isso devido ao atributo Width, experimente reduzir o tamanho da página e veja que a tabela é redimensionada automaticamente, e se ajusta ao conteúdo da janela.
Agora altere o código e deixe-o como o código abaixo.






width="250PX" border="3">

Tabela

Salve seu arquivo e atualize sua página, perceba que agora ao redimensionar a janela o conteúdo a tabela não altera seu tamanho.

____________________________________________________________________________________
Também é possível inserir bordas na tabela, para isso basta usarmos o atributo Border na tag Table.
Também é possível escolher a cor da borda usando o atributo bordercolor. Veja o exemplo abaixo.






border="3">

Tabela

____________________________________________________________________________________

Para criarmos uma linha em uma tabela utilizamos a tag , ela é a responsável por criar cada linha da tabela, sendo assim cada linha deve iniciar e terminar com essa tag.
Veja o exemplo abaixo.

Tabela

____________________________________________________________________________________

Para criarmos uma coluna em uma tabela, primeiramente devemos criar a linha, depois utilizamos a tag , ela é a responsável por criar cada coluna da tabela, sendo assim cada coluna deve iniciar e terminar com essa tag.
Veja o exemplo abaixo.

Divisão da tabela

Além disso, essa tag pode receber os atributos Largura (Width), Altura (Height), Alinhamento vertical (valign), alinhamento horizontal (align), cor de fundo (bgcolor), imagem de fundo (background), Mesclagem de linhas (Rowspan) e mesclagem de colunas (Colspan).

____________________________________________________________________________________
Agora iremos criar uma tabela que terá uma linha e duas colunas, sendo que a mesma terá sua altura e largura definida.
Para isso abra o arquivo EX8.html e modifique o código de forma que fique como o abaixo.

width=”250px” height=”100px”>Essa tem 250 de largura e 100 de altura

width=”550px” height=”100px”>Essa tem 550 de largura e 100 de altura

Salve o arquivo e o exiba no navegador. Perceba que criamos uma tabela com duas células e que a primeira possui apenas 250 pixels enquanto a segunda possui 550 pixels.

____________________________________________________________________________________
Para inserirmos uma cor utilizaremos o atributo Bgcolor, já para utilizar uma imagem utilizaremos o atributo Background.
Para isso abra o EX8.html e altere-o como abaixo.

bgcolor=”#00FF00”>Essa tem 250 de largura e 100 de altura

background=”imagem1.jpg”>Essa tem 550 de largura e 100 de altura

Salve sua página e atualize-a no navegador. Veja que na primeira célula inserimos a cor verde enquanto na segunda inserimos uma imagem qualquer.

____________________________________________________________________________________
Podemos alinhar o texto na célula da tabela de diversas formas usando os alinhamentos verticais (valign) e horizontais (align).
O alinhamento horizontal pode receber três valores: Left (Esquerdo), Center (Centralizado) e Right (Direito)
O alinhamento vertical pode receber cinco valores: Top (Topo), Middle (Entre o topo e o centralizado), Center (Centralizado) , Bottom (Inferior) e Baseline (Entre o centralizado e o inferior)

Para isso abra o EX8.html e altere-o como abaixo.

align=”Center” valign=”Bottom”>Essa tem 250 de largura e 100 de altura

Essa tem 550 de largura e 100 de altura

Salve sua página e atualize-a no navegador. Veja que na primeira célula o texto esta alinhado no centro inferior da célula.
Crie uma pagina:
Nome:exepratico6.html
Titulo:Exercício Pratico
Crie uma tabela com 3 linhas e 3 colunas
Em cada célula aplique um alinhamento diferente.


____________________________________________________________________________________
É possível mesclar células utilizando o atributo Rowspan e Colspan. Vamos ao exemplo.
Abra o Bloco de Notas e Digite o código abaixo e salve com o nome de ex9.html

Carros	Usados
Gol	Palio

Salve sua página e abra no navegador.

A tabela criada no exercício mostra na primeira linha uma linha com duas células e na segunda linha dois carros, mas e se por acaso quiséssemos fazer com que na primeira linha fosse exibido apenas uma coluna e na segunda as duas?
Bom a princípio fácil, basta colocar todo o texto na primeira célula e excluir o código da segunda coluna.
Vamor alterar o código.

Carros usados
Gol	Palio

Salve sua página e atualize-a no navegador. Veja que na primeira linha temos um erro apenas uma célula e o restante do espaço permanecem em branco. Para isso usamos o colspan, o valor do colspan deve ser a quantidade de células a serem mescladas, no nosso caso duas células.
Altere seu código deixando como abaixo.

colspan=”2”>Carros usados
Gol	Palio

Salve sua página e atualize-a no navegador. Veja que agora a primeira linha possui apenas uma célula.
O rowspan possui a mesma função entretanto ele faz isso com as linhas.

Vamos a um outro exemplo na mesma página após o final da tabela acrescente o seguinte código.

rowspan="2">Horas	12 horas no dia
12 horas na noite

Salve sua página e atualize-a no navegador. Veja que criamos um tabela com a primeira coluna mesclada e na segunda coluna há duas linhas.

____________________________________________________________________________________
Podemos definir o espaço entre uma célula e outra usando o atributo Cellspacing e o espaço entre a célula e a borda da tabela usando Cellpadding.
Abra o ex9.html e deixe-o como o abaixo.






cellspacing=”0” cellpading=”0”>

Carros usados
Gol	Palio

Salve a página e abra no navegador, perceba que removemos o espaço entre uma célula e outra, tornando seu conteúdo mais próximo.
Podemos evitar que ao chegar no final da célula o texto vá automaticamente para a outra linha, para isso basta acrescentarmos o atributo nowrap na célula.
Ex.:
nowrap>Sem quebra de linha


Texto azul = Códigos e atributos do HTML
Texto Azul em negrito = Codigos a serem adcionados ao codigo já existente.
Texto preto = Conteúdo da pagina.
Texto verde = Observações e considerações importantes.

---