탭메뉴

위와 같은 형식으로 100%를 주려면.. px계산하느라 애좀 먹겠지요.. 1px정도 차이가 자꾸날겁니다. 그래서 편하게 테이블로 맹구러버렸습니다..

/*탭메뉴관련 CSS*/
.tab_menu { text-align:center; padding:3px 2px;}
.tab_menu_first_on {
 border:1px solid #cccccc;
 border-bottom:none;
 background-color:#ffffff;
 cursor:normal;
}
.tab_menu_first_off {
 border:1px solid #cccccc;
 background-color:#f1f1f1;
 cursor:pointer;
}
.tab_menu_other_on {
 border-top :1px solid #cccccc;
 border-right:1px solid #cccccc;
 background-color:#ffffff;
 cursor:normal;
}
.tab_menu_other_off {
 border:1px solid #cccccc;
 border-left:none;
 background-color:#f1f1f1;
 cursor:pointer;
}
.tab_content { border:1px solid #cccccc; border-top:none;}
.tab_content_on {display:block;}
.tab_content_off {display:none;}
.tab_button_more {clear:both; padding-top:5px; text-align:right;}

/*탭메뉴관련 script*/
 $(document).ready(function(){
  $(".tab_menu").click(function(){
   var now_menu = $(this).attr('id');
   var now_cont = now_menu.replace('tab_menu_','tab_cont_');
   var id = now_menu.substring(0, now_menu.length - 3);
   var idx = $('#'+id).find('.tab_menu').index(this);

   if(idx == 0){
    $('#'+id).find('.tab_menu:gt(0)').removeClass('tab_menu_other_on').addClass('tab_menu_other_off');
    $('#'+id).find('.tab_menu:eq(0)').removeClass('tab_menu_first_off').addClass('tab_menu_first_on');
   } else {
    $('#'+id).find('.tab_menu:eq(0)').removeClass('tab_menu_first_on').addClass('tab_menu_first_off');
    $('#'+id).find('.tab_menu:gt(0)').removeClass('tab_menu_other_on').addClass('tab_menu_other_off');
    $('#'+now_menu).removeClass('tab_menu_other_off').addClass('tab_menu_other_on');
   }

   $('#'+id).find('.tab_content').removeClass('tab_content_on').addClass('tab_content_off');
   $('#'+now_cont).removeClass('tab_content_off').addClass('tab_content_on');
  });
 });
/*
탭메뉴관련 html  앞의 test를 다른걸로 바꾸시면 되며
tab1_tab_menu, tab2_tab_menu등으로 여러개를 동시에 사용가능합니다.
또 중요한건 큰테이블의 아이디는 'xxxxxx_tab_menu'
탭메뉴들의 아이디는 'xxxxxx_tab_menu_01~99' 01~99는 영문이든 숫자든 상관없으며 2자리로 구성해주세요..
탭내용들의 아이디는 'xxxxxx_tab_cont_01~99' 01~99는 영문이든 숫자든 상관없으며 2자리로 구성해주세요.. 단 맵메뉴의 아이디 끝 두자리와 일치해야합니다.
*/
 <table border=0 width=100% cellpadding=0 cellspacing=0 id='test_tab_menu'>
 <tr>
  <td width=25% id='test_tab_menu_01' class='tab_menu tab_menu_first_on'>내용1</td>
  <td width=25% id='test_tab_menu_02' class='tab_menu tab_menu_other_off'>내용2</td>
  <td width=25% id='test_tab_menu_03' class='tab_menu tab_menu_other_off'>내용3</td>
  <td width=25% id='test_tab_menu_04' class='tab_menu tab_menu_other_off'>내용4</td>
 </tr>
 <tr>
  <td colspan=4>
  <table border=0 width=100% cellpadding=0 cellspacing=0 id='test_tab_cont_01' class='tab_content tab_content_on'>
  <tr>
   <td style='padding:10px 5px;'>내용1 내용1</td>
  </tr>
  </table>
  <table border=0 width=100% cellpadding=0 cellspacing=0 id='test_tab_cont_02' class='tab_content tab_content_off'>
  <tr>
   <td style='padding:10px 5px;'>내용2 내용2</td>
  </tr>
  </table>
  <table border=0 width=100% cellpadding=0 cellspacing=0 id='test_tab_cont_03' class='tab_content tab_content_off'>
  <tr>
   <td style='padding:10px 5px;'>내용2 내용3</td>
  </tr>
  </table>
  <table border=0 width=100% cellpadding=0 cellspacing=0 id='test_tab_cont_04' class='tab_content tab_content_off'>
  <tr>
   <td style='padding:10px 5px;'>내용2 내용4</td>
  </tr>
  </table>
  </td>
 </tr>
 </table>

혹시 div코딩으로 처리가능하신분은 올려주세요.. 하다하다 안되서
테이블 코딩해버린겁니다 ㅎㅎ;;
css코딩이 허접한지라.. ㅠ.ㅠ