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:

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

HTML code viewed within an HTML document:

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

HTML code viewed within an HTML document:

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

Vertical Line

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

HTML Code

HTML code viewed within an HTML document:

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

HTML code viewed within an HTML document:

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

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

This concludes the HTML horizontal and vertical line code.