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:-

• Mixing presentation with content, so your bandwidth usage is higher than need be, as for every page your visitors view, they have to download the same presentational data again and again.
• Redesigning and maintenance are a lot harder than they need to be. Since tables can only be laid out on screen one way, if you want to change the layout of a table site, you have to change your tables in every single one of your pages.
• Accessibility is limited. Tables really don’t help accessibility for viewers with disablities. Though layoutwise it mays look good but many screen reading softwares find it difficult to understand and read tables.
• Tables are just plain complicated to look at in HTML. Before you even get to any content inside them you are at three levels of indentation (levels).
• Tables can degrade search engine ratings. If you’re using a “classic” left hand navigation table, your navigation will be placed before your content in your HTML file. Because Search Engines generally place more importance on the things nearer the beginning of a page, the chances are your content will be largely ignored.
• Tables can take longer to display correctly than CSS. If you use Internet Explorer, you’ll have seen this many times when loading tabled sites. While everything on the page is downloading, the IE will keep rerendering, bouncing the contents of the page back and forth until the download is complete and it knows where to place everything.

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>

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!