Creating simple a nav bar in HTML using Table

-

Introduction to Nav:

Img: Horizontal Nav bar
Img: Vertical Navbar

Nav is the menu or the list of webpage in a website. We can visit from one page to other easily using the nav of the webpage. The simple nav bar is shown below..



Home    Services    Contact     About

So above was a example to a simple horizontal navbar using CSS and HTML. As this is a tutorial for beginner, I am not gonna teach how to design a similar navbar, but if you want to add the similar nav to your page, here's the code..

<div style="background: green; color: white; height: auto; padding: 10px; width: 100%;">
<a href="" style="color: white;">Home</a>&nbsp; &nbsp;
<a href="" style="color: white;">Services</a>&nbsp; &nbsp;
<a href="" style="color: white;">Contact</a>&nbsp; &nbsp;
<a href="" style="color: white;">About</a>
</div>

Now let's create our own nav in table.. For that please read all tutorial carefully.
I have already explained about the table tag in my previous blogs and I have also taught you guys how to create a table along with it's attributes. So today we are gonna use the <Table> tag and <a> tag.
<table> tag is used to make a table whereas <a> tag is used to link the certain text to a certain page.
Let's start the tutorial now..
First of all we need a table without border.. In the same way you can even use cellspacing and cellpadding. Th and Tr tag are also used to add the list of menu in the horizontal row..
Here is the code for creating the nav in the table..

<table cellspacing="5" cellpadding="5">
<tr>
<th>Home</th>
<th>Services</th>
<th>contact</th>
</tr>
</table>

I hope you have no complications till now. If you can't get any thing please check my blog on table and it's attributes. It will create a list as below.


Home        Services         contact
Now let's add hyperlink in each of them.. For that please use the <a></a> tag.. Here's the code:

<table cellspacing="5" cellpadding="5">
<tr>
<th><a href="https://www.facebook.com">Facebook</a></th>
<th><a href="https://www.google.com">Google</th>
<th><a href="https://www.yahoo.com">Yahoo</th>
</tr>
</table>

It will create Nav as follow:

Facebook         Google         Yahoo

You can add the number of page by adding <th></th> tag inside table. Be sure that you link the pages correctly..
I hope this tutorial helped you in creating the nav. Nav is not responsive but for beginner, it's perfect.. 

Please smash the button below to keep updated with my newer blogs


Facebook Instagram Github Wordpress Twitter

Comments

Post a Comment

Popular posts from this blog

Frameset In HTML explained

-
Image
Coming up with the new blog, here we have a simple blog to explain about frameset and it's use. Hi learners. This is Maneesh with a new blog tutorial and explanation. As you guys know that we are learning HTML and we have learnt to open HTML, insert image, create a table, create a navbar and link a certain text to certain page. Today we are going to learn about the frameset tag.  Before starting our tutorial, there are certain things that you should know about frameset. Frameset tags are used link and display certain webpage in other page. It has both opening and a closing tag It has attribute "rows" to specify the height of every frame. "Cols" is used to specify the width of every frame. The frame tag is used inside frameset in order to display and link the pages The number of frame tag is equal to the number of rows in the frameset tag Here's one example:  <frameset rows="20%,80%"> <frame src="https://www.faceboo...
Read more

Inserting Image in HTML

-
Image
HTML PART II We have already discussed about HTML language and it's usage. As told before HTML is used to develop a static webpage. A static webpage is a page that contains text and image which cannot be changed according to the will of user. In explanation Pages made up of HTML will contain a image and text which a viewer without source code and access to admin page cannot change.  So guys we all need to insert image in our webpage but a beginner dont have any knowledge to it. Inserting text is very easy in html but for inserting image a developer needs to give a source of image. It uses the tag " Img "   and attribute " src ". For example if I will to insert a image i just write a tag as in the following line: <img src="source of image" /> In src="" I give the source of image (This may be either downloaded image or either from the online server..) For example lets make a situation that I am designing a webpage on html and...
Read more

HTML tutorial - I

-
Image
So guys let's start the very first post on HTML. This one is specially focused to beginner so if you have the normal knowledge on html then you dont need read this one. You can directly move on to my next tutorial after it's posted. Please follow me on facebook/instagram to get updated with my newer posts. If you need to contact me please visit my page here and fill contact form. HTML is a markup language that is used in webpage development. Use of HTML can only be used in development of static webpage. If a developer wants to develop and design dynamic and interactive webpage he/she needs to learn other scripting languages like js, php, css, jquery and so on. I will be uploading tutorials about them in my other post.  HTML is normally a english language and in this tutorial we will just learn how to make a first page on html. So the method of writing html code is shown below. Open any text editor in your pc.Some common text editors are notepad, notepad++...
Read more