HTML Horizontal Vertical Line

 

HTML Horizontal and Vertical Line

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.

 

Horizontal Line

HTML Code

HTML code viewed within an HTML document:
html-line

<img src="yourimage.gif" width="100" height="4" border="0">

Replace the text indicated in bold with your image file.

Browser View

HTML coding viewed through a web browser:
html-line

horizontal line

HTML Code

HTML code viewed within an HTML document:
html-line

<img src="yourimage.gif" width="200" height="2" border="0">

Replace the text indicated in bold with your image file.

Browser View

HTML coding viewed through a web browser:
html-line

horizontal line

HTML Code

HTML code viewed within an HTML document:
html-line

<img src="yourimage.gif" width="200" height="6" border="0">

Replace the text indicated in bold with your image file.

Browser View

HTML coding viewed through a web browser:
html-line

horizontal line

Vertical Line

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

HTML Code

HTML code viewed within an HTML document:
html-line

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

Replace the text indicated in bold with your image file.

Browser View

HTML coding viewed through a web browser:
html-line

vertical line

 

HTML Code

HTML code viewed within an HTML document:
html-line

<table cellpadding="2" width="200">
<tr>
<td>
<img src="yourimage.gif" width="6" height="200">
</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>

Replace the text indicated in bold with your image file.

Browser View

HTML coding viewed through a web browser:
html-line

vertical line

You can learn much more about HTML tables within the HTML Tutorial section.

This concludes the HTML horizontal and vertical line code.

 

 

 
Visit the following pages for a wealth of copy and paste codes and tips:

HTML Tips
Copy and paste special effect HTML codes for your web page.

HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.

HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.

JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.

Web Design Tips
Tips, tricks, and special effect codes for your web page.

HTML Tags
A list of HTML tags.

HTML 5 Tags
A list of the latest HTML tags to be developed.

ASCII Codes
Special text characters and code for your web page.