How to implement a webpage with tabs in my case? - html

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:
the jQuery is super simplified and is just for show. More robust logic is needed
I only coded clicks for tabs 1 and 2

Answer 2

You could use tables. Check out http://www.ssi-developer.net/css/menu-rollover-effect_table.shtml for example.
But I would prefer just using <div>'s and position them nicely using CSS.

Answer 3

I have stubbed out an example for you that doesn't use a table.
It doesn't look very nice because I've added coloured borders to show you where each part is.
http://jsfiddle.net/Sohnee/Hvx2x/

Answer 4

may be you could start with something like this
http://jsfiddle.net/xVDtW/ a css table, I just don't have time now to solve the right margin thing. if you have time I can do this in a few hours or so, just let me know