ทั้ง Tab แบบด้านบน (top_tab) และ ด้านล่าง (bottom_tab)

<style type="text/css">
#test { /* ส่วนแสดงผลเืนื้อหาภายใน Tab */
    border:1px solid #f0f0f0;
    display:block;
    background:#f0f0f0;
    padding:2px;
}
#wraper { /* ส่วนกรอบทั้งหมด */
    display:block;
    width:400px;
}
li {
    display:inline;
    position:relative;
}

ul.top_tab { /* Tab ด้านบย */
    list-style-type:none;
    margin-top:6px;
}
ul.top_tab li a { /* ลักษณะของ Tab ปกติ */
    font-weight:bold;
    text-decoration:none;
    color:#cccccc;
    background:#f0f0f0;
    border-top:1px solid #cccccc;
    padding:3px 20px 6px 20px;
}
ul.top_tab li a:hover { /* ลักษณะของ Tab เมื่อเมาส์ชี้ */
    color:#286ea0;
    border-top:4px solid #286ea0;
    background:#f4f4f4;
}

ul.bottom_tab  { /* Tab ด้านล่าง */
    list-style-type:none;
    float:right;
    margin-top:6px;
}
ul.bottom_tab li a { /* ลักษณะของ Tab ปกติ */
    font-weight:bold;
    text-decoration:none;
    color:#cccccc;
    background:#f0f0f0;
    border-bottom:1px solid #cccccc;
    padding:6px 20px 3px 20px;
}   
ul.bottom_tab li a:hover { /* ลักษณะของ Tab เมื่อเมาส์ชี้ */
    color:#286ea0;
    border-bottom:4px solid #286ea0;
    background:#f4f4f4;
}
</style>
<div id="wraper">
<ul class='top_tab'>
 <li><a href="http://blogz.saiyaithai.orh" title="BlogZ" target="_blank">Tab1.</a></li>
 <li><a href="http://goragod.com" title="g-O-r-a-g-o-d.com" target="_blank">Tab2.</a></li>
</ul>
<div id="test">เนื้อหา<br />เนื้อหา</div>
<ul class='bottom_tab'>
 <li><a href="http://blogz.saiyaithai.orh" title="BlogZ" target="_blank">Tab1.</a></li>
 <li><a href="http://goragod.com" title="g-O-r-a-g-o-d.com" target="_blank">Tab2.</a></li>
</ul>
</div>

Tab นี้จะเป็นตัวอย่างการสร้าง Tab ด้วย CSS เท่านั้นนะครับ ยังไม่สามารถเปลี่ยนแปลงเนื้อหาภายใน Tab ได้ หากต้องการให้เมื่อคลิก Tab แล้วสามารถเปลี่ยนแปลงเนื้อหาได้ให้ดูที่ AJAX Tab ครับ