HTML table cells not properly aligned

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.

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.

You see the default spacing. Fix:

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

table{border-collapse:collapse;}

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