Curso de HTML - Aula 8 - Tabelas - Final Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Aldeia RPG
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Curso de HTML - Aula 8 - Tabelas - Final

Ir para baixo

Curso de HTML - Aula 8 - Tabelas - Final Empty Curso de HTML - Aula 8 - Tabelas - Final

Mensagem por Lief Ter Dez 25, 2012 8:23 pm

[Autor: Gleison]
Curso de HTML - Aula 8 - Tabelas - Final Aulcj0






Aula 8 – Tabelas
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 .

____________________________________________________________________________________

Tabelas Fixas ou Dinâmicas?
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.



Aula 8 - Tabelas


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.



Aula 8 - Tabelas


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.

____________________________________________________________________________________
Bordas na Tabela
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.



Aula 8 - Tabelas


border="3">



Tabela


____________________________________________________________________________________

Criando as linhas na Tabela (Table Row)
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.



Aula 8 - Tabelas






Tabela


____________________________________________________________________________________

Criando as Colunas na Tabela (Table Division)
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.



Aula 8 - Tabelas






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).

____________________________________________________________________________________
Criando Colunas com tamanhos personalizados
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.




Aula 8 - Tabelas







width=”250px” height=”100px”>Essa tem 250 de largura e 100 de alturawidth=”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.

____________________________________________________________________________________
Inserindo cor ou imagens
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.



Aula 8 - Tabelas







bgcolor=”#00FF00”>Essa tem 250 de largura e 100 de alturabackground=”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.

____________________________________________________________________________________
Alinhamento Vertical e Horizontal
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.



Aula 8 - Tabelas







align=”Center” valign=”Bottom”>Essa tem 250 de largura e 100 de alturaEssa 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.
Exercício
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.


____________________________________________________________________________________
Mesclando células
É 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
GolPalio



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
GolPalio



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
GolPalio



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">Horas12 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.

____________________________________________________________________________________
Espaço entre células e Quebra de linha
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
GolPalio



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


Legenda:
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.







Perdeu alguma aula?, Quer saber qual é a proxima? Visite o Indice
Clique aqui
Lief
Lief
Desenvolvedor
Desenvolvedor

Mensagens : 834
Créditos : 50

http://shafou.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos