Назад к списку задач

Работа с таблицами

Уровень: Начинающий

Задача по HTML и CSS: создание HTML таблиц и работа с ними

Выполните все пункты задания и сравните с результатом. Для поиска неизвестных вам тегов и свойств используйте поиск справочника.

  1. Создайте папку в удобном для вас месте на вашем компьютере
  2. В этой папке создайте новый HTML документ - index.html
  3. В index.html создайте HTML скелет документа
  4. Создайте новый CSS файл - style.css
  5. Подключите CSS файл к HTML файлу
  6. Создайте таблицу состоящую из 5 строк и 5 столбцов, укажите таблице класс table
  7. Первую строку оберните в тег thead и столбцы переделайте в заглавные столбцы (th)
  8. Последнюю строку оберните в тег tfoot
  9. Оставшиеся строки оберните в тег tbody
  10. Обозначьте столбцы первой строки заголовками, прописав текст (первый - №, второй - Имя, третий - E-mail, четвертый - Пол, пятый - Дата) в тегах th
  11. Заполните строки, которые находятся в tbody любыми произвольными данными
  12. В последней строке, которая находится в tfoot, объедините все столбцы в один, используя соответствующий атрибут для td
  13. В получившимся столбце напишите текст "Всего: 3"
  14. В CSS файле создайте селектор .table td, .table th и создайте сплошную границу толщиной в 1 пиксель и цветом #ccc; и задайте внутренний отступ сверху и снизу по 5px, слева и справа по 10px
  15. Создайте селектор .table и объедините границы ближайших столбцов при помощи специального свойства (ищите в поиске "поведение границ таблицы"), так же задайте таблице ширину 500px;
  16. Создайте селектор .table thead и измените цвет фона на #f0f1f4;
  17. Создайте селектор .table tfoot и измените цвет фона на #121212;, цвет текста на #fff; и текст прижать к правому краю

Результат

See the Pen Работа с таблицами by Dmitry Valak (@dmitryvalak) on CodePen.


Назад к списку задач

Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии