Ячейки таблицы HTML неправильно выровнены

Question

У меня есть следующая таблица 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;
}

Есть идеи, почему это результат?

альтернативный текст http://i42.tinypic.com/24wx7qx.jpg

Вместо того, чтобы получить красивый заголовок таблицы с закругленными углами, вы получите странный разрыв между ячейками. Откуда бреши? Помимо исправления этой уродливой проблемы, я хотел бы понять обоснование того, почему все браузеры отображают HTML таким образом.

Answer 1

Эти столбцы - это интервалы между ячейками и отступы.

Вам необходимо установить цвет фона деления для файлов GIF.Это белое пространство - это отступы вокруг клеток.

Вы также можете установить cellpadding = '0' и cellspacing = '0' в определении таблицы.Значения по умолчанию - 1 и 2 соответственно.Я бы рекомендовал против этого, так как это может вызвать проблемы со строками, несущими данные.

Answer 2

table{border-collapse:collapse;}

необходимо для удаления границ таблицы ...

Answer 3

Вы видите интервал по умолчанию. Исправлено:

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