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 Tips | Javascript 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