- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make a vertical line using HTML?
Sometimes, the task is to display a vertical line on the web page and to set the style for that vertical line. Using the HTML, this process of creating a vertical line on the webpage is demonstrated in this article. First the method is given where the border style is specified for the div tag to display a vertical line. In the second example, the keyboard characters “|” and “!’ are filled as table cell contents to create a vertical line made up of dashes or dots. In the third example a small width rectangle is created that looks like a vertical line.
Example 1: Using HTML and border style to draw a vertical line
Folder and Pages Design Steps
Step 1 − First make a file with the html extension. Write html tags, head tags and body tags inside this html file.
Step 2 − Now inside the body tag, make a <center> tag.
Step 3 − For a div tag inside the <center> tag, use the class name as “lineusingborder”.
Step 4 − Make a <style> tag and specify the style for .lineusingborder.
Step 5 − Try using border-left or border-right with 2px solid and a dark color.
Step 6 − Set the margin to change the display position of the vertical line.
Step 7 − Specify the height for the vertical line. Try using 300px. Open html file in a browser and check the result.
File Used : verticalLine1.html
Code For verticalLine1.html
<!DOCTYPE html>
<html>
<head>
<style>
.lineusingborder{
margin-left: 50%;
border-left: 2px solid rgb(10, 2, 29);
height: 300px;
}
</style>
</head>
<body>
<center>
<h2>Making Vertical Line - Method 1</h2>
<div class="lineusingborder"></div>
</center>
</body>
</html>
Example 2: Using HTML and table to draw dash and dot styled vertical lines
Folder and Pages Design Steps
Step 1 − Make an HTML file and start writing the code.
Step 2 − Make a <center> tag within the <body>.
Step 3 − Now within the <center> tag, make a <table> tag with the class name “lineusingrectangle”.
Step 4 − Now within the <table> tag, make many <tr><td><strong> tags and specify the keyboard character “|” as table cell content for creating the vertical dashed line.
Step 5 − Again make a table tag and within that <table> tag, make several <tr><td><strong> tags and specify the keyboard character “!” as table cell content for creating the vertical dash and dot line.
Step 6 − Open html file in a browser and check the result.
File Used : verticalLine2.html
Code For verticalLine2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<h2>Making Vertical Line - Method 2</h2>
<h3>Dashed Line Style 1</h3>
<table >
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
<tr>
<td><strong>|</strong></td>
</tr>
</table>
<h3>Dash and Dot Line Style 2</h3>
<table >
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
<tr>
<td><strong>!</strong></td>
</tr>
</table>
</center>
</body>
</html>
Example 3: Using HTML and the rectangle concept to draw a vertical line
Folder and Pages Design Steps
Step 1 − Make an html file with the name verticalLine3.html.
Step 2 − Create the basic page structure of this html file and include a <center> tag within the <body>.
Step 3 − Now within this <center> tag, make a
tag with the class name “lineusingrectangle”.Step 4 − Make a <style> tag and specify the style for .lineusingrectangle.
Step 5 − Set the style for rectangle such as a big height value and a very small width value.
Step 6 − Try using 3px for width and 500px for height.
Step 7 − Also specify a dark color for the line. Open html file in a browser and check the result.
File Used : verticalLine3.html
Code For verticalLine3.html
<!DOCTYPE html>
<html>
<head>
<style>
.lineusingrectangle {
height: 500px;
width: 3px;
background-color: #3b0404;
}
</style>
</head>
<body>
<center>
<h2>Making Vertical Line - Method 3</h2>
<div class="lineusingrectangle"></div>
</center>
</body>
</html>
Conclusion
In this HTML article, using three different examples, the ways to show how to make a vertical line, are given. In the first example, the border style is set to show a vertical line. In the second example, vertical lines are made by using the different keyboard characters to make dashes and dots styles and in example three, a vertical line is created by using the rectangle concept where a big value for height and a very small value for width of the rectangle is provided.
1K+ Views
