Aunque el Lenguaje de marcado de hipertexto( HTML) proporciona una etiqueta que crea un divisor horizontal, no hay un elemento equivalente que cree una línea vertical. A menudo surge la necesidad de una forma vertical, por lo que crea un dilema. Afortunadamente, tiene la opción de utilizar una solución alternativa que incorpore una tabla HTML y aplique código de hojas de estilo en cascada( CSS) a un borde. Comprenda cómo crear el código HTML y aplicar la regla CSS que hace con éxito una línea vertical sólida.

Instrucciones

  1. Inicie el software de edición de texto del Bloc de notas, que viene con su computadora con Windows, y abra un documento de sitio web.

  2. Coloque su cursor en el área deseada donde desea que aparezca la línea continua. Ingrese el código HTML que crea una tabla simple:

    & lt; table & gt;

    & lt; tr & gt;

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

    & lt; / tr & gt;

    & lt; / table & gt;

  3. Escriba el siguiente código antes del cierre "& lt; / head & gt;"Elemento para crear su regla de estilo CSS para su tabla:

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

    & lt;! -

    tabla{ }

    - & gt;

    & lt; / style & gt;

  4. Introduzca "border-left:;"o "border-right:;"entre los corchetes para determinar si su línea aparece a la izquierda o a la derecha, e ingrese "sólido" después de los dos puntos para especificar que así es como debería aparecer su línea. Escriba un número en píxeles( px) para determinar qué tan ancha es la línea vertical, e ingrese un color, como el negro, para especificar el tono de la línea. Para ilustrar: tabla

    { border-left: 1px solid black;}

  5. Escriba "height:;"y escriba un valor numérico en píxeles( px) o porcentaje( %) para determinar cuánto tiempo dura la línea. Por ejemplo:

    table{ border-left: 1px solid black;altura: 300px;}

  6. Guarde su archivo.Ábrelo en una ventana del navegador haciendo clic en la opción "Abrir" o "Abrir archivo" en el menú "Archivo" del navegador. Si está satisfecho con la línea vertical, cargue el archivo en su servidor de red para publicarlo. De lo contrario, realice ajustes a los valores en su regla de estilo antes de guardarlos y cargarlos en su host.

Resources

  • Tizag: Tutorial de CSS - Borde
  • World Wide Web Consortium( W3C): modelo de caja
  • World Wide Web Consortium( W3C): comenzando con HTML + CSS