Таблицы. Фиксирование ширины ячейки с полями - Прочие статьи - Web-кодинг - Каталог статей

Использовать или нет таблицы для вёрстки страниц - дело вкуса каждого верстальщика.
Авторы сайта positioniseverything.com героически пытаются решить старую проблему: сверстать страницу в три колонки без помощи таблиц, при этом снова и снова натыкаясь на глюки браузеров. В то время как рядовые верстальщики со вздохом набирают <table>.
Но даже такой годами испытанный инструмент, как таблица, иногда создаёт проблемы.

Задача:
создать таблицу из трёх колонок шириной в 100px, 70% и 30% соответственно.
Все колонки должны иметь поля в 10px.
Дополнительные условия: минимум HTML, максимум CSS.
В тестировании участвуют Internet Explorer 6, Mozilla FireFox 1.5, Opera 8.

Code (CSS)

table { border-collapse: collapse; width: 100%; }
td { padding: 10px; }
td#one { background: red; width: 100px; }
td#two { background: green; width: 70%; }
td#three { background: blue; width: 30%; }

Code (HTML)

<table>
<tr>
<td id="one">one</td>
<td id="two">two</td>
<td id="three">three</td>
</tr>
</table>

Результат (1):

$IMAGE1$

Во всех трёх браузерах ширина первой ячейки игнорируется, т. к. ужимается соседними колонками. Можно, конечно, поставить распорку, но мы ведь с Вами стремимся к минимализму в HTML, правильно?
Тем более, что в запасе есть шикарное свойство CSS table-layout:

Code (CSS)

table { border-collapse: collapse; table-layout: fixed; width: 100%; }

Получаем (2):

Что за чертовщина? В Mozilla и Opera ширина первой колонки увеличилась на размер полей и составила 120px.

Попробуем применить свойство box-sizing:

Code (CSS)

td { box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; }

Не помогло (3):

Этот баг присутствует во всех трёх браузерах.
В IE его можно побороть, выставив table-layout: fixed; (что мы и сделали чуть выше).
В Mozilla и Opera для этой цели необходимо задать ширину ячейки в элементе col, при этом убрав её из определения td.

Code (CSS)

table { border-collapse: collapse; table-layout: fixed; width: 100%; }
col#c_one { width: 100px; }
col#c_two { width: 70%; }
col#c_three { width: 30%; }
td { padding: 10px; }
td#one { background: red; }
td#two { background: green; }
td#three { background: blue; }

Code (HTML)

<table>
<col id="c_one" />
<col id="c_two" />
<col id="c_three" />
<tr>
<td id="one">one</td>
<td id="two">two</td>
<td id="three">three</td>
</tr>
</table>

Выходит (4):

Всё? ... Почти.
В Opera первая колонка всё-таки чуть шире установленного значения на пару пикселей. Я долго искал, откуда они могли появиться.
Наконец нашёл виновника.
Вы не поверите, им оказался не обнулённый HTML-атрибут cellpadding. Причём выставление padding: 0 в CSS для всех ячеек не решает проблемы.

Code (CSS)

table { border-collapse: collapse; table-layout: fixed; width: 100%; }
col#c_one { width: 100px; }
col#c_two { width: 70%; }
col#c_three { width: 30%; }
td { padding: 10px; }
td#one { background: red; }
td#two { background: green; }
td#three { background: blue; }

Code (HTML)

<table cellpadding="0">
<col id="c_one" />
<col id="c_two" />
<col id="c_three" />
<tr>
<td id="one">one</td>
<td id="two">two</td>
<td id="three">three</td>
</tr>
</table>

Итоговый вариант (5):

Используйте на здоровье!

Примечание автора сайта.
Автор статьи рассматривает Internet Explorer 6 в Quirks mode.
Если же у вас, как и у меня, указан DOCTYPE, приводящий IE в Standards compliance mode, то вам необходимо остановиться на варианте 2.

Но при этом вам нужно учесть W3C box model и в CSS указать td#one {background:red;width:80px;}, а не td#one {background:red;width:100px;}.

Задача: создать HTML-таблицу из трёх колонок шириной в 100px, 70% и 30% соответственно