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:
Other People Are Reading
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.
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.
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.
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.
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>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.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for