Aldeia RPG

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

Suporte ao desenvolvimento de jogos


    Curso de HTML - Aula 8 - Tabelas - Final

    Lief
    Lief
    Desenvolvedor
    Desenvolvedor


    Mensagens : 833
    Créditos : 50

    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


    _________________
    A cidade tem medo de mim. Eu vi sua verdadeira face. As ruas são sarjetas dilatadas cheias de sangue e, quando os bueiros transbordarem, todos os vermes vão se afogar. A imundice de todo sexo e matanças vai espumar até a cintura e as putas e os políticos vão olhar para cima gritando "salve-nos"... e eu vou olhar para baixo e dizer "não".

      Data/hora atual: Seg maio 27, 2024 9:50 am