By Paige Lewis

Line bars are any vertical or horizontal lines on web pages. Line bars are typically used to break up sections of a web page for easier viewing. Colored line bars, on the other hand, are typically added to improve web page aesthetics. Follow these steps to add tables that serve as line bars using HTML.

  • Access a text editing program. Click on the green Start button once your personal computer is turned on. From the Start menu that is pulled up, direct your mouse pointer to the item Programs. From the cascading menu that pulls up, direct the mouse pointer to the item Accessories. From the second cascading menu, highlight and select the item Notepad. 
  • Decide on the web page's heading and body. First and foremost, you will need to create the content for your web page's heading and body. The heading acts as the web page's title. The body, on the other hand, contains all the information for the web page. For this example, we will use My Online Store for the heading, and Buy Now! for the body.
  • Generate the HTML code for the heading and body. Both the heading and the body should appear as a block of texts each on the web page. The heading will appear as the first line of text while the body will appear as the second. Bear in mind that the heading and the body are each considered as separate entities. For them to appear as such, their HTML tags will need to be enclosed within the less-than (<) and greater-than (>) characters. Heading tags can either be <HEAD> or <head>, while the body tags are either <BODY> or <body>. You can use either the upper-case or the lower-case letters to enclose in the less-than and greater-than characters and the results will be the same in the end. For this example though, we will use the upper-case letters.

To create the HTML tag for the heading, type in:

<HTML>

<HEAD>

<TITLE>My Online Store</TITLE> 

</HEAD>

To create the HTML tag for the body, type in:

<BODY>

<H1>My Online Store</H1>

Buy Now!

</BODY>

  • Add tables that will serve as line bars. For this example, we will create line bars to make a list of the available items currently for sale through the online store and their respective prices. Let's say you are selling bags for $5 each, pens for $1 each and notebooks for $2 each. The HTML code for the table should look like this:

<TABLE BORDER="1">

<TR>

<TH>ITEM</TH>

<TH>PRICE</TH>

</TR>

<TR>

<TD>BAGS</TD>

<TD>$5</TD>

</TR>

<TR>

<TD>PENS</TD>

<TD>$1</TD>

</TR>

<TR>

<TD>NOTEBOOKS</TD>

<TD>$2</TD>

</TR>

</TABLE>

Once done, you will need to save the Notepad document in the correct format so that you get to view it online. To do this, click on the File tab. From the dropdown menu, select the option Save As. From the Save As dialog box that pops up, assign a save location first. Next, assign a name in the File name: section. Make sure to affix the file extension .htm after typing in the desired name. In the Save as type: section, select the option All Files and then click on Save. Simply double-click the saved .htm file to view the newly created line bars on your browser.