Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Offering a guide to professional web site design, web page design and web design guidelines

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

Creating Horizontal and Vertical Lines in HTML

You can use an image to create a vertical or horizontal line within an HTML web page.

Create a 2 pixel by 2 pixel image in the color of your choice. This single image can be used to create a vertical or horizontal line on your web page simply by changing the HEIGHT and WIDTH attributes.

Example Code:

<IMG SRC="yourimage.gif" WIDTH="100" HEIGHT="4" BORDER="0">

Browser View:




Example Code:


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

Browser View:



When creating a vertical line, you'll need to set up a table.


Example Code:

<TABLE CELLPADDING="2" WIDTH="200">
<TR>
<TD>
<IMG SRC="yourimage.gif" WIDTH="2" HEIGHT="100">
</TD>
<TD>This portion of the table can be used to display your text. Make sure that you set a specific table width so that your text will wrap and display beside your line image.
</TD>
</TR>
</TABLE>

Browser View:

This portion of the table can be used to display your text. Make sure that you set a specific table width so that your text will wrap and display beside your line image.

 More Web Design Tips