HTML table cells not properly aligned

Question

I have the following HTML table:

<table style="width: 100%;">
<tr>
    <td class="title_bar_left_border"></td>
    <td class="title_bar_middle"></td>
    <td class="title_bar_right_border"></td>
</tr>
</table>

With the following css rules:

.title_bar_left_border
{
    BACKGROUND-IMAGE: url(tray_left.gif);
    WIDTH:  3px;
    HEIGHT: 24px;
}

.title_bar_right_border
{
    BACKGROUND-IMAGE: url(tray_right.gif);
    WIDTH:  3px;
    HEIGHT: 24px;
}

.title_bar_middle
{
    BACKGROUND-IMAGE: url(tray_middle.gif);
    WIDTH: 100%;
    BACKGROUND-REPEAT: repeat-x;
    HEIGHT: 24px;
}

Any idea why this is the result?

Instead of getting a nice table header with rounded corners you get this weird gap between the cells. Where are the gaps coming from? Besides fixing this ugly issue, I would like to understand the rationale as to why all browsers render the HTML this way.

Answer 1

You see the default spacing. Fix:

table
{
    border-collapse:  collapse;
    border-spacing:   0;
}

Answer 2

Those bars are cell spacing and padding.

You need to set the background of the division to the color of the gif files. That white space is the padding around the cells.

You can also set cellpadding='0' and cellspacing='0' in the table definition. The default values are 1 and 2 respectively. I'd recommend against it, though, as it might cause issues with the data bearing rows.

Answer 3

table{border-collapse:collapse;}

is needed to remove the borders of the table...