Question

I would like to implement a web page which contains tabs, the tabs are on top, bottom and left hand side of the page, like following:

Where the middle space is used for content change when user clicked a tab.

I am wondering What is the best way to implement this kind of layout?
I intend to use html table, but I am not sure if table cell can be CSS to a tab-like component? And how to do that?

Or is there any other way to implement this which is better than a table?

Answer 1

Do not use a table, as this is not tabular data.

Instead, you should consider using divs and styling with display:table; etc.

So, you would use

display:table;
display:table-cell;
display:table-column;
display:table-row;

Then you could use jQuery to make the divs clickable and to show() and hide() the content.

EDIT

Here is a simplified version to get you started:

HTML

<div id="page">

    <div id="top_row">
        <div class="top_row_cell" id="tab1">Tab 1</div>
        <div class="top_row_cell" id="tab2">Tab 2</div>
        <div class="top_row_cell">Tab 3</div>    
    </div>

    <div id="middle_row">
        <div class="middle_row_cell"></div>
        <div class="middle_row_cell empty"></div>
        <div class="middle_row_cell empty"></div>
    </div>

    <div class="content" id="content1">This is the content</div>

    <div class="content hidden" id="content2">THIS IS THE OTHER CONTENT</div>

</div>

CSS

div#page{
    display:table;
    border-collapse:collapse;
    width:500px;
    position:relative;
}

div#top_row, div#middle_row{
    display:table-row;
}

div.top_row_cell, div.middle_row_cell{
    display:table-cell;
    width:160px;
    height:50px;
    border:1px solid red;
    border-collapse:collapse;
    text-align:center;
}

div.middle_row_cell.empty{
    border:none;
}

div.content{
    display:block;
    position:absolute;
    top:52px;
    left:166px;
    background:red;
    color:white;
    width:334px;
    height:51px;
}

div.hidden{
    display:none;
}

JS

$('#tab1').click(function(){
    $('.content').addClass('hidden');
    $('#content1').removeClass('hidden');                
});

$('#tab2').click(function(){
    $('.content').addClass('hidden');
    $('#content2').removeClass('hidden');                
});

Working Example: http://jsfiddle.net/jasongennaro/9W7NE/

NOTE:

1. the jQuery is super simplified and is just for show. More robust logic is needed

2. I only coded clicks for tabs 1 and 2