Como criar colunas utilizando a tag DIV

Escrito por randall shatto | Traduzido por lucas irineu
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar colunas utilizando a tag DIV
Colunas feitas com tags 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.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

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

  2. 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. 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. 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. 5

    Feche a tag DIV. Faça isso com ">" e termine com "</div>". Por exemplo, o código inteiro está como “<div style='height: 550px; width: 220px; border: 3px solid black; float: left;'> </div>”.

  6. 6

    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: <div style='height: 550px; width: 220px; border: 3px solid black; float: left;'> </div> <div style='height: 550px; width: 220px; border: 3px solid green; float: left;'> </div> <div style='height: 550px; width: 220px; border: 3px solid blue; float: left;'> </div> <div style='height: 550px; width: 220px; border: 3px solid red; float: left;'> </div>

Dicas & Advertências

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

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível