Знакомство с таблицами / Горизонтальные и вертикальные рамки [6/23]
×

Горизонтальные и вертикальные рамки [6/23]

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

Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

  • border-top,

  • border-right,

  • border-bottom,

  • border-left.

Эти свойства задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.

В этом задании вы потренируетесь создавать горизонтально и вертикально расчерченные таблицы.


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

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

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

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

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