Знакомство с таблицами / Задаём рамки с помощью CSS [4/23]
×

Задаём рамки с помощью CSS [4/23]

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

Таблицы в предыдущих заданиях отображались с рамками по умолчанию. Такие рамки отображаются, если у тега <table> задан атрибут border с ненулевым значением.

Но с помощью атрибута border гибко управлять рамками не получается. С его помощью можно только изменять их толщину.

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

Потренируемся использовать CSS для задания рамок таблицы.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задаём рамки с помощью CSS</title> </head> <body> <h1>Распределение браузеров</h1> <table border="1"> <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. Измените значение атрибута border на 5 в HTML-редакторе.
  2. Затем удалите этот атрибут.
  3. В CSS-редакторе раскомментируйте стили для таблицы,
  4. затем раскомментируйте стили для ячейки.

Комментарии в CSS — это /* и */, удаляйте обе строчки.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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