Embora o HyperText Markup Language( HTML) forneça uma marca que crie um divisor horizontal, não existe um elemento equivalente que crie uma linha vertical. Uma necessidade de uma forma vertical geralmente surge, então isso cria um dilema. Felizmente, você tem a opção de usar uma solução alternativa que incorpora uma tabela HTML e aplica o código Cascading Style Sheets( CSS) a uma borda. Compreenda como criar o código HTML e aplicar a regra CSS que faz com sucesso uma linha vertical e sólida.

Instruções

  1. Inicie o software do editor de texto do bloco de notas, que vem com o computador Windows e abra um documento do site.

  2. Posicione o cursor na área desejada onde deseja que a linha contínua apareça. Digite o código HTML que cria uma tabela simples:

    & lt; table & gt;

    & lt; tr & gt;

    & lt; td & gt; & lt; / td & gt;

    & lt; / tr & gt;

    & lt; / table & gt;

  3. Digite o seguinte código antes do fechamento "& lt; / head &

    gt;"elemento para criar sua regra de estilo CSS para sua tabela:

    & lt; style type = "text / css" & gt;

    & lt;! - Tabela

    { }

    - & gt;

    & lt; / style & gt;

  4. Digite "border-left:;"ou "border-right:;";entre os suportes curly para determinar se sua linha aparece no lado esquerdo ou direito, e digite "sólido" após o cólon para especificar isso é como sua linha deve aparecer. Digite um número em pixels( px) para determinar a largura da linha vertical e digite uma cor, como preto, para especificar a sombra da linha. Para ilustrar: tabela

    { border-left: 1px black sólido;}

  5. Tipo "altura:;"e digite um valor de número em pixels( px) ou porcentagem( %) para determinar quanto tempo a linha é.Por exemplo: tabela

    { border-left: 1px black sólido;altura: 300px;}

  6. Salve seu arquivo. Abra-o em uma janela do navegador clicando na opção "Abrir" ou "Abrir arquivo" no menu "Arquivo" do navegador. Se você estiver satisfeito com a linha vertical, faça o upload do arquivo para o seu host na Web para publicá-lo. Caso contrário, faça ajustes aos valores em sua regra de estilo antes de salvá-lo e enviá-lo para seu host.

Recursos

  • Tizag: Tutorial CSS - Border
  • World Wide Web Consortium( W3C): caixa modelo
  • World Wide Web Consortium( W3C): Começando com HTML + CSS