Знакомство с таблицами / Улучшаем отображение рамок [5/23]
×

Улучшаем отображение рамок [5/23]

Мы задали рамки таблицы с помощью CSS, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

table {
  border-collapse: collapse;
}

Значение collapse убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Улучшаем отображение рамок</title> </head> <body> <h1>Распределение браузеров</h1> <table> <tr> <td>Браузер</td> <td>Посещения</td> </tr> <tr> <td>Mozilla Firefox</td> <td>163</td> </tr> <tr> <td>Google Chrome</td> <td>78</td> </tr> <tr> <td>Safari</td> <td>35</td> </tr> </table> </body> </html>
CSS
table { border: 3px solid black; } td { border: 3px solid lightgray; }
HTML Academy
  1. В CSS-редакторе задайте для таблицы свойство border-collapse: collapse, чтобы рамки ячеек схлопнулись.
  2. Затем в CSS-редакторе увеличьте ширину рамки таблицы до 6px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.