Hey people, I've got a slight problem after weeks of html programming.

I've got a large table which I use to construct tabs with, details don't really matter. On every tab there is a tab title (which is defined as one single cell in a table with a class from a .css) and under it there are other rows and columns for the table.

sample code for the single table with the single cell in it:

<table class='tabcontainer_title'><tr><td class='tabcontainer_title'>TEXT</td></tr></table>

This table is again positioned in one cell of the table outside it, which has a different class 'tabcontainer_content' This is in the CSS:

.tabcontainer_title{
background-color : #58af34;
background-image : url();
text-align : right;
vertical-align : top;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 0px;
margin-left : 0px;
padding-top : 5px; 
padding-right : 10px; 
padding-bottom : 5px; 
padding-left : 0px;
font-size : 14px;
font-style : normal;
color : #000000;
}
.tabcontainer_content{
width : 100%;
font-weight : bolder;
background-color : #58af34;
color : #000000;
padding : 0px;
border-collapse : collapse;
}

The problem I'm experiencing right now is that if there are like 3 rows in the table, which means there's a lot of emtpy space instead of those rows, the text in the tab title has a large margin from the top: but I haven't configured any margin to be present.

When the table is full of rows though, hence the table is full, then the tab title holds no unnecessary empty space above the text.

What am I missing here?