html without using tables tableless html table less html css tableless layouts

html without using tables tableless html table less html css tableless layouts

HTML LAYOUT WITHOUT USING TABLES |  TABLELESS HTML | CSS TABLELESS LAYOUTS | CREATE TOOLBAR | CREATE NAVBAR

 Today I am going to explain how we can make HTML UI/design without the use of tables. There has been a lot of buzz around describing how tables should be avoided when creating HTML designs. Why using tables is stupid? Some reasons why not to use tables tables are:-

So we can see that HTML without use of tables can be very important diffentiating factor between your website and the competitors

Below are some ways of aligning elements using <li>, <ul>, <span> and <div> which is cross browser, as it works on all major browsers including IE, FireFox, Safari, Crome

 

Toolbar (Horizontal) Alignment Example Without using <table>

 

 

A) Using <li> <ul>

<ul class="MyToolbar">
<li><a href="#">FOOTBALL</a></li>
<li><a href="#">CRICKET</a></li>
<li><a href="#">BASEBALL</a></li>
<li><a href="#">BASKETBALL</a></li>
<li><a href="#">BADMINTON</a></li>
</ul>


<style type="text/css">
.MyToolbar li
{
            border:1px solid;
            background-color:Aqua;
            margin:0;
            padding:.3em;
            display:inline;
            border-color:#f3f3f3 #bbb #bbb #f3f3f3;
}
</style>

B) Using <div> and <span>

<div>
    <span><a href="#">FOOTBALL</a></span>
    <span><a href="#">CRICKET</a></span>
    <span><a href="#">BASEBALL</a></span>
    <span><a href="#">BASKETBALL</a></span>
    <span><a href="#">BADMINTON</a></span>

</div>

 

<style>

span
{
    border:1px solid;
    background-color:Aqua;
    margin:0;
    padding:5px;
    border-color:#f3f3f3 #bbb #bbb #f3f3f3;
}
</style>

Navbar(Vertical) Alignment Example Without using <table>

 

A) Using <li> <ul> 
We just need to apply this style 
<style type="text/css"> 
.MyToolbar li {
border:1px solid;
background-color:Aqua;
margin:0;
padding:5px;
display:block;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
width:100px;
}
</style> 

B) Using <div> and <span>
We just need to apply this style 
<style type="text/css">   
span
{
    border:1px solid;
    background-color:Aqua;
    margin:0;
    padding:5px;
    display:block;
    border-color:#f3f3f3 #bbb #bbb #f3f3f3;
    width:100px;
}
</style> 
 
 
Examples of sites that are designed with CSS (Without tables)
Hope this information was useful!

 

Tags:

C# HtmlTextWriter ExampleCSS Padding Vs Margin CSS Margin Vs PaddingBasic HTML5 TagsAsp.net How to display HTML contentsOnline html editor online JavaScript editorRegularExpression remove html tagsHTML5 Video Player TutorialHTML5 With DataBaseHTML5 TutorialAsp.net Create Html ControlsJquery Table Row Highlight On Mouseover

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.