Глаза страшат, а руки делают

Мартышка и очки
Как грамотно использовать в таблицах стиль «border-collapse»


Те, кому важен лишь результат, могут не читать всю статью, а просто заглянуть в резюме. В основной же части статьи анализируются заведомо ложные ходы («то к темю их прижмёт…» — и т.д.).

Зачем?

Интересно ведь не только «как», но и «почему». Пока мы не знаем, почему, любые «как» внушают опасения: здесь сработало, а сработает ли там? А ошибки зачастую помогают вскрыть внутреннюю логику процессов, которые мы пытаемся осуществить.

***

Когда мы создаём рамку таблицы через CSS, возникает много «проклятых вопросов». Рамка не поддаётся нашей простой и понятной логике, начинает выкаблучиваться. В ответ приходится выкаблучиваться нам, создавая монструозные и крайне неудобные для редактирования коды с назначением индивидуальных параметров чуть ли не каждой ячейке.

Тест 1

Итак, давайте создадим таблицу с синей рамкой толщиной в 2 пикселя.

<style type="text/css">
table {border: 2px solid Blue;}
</style>

Получаем результат: таблица только с внешней рамкой:

 Тест 1   Тест 1 
 Тест 1   Тест 1 

Тест 2

Попробуем задать стиль не таблице, а ячейкам:

<style type="text/css">
td {border: 2px solid Blue;}
</style>

Все внутренние рамки оказываются сдвоенными: по 4 пикселя:

 Тест 2   Тест 2 
 Тест 2   Тест 2 

Можно, конечно, изваять что-нибудь вроде

<table>
<tr>
<td style=
"border-right: none; border-bottom: none;">Тест2</td>
<td style=
"border-bottom: none;">Тест 2</td>
</tr>
<tr>
<td style=
"border-right: none;">Тест 2</td>
<td>
Тест 2</td>
</tr>
</table>

Но это слишком напоминает байку про микроскоп и гвозди.

Тест 3

Попробуем задать стиль и таблице, и ячейкам.

<style type="text/css">
table , td {border: 2px solid Blue;}
</style>

Всё удвоилось:

 Тест 3   Тест 3 
 Тест 3   Тест 3 

(Это мы ещё не применяем padding, а то было бы совсем весело, причём в разных браузерах по-разному.)

Ну ладно, нам нужно 2 пикселя? Зададим по 1 — и вперёд! А если нам нужен 1? Или 3? Непринципиально, говорите? Но неужели не хочется быть хозяином положения, а не рабом?

И тут приходит на память, что от людей-то мы слыхали про border-collapse — стиль, который регулирует толщину ячеек.

border-collapse: collapse; /* задаёт выравнивание толщины границ */
border-collapse: separate; /* оставляёт всё по умолчанию */

Итак, попробуем задать его ячейкам.

Тест 4

Пробуем:

<style type="text/css">
td {border: 2px solid Blue; border-collapse: collapse;}
</style>

Не сработало. Получается то же, что и в тесте 2.

 Тест 4   Тест 4 
 Тест 4   Тест 4 

А не сменить ли браузер?

Подождите ругать браузер. Ещё не вечер. Понюхали? Теперь полижем.

Тест 5

Назначаем всё таблице.

<style type="text/css">
table {border: 2px solid Blue; border-collapse: collapse;}
</style>

И снова получаем самый первый вариант.

 Тест 5   Тест 5 
 Тест 5   Тест 5 

Что бы ещё такого выдумать?.. Ага!

Тест 6

Таблице назначим border-collapse, а ячейкам — значание border:

<style type="text/css">
table {border-collapse: collapse;}
td {border: 2px solid Blue;}
</style>

Ура!

 Тест 6   Тест 6 
 Тест 6   Тест 6 

А если мы захотим внешнюю рамку сделать потолще, наверно, достаточно будет прописать значения border и таблице?

Тест 7

Проверим.

<style type="text/css">
table {border: 2px solid Blue; border-collapse: collapse;}
td {border: 2px solid Blue;}
</style>

Ни фига подобного:

 Тест 7   Тест 7 
 Тест 7   Тест 7 

Кажется, мы уже близки к пониманию. Создадим-ка таблице и ячейкам разные стили. И давайте немного повыпендриваемся.

Тесты 8–9

Стиль таблицы, которую покажем слева:

<style type="text/css">
table {border: none; border-collapse: collapse;}
td {border: 2px solid Blue;}
</style>

Стиль той, что справа:

<style type="text/css">
table {border: 6px ridge Yellow; border-collapse: collapse;}
td {border: 2px solid Blue;}
</style>

Смотрим:

 Тест 8   Тест 8 
 Тест 8   Тест 8 
 Тест 9   Тест 9 
 Тест 9   Тест 9 

Что происходит? Граница таблицы накладывается сверху на границу ячеек, и поэтому

  • когда её нет, мы видим внешнюю границу ячеек;
  • когда она такая же, как у ячеек, мы видим её, но не отличаем от границы ячеек;
  • когда она другая, то мы видим и различаем её.

Однако, контрвопрос: почему она у нас в тесте 3 не накладывалась, а удваивалась?

Здрасте! Так border-collapse не был задан!

Резюме

Когда мы хотим сделать таблицу с одинаковыми рамками, border-collapse: collapse нужно задать именно таблице, а параметры рамки — ячейкам.

Общую рамку для таблицы можно задать независимо от рамок ячеек.

То есть, стиль border-collapse задаётся таблице, но воздействует на ячейки.



 002618