1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633

    Padrão HTML Básico - Introdução à Tabelas

    Objetivo:



    O objetivo deste tutorial é ensinar você a criar tabelas, bem como trabalhar com esta tabela utilizandos alguns dos seus atributos, tudo mostrado de forma simples e objetiva através das telas.



    Pré-requisito:



    Para você poder acompanhar o desenvolvimento deste tutorial, será necessário ter conhecimento no mínimo do de informática básica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5, Parte 6, Parte 7, Parte 8 e Parte 9 do tutorial html básico.



    Nota:



    Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prática através da criação páginas.



    Vamos começar criando uma página para a criação das tabelas a qual iremos chamar de tabelas.html, copie o código abaixo e salve dentro da pasta site que a nossa pasta de projetos.



    <html>

    <head><title>Tabelas HTML</title></head>



    <body>

    <center>

    <h2>Criação de Tabelas Html</h2>

    </center>

    </body>



    </html>


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    Veja a página abaixo:



    Tela 001



    Para começar a criar tabelas utilizamos as seguintes etiquetas:
    <table></table>



    Dentro dessas colocamos as outras etiquetas, os textos, imagens entre outros, ou seja, utilizamos as etiquetas <tr></tr> para definir linha na tabela e as etiquetas <td>/<td> para definir a coluna da mesma, vou mostrar um estrutura basica , onde vou mostrar uma tabela que tem duas linhas e duas colunas. Para isso através da página tabelas.html você deve exibir o codigo fonte, que é o codigo que relacionei logo acima para a criação da página que é mostrada na tela 001 e copiar o codigo abaixo, veja o procedimento.



    <br><br>



    <center>



    <table>

    <tr>

    <td>Tabela</td>

    <td>Tabela </td>

    </tr>

    <tr>

    <td>Aprender</td>

    <td>Aprender</td>



    </tr>



    </table>



    </center>



    Comecei inserindo uma quebra de página e depois as etiquetas para centralizar a tabela.Para iniciar a tabela começamos pelas etiquetas <table></table>, depois inseria etiquetas <tr></tr> para criar a primeira linha e dentro da mesma inseri as etiquetas <td></td> para a criação da primeira e segunda coluna, e ainda inseri um palavra na mesma.



    Tela 002



    Vamos começar a conhecer e a utilizar atributos dentro da tabela, o primeiro será “border” este serve para inserir um borda em volta da tabela, podemos especificar a espessura da mesma. Vamos inserir uma borda nesta tabela que acabamos de criar com a espessura 2, veja o procedimento:



    Border=”2” esta é a definição que vamos utilizar.



    <table border=”2”>

    <tr>

    <td>Tabela</td>

    <td>Tabela </td>

    </tr>

    <tr>

    <td>Aprender</td>

    <td>Aprender</td>



    </tr>



    </table>



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  3. #3
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    Tela 004



    Você pode aumentar o tamanho da espessura para ver como fica, agora vamos inserir o atributo “Bordercolor” este serve para inserir-mos uma cor a borda, vamos inserir a cor azul.



    Bordercolor=”blue”



    <table border=”2” bordercolor=”blue”>

    <tr>

    <td>Tabela</td>

    <td>Tabela </td>

    </tr>

    <tr>

    <td>Aprender</td>

    <td>Aprender</td>



    </tr>



    </table>


    Tela 005



    Agora vamos utilizar os atributos Widht e heigt para especificar altura e largura da tabela.Veja que este aribustos estou ensirindo dentro da etiqueta <table>, mas pode ser inserido dentro das colunas ou linhas.Vamos especificar a largura e altura da tabela em 100%.



    <table border=”2” bordercolor=”blue” whidth=” 80%” height=”80%”>

    <tr>

    <td>Tabela</td>

    <td>Tabela </td>

    </tr>

    <tr>

    <td>Aprender</td>

    <td>Aprender</td>



    </tr>



    </table>



    Tela 006



    Agora vamos aprender a inserir uma cor de fundo na tabela para isso utlizamos etiqueta Bgcolor, vamos definir a cor verde.



    bgcolor=”green”



    <table border=”2” bordercolor=”blue” whidth=” 80%” height=”80%” bgcolor=”green”>

    <tr>

    <td>Tabela</td>

    <td>Tabela </td>

    </tr>

    <tr>

    <td>Aprender</td>

    <td>Aprender</td>



    </tr>



    </table>



    Tela 007

    omo criar tabelas e a utilizar alguns atributos , tudo de uma forma objetiva e mostrado através das telas para que você tenha uma melhor entendimento possível


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar