How to Create a Vertical Line on Your Web Page

Written by matthew caines
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create a Vertical Line on Your Web Page
Create a vertical line by manipulating HTML code for tables. (Comstock/Comstock/Getty Images)

Many websites divide their content into columns and divide them with vertical lines. Unlike a horizontal line, which can be inserted using a standard "<hr>" HTML code, vertical lines need to be manipulated from a small coloured box that can be stretched and elongated into a line. Similarly, draw a vertical line between texts by creating a table with only one visible vertical line.

Skill level:


  1. 1

    Log in to your website's content management system, or launch your PC's website design software. Microsoft FrontPage should be your PC's default program.

  2. 2

    Load an existing webpage in FrontPage by clicking the "File" menu option and by selecting "Open" from the drop-down menu. Create a new page by clicking the "Create a New Page" button on the main toolbar, which is symbolised by the image of a white blank document.

  3. 3

    Navigate to your Web pages in your content management system by clicking on the page name. All systems should have an "HTML" button above each post or page design window. Click it to reveal the basic HTML coding of the webpage.

  4. 4

    Make a stand-alone vertical line by first creating a "2 x 2" pixel image of a colour that you want your line to be. Save the image as an "image.gif" in your Web page's database before entering the following code into your HTML box:

    <IMG SRC="image.gif" WIDTH="2" HEIGHT="200" BORDER="0">

    Alter the "WIDTH" and "HEIGHT" values to change the length and thickness of your line.

  5. 5

    Insert a vertical line in between text by using the following code:

    <table cellspacing="5" border="0" cellpadding="0">

    <tr valign="top" align="left">

    <td width="300"><p>The main page content here</p></td>

    <td width="1" bgcolor="#00FFFF"><BR></td>

    <td width="150" valign="top" align="left">

    <p>left blah</p>

    <p>right blahright blahright blah</p>




    This code creates a table without borders, except for the line in the middle, which should be a solid vertical line. Increase the thickness of this line by enlarging the number in the "<td width="1">" value -- change the text either side of the vertical line by replacing the "left blah" and "right blah" fields for your own personal text.

Tips and warnings

  • Add more text into the left or right sides of the vertical line by separating each point with a "." Ensure that there are no spaces between the text and the "" codes.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.