I noticed that Tabs sometimes looks ugly, sometimes you need them, sometimes are just in the way between the node title and the body. This tutorial will teach you a way to group the Tabs with Jquery.

On page.tpl.php paste this:

<?php 
  if (arg(0) == 'node' && is_numeric(arg(1))) {  // first, we check if it's a node
    if($tabs) { ?>  // then, we check if tabs are showing
      <div id="actions_menu"> // we add a div to float the menu to the right, this is optional
        <div class="menu_head">Actions</div> // this is the link that users will click to see the menu
          <ul class="menu_body"> // this is the ul container
           <?php print $tabs; ?>
          </ul>
      </div> // actions_menu ends
      <div class="clear"></div> // if we're floating everyting to the right, we'll need this
      <h1 class="title"><?php print $title ?></h1> // we print the node title after our menu
<?php } ?>

<?php } else { ?> // when it's not a node we want to show the traditional tabs
   <h1 class="title"><?php print $title ?></h1> // first the title
   <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul>'; endif; ?> // then the tabs
   <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?> // if there's $tabs2 we print them
<?php } ?>

Don't forget to remove the comments above.

Now the Script:

<script type="text/javascript">
  $(document).ready(function () {$("ul.menu_body li:even").addClass("alt");
  });
</script>

<script type="text/javascript">
  $(document).ready(function () {
  $("ul.menu_body li:even").addClass("alt");
  $('div.menu_head').click(function () {
  $('ul.menu_body').slideToggle('medium');
  });
});
</script>

And finally the CSS:

#actions_menu {
float: right;
}

.menu_head {
background:#FFFFFF none repeat scroll 0 0;
border-color:#DCDCDC;
border-style:solid;
border-width:1px 1px 1px 10px;
color:#000000;
font-weight:bold;
margin:0.25em 0 0.5em 1px;
padding:0 0 0 5px;
width:104px;
}

.menu_body {
border-bottom:1px solid #DCDCDC;
border-left:1px solid #DCDCDC;
border-right:1px solid #DCDCDC;
width:119px;
margin: -0.5em 0 0 0;
display:none;
}

.menu_body li {
background:#FFFFFF none repeat scroll 0 0;
margin:0;
padding:0;
}

.menu_body li a {
border-left:10px solid #FF6600;
display:block;
font-weight:bold;
padding:0 0 0 5px;
text-decoration:none;
}

.menu_body li.alt {
background:#FFFFFF none repeat scroll 0 0;
margin:0;
padding:0;
}

Now, when we're viewing a node, tabs will be inside the Actions Menu we've just created, this saves a lot of space to the user.

See the screenshots The last case is when you're not viewing a node.

This works for Drupal 6 but it shouldn't be a problem to adapt it to Drupal 5.x