HTML表格单元格未正确对齐

我有以下HTML表:

<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>

使用以下CSS规则:

.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;
}

知道为什么会这样吗?

alt text http://i42.tinypic.com/24wx7qx.jpg

你没有得到一个有圆角的漂亮的表头,而是得到了单元格之间的这个奇怪的间隙。差距来自哪里?除了解决这个难看的问题,我还想了解为什么所有浏览器都用这种方式呈现HTML。