×
Loading ...

Como criar colunas utilizando a tag DIV

A tags DIV possuem um grande números funções, maior do que as demais tags HTML. Você pode criar um site versátil utilizando esta ferramenta. Tabelas HTML comuns são difíceis de montar, e não são tão flexíveis. Tags DIV são parte de um documento HTML. Você as adiciona quando precisa colocar colunas dentro de seu site. Depois de ter a cor ou textura de fundo em seu documento, coloque as tags DIV para criar as colunas.

Instruções

Colunas feitas com tags DIV
  1. Adicione o código “<div style=’” para cada linha separada das colunas. Isso responde o propósito do código inicial.

    Loading...
  2. Insira a altura, o comprimento e a largura em pixels da borda. Este código irá aparecer até então como “<div style=’ height: 550px; width: 220px; border: 3px”. Se você não quiser uma borda em volta de sua coluna, coloque zero pixels.

  3. Defina a cor da borda. Você pode usar a mesma cor, ou cores diferentes. Use "Solid" ou "Double" para o tipo da borda. Seu código agora será parecido com “<div style='height: 550px; width: 220px; border: 3px solid black;”.

  4. Adicione o alinhamento. O comando "Float" permite que colunas adicionais se alinhem com a primeira. Insira "float: (direction);" para a tag DIV de alinhamento. O código até o momento é “<div style='height: 550px; width: 220px; border: 3px solid black; float: left;” .

  5. Feche a tag DIV. Faça isso com ">" e termine com "

    ". Por exemplo, o código inteiro está como “
    ”.

  • Adicione outra coluna ao lado da primeira com outra tag DIV. Por exemplo, se quiser quatro colunas em uma linha, este seria o código:

  • Loading...

    Dicas

    • Explore os diferentes atributos DIV para colunas e estilos diversos.

    Recursos

    Loading ...
    Loading ...