HTML Horizontal Bar

Zeeshan Afridi Feb 19, 2023

HTML HTML Bar

Generate Horizontal Bar in HTML
Conclusion

HTML bars are very common tools that are used to represent numerical data. It gives a graphical representation of numerical data.

There are two types of HTML bars:

Horizontal bar
Vertical bar

But this article is about HTML horizontal bar, and we will see how we can generate a horizontal bar in plain HTML.

We can work with any technology like MS Office, plain HTML and web office components but using plain HTML is the simplest among all. So here we are going to look at the steps needed to create an effective HTML horizontal bar.

Generate Horizontal Bar in HTML

We will follow some simple steps to generate an HTML horizontal bar. The basic building blocks of an HTML horizontal bar is to be an HTML table, <p> and <div> tags.

It is a set of <p> and <div> tags placed inside the <td> tags of an HTML table <tr>.

Steps to generate HTML horizontal bar.

Take an HTML table
```
<table></table>
```
Determine the number of rows you need in the table. Every row in the table will represent an HTML horizontal bar.

Add two columns in each row. The code should look like this:

<table>
   <tr>
	   <td></td>
	   <td></td>
   </tr>
</table>

In the first column, add the <div> or <p> tag with a label for the Y-axis.

In the second column of the <tr> tag, add a <div> tag. The <div> will take style property with different background-color and width. The code will look like this:

<table>
   <tr>
	   <td>
		   <div>
			   HTML Horizontal Bar
		   </div>
	   </td>
	   <td>
		   <div style= 'background-color: blue; width: 300px'>
			   HTML Horizontal Bar
		   </div>
	   </td>
   </tr>
</table>

Full Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML: The strong and em tags</title>
</head>
<body>

    <table>
    <tr>
        <td>
            <div>
                HTML Horizontal Bar1
            </div>
        </td>
        <td>
            <div style= 'background-color: blue; width: 300px'>
                HTML Horizontal Bar1
            </div>
        </td>
    </tr>

    <table>
    <tr>
        <td>
            <div>
                HTML Horizontal Bar2
            </div>
        </td>
        <td>
            <div style= 'background-color: black; width: 400px'>
                HTML Horizontal Bar2
            </div>
        </td>
    </tr>
</table>
</table>
</body>
</html>

Conclusion

To summarize the article, we have discussed what a horizontal bar is, its types, and how to create it in plain HTML. Furthermore, we have discussed the steps needed to create an HTML horizontal bar and the tags used to generate a horizontal bar in plain HTML.

Author: Zeeshan Afridi

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.