Работа с таблицами
Уровень: Начинающий
Задача по HTML и CSS: создание HTML таблиц и работа с ними
Выполните все пункты задания и сравните с результатом. Для поиска неизвестных вам тегов и свойств используйте поиск справочника.
- Создайте папку в удобном для вас месте на вашем компьютере
- В этой папке создайте новый HTML документ - index.html
- В index.html создайте HTML скелет документа
- Создайте новый CSS файл - style.css
- Подключите CSS файл к HTML файлу
- Создайте таблицу состоящую из 5 строк и 5 столбцов, укажите таблице класс table
- Первую строку оберните в тег thead и столбцы переделайте в заглавные столбцы (th)
- Последнюю строку оберните в тег tfoot
- Оставшиеся строки оберните в тег tbody
- Обозначьте столбцы первой строки заголовками, прописав текст (первый - №, второй - Имя, третий - E-mail, четвертый - Пол, пятый - Дата) в тегах th
- Заполните строки, которые находятся в tbody любыми произвольными данными
- В последней строке, которая находится в tfoot, объедините все столбцы в один, используя соответствующий атрибут для td
- В получившимся столбце напишите текст "Всего: 3"
- В CSS файле создайте селектор .table td, .table th и создайте сплошную границу толщиной в 1 пиксель и цветом #ccc; и задайте внутренний отступ сверху и снизу по 5px, слева и справа по 10px
- Создайте селектор .table и объедините границы ближайших столбцов при помощи специального свойства (ищите в поиске "поведение границ таблицы"), так же задайте таблице ширину 500px;
- Создайте селектор .table thead и измените цвет фона на #f0f1f4;
- Создайте селектор .table tfoot и измените цвет фона на #121212;, цвет текста на #fff; и текст прижать к правому краю
Результат
See the Pen Работа с таблицами by Dmitry Valak (@dmitryvalak) on CodePen.
Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии
Обсуждение (17)
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
конечно с collapse не очень понятно было