Перечислены имена первых 5 самых известных людей мира. Сформируйте из них список.
Мартин Лютер Кинг, Роберт Оппенгеймер, Альфред Хичкок, Чарли Чаплин, Коко Шанель
В HTML различают списки маркированные, нумерованные и списки описаний, для решения задачи нужно выбрать один из них. Можно ли по имеющейся в задании информации судить, кто из этих людей более или менее известен? Такой информации нет. Значит, порядок имён в списке не важен, следовательно, нужно сформировать ненумерованный список. Какой тег используется для оформления ненумерованного списка (Unordered List)?
Оформляем список имён, не забывая, что каждый элемент списка должен быть оформлен при помощи парного тега li:
Ниже написаны имена людей из ТОП-5 списка Forbes. В скобках даны данные о финансовом состоянии этих людей. Расположите их в порядке убывания денег.
Карлос Слим Элу ($50 млрд), Билл Гейтс ($75 млрд), Уоррен Баффет ($60,8 млрд), Джефф Безос ($45,2 млрд), Амансио Ортега ($67 млрд)
Схема рассуждений такая же, как в первом задании. Важен ли порядок вывода имён в данном списке? Да, конечно, более того, в самом задании требуется расположить имена по убыванию. Какой тег используется при разметке нумерованных списков (Ordered List)?
Оформляем ТОП-5 список его помощью, самостоятельно сортируя при этом фамилии:
Намечается детский праздник и нужно составить смету на заказ аниматоров в костюмах сказочных персонажей.
У всех колонок должны быть заголовки «Персонаж»/«Время выступления»/«Цена».
В конце таблицы сделайте строку ИТОГО и посчитайте общие затраты на аниматоров. Строка «ИТОГО» должна занимать две ячейки, а сумма должны быть в третьем столбце.
В таблице должны быть использованы все теги, изученные на занятии.
Итак, требуется составить таблицу, это тег table. В таблице должна быть строка заголовков thead, строка итогов tfoot и, конечно, основной контент таблицы — tbody. Формируем основу таблицы:
Теперь нужно разметить ячейки. В смете должны быть представлены 7 аниматоров, значит в основном теле таблицы (tbody) будет 7 строк, это 7 тегов tr.
Столбцов нужно три — «Персонаж», «Время выступления», «Цена». Значит, в каждой строке будет по 3 ячейки, то есть по 3 тега td.
В строке заголовков thead также будет 3 ячейки. В строке итогов tfoot слово «ИТОГО» должно занимать две ячейки, а сумма должна быть в третьем столбце. Для объединения ячеек по горизонтали используется атрибут colspan="число". Таким образом, всего в строке tfoot будет 2 ячейки, одна двойная с «ИТОГО» и одна обычная.
Добавляем в таблицу строки и ячейки и заполняем её данными. Итоговую сумму приходится считать самостоятельно:
Кто-то составил таблицу с данными звезд эстрады для вашего сайта. Но допустил несколько грубых ошибок и таблица выглядит плохо.
Найдите и устраните проблемы с лишними ячейками в таблице так, чтобы она перестала разваливаться.
В итоге у вас должна получиться таблица из 7 строк и 4 колонок.
В первую очередь всегда требуется проверить качество кода — закрыты ли все теги, которые должны быть закрыты, не допущено ли пересечений тегов? Если всё хорошо, приступаем к редактированию ячеек.
Всего в таблице должно быть 4 столбца. Заголовок последнего столбца — «Знак зодиака» — должен занимать две строки по высоте, подобно заголовку «Возраст». Для объединения ячеек по вертикали используется атрибут rowspan="число". Вносим соответствующие изменения в код:
При объединении ячеек с использованием атрибутов rowspan и colspan соседние ячейки вытесняются, так как объединённые ячейки занимают их места. Наши объединённые ячейки «Возраст» и «Знак зодиака» вытеснили две ячейки из второй строки в заголовке таблицы. Удаляем лишние пустые ячейки. Теперь шапка таблицы выглядит отлично.
Строка с Майклом Джексоном оформлена верно, в ней ровно четыре ячейки и все они заполнены данными. Во всех оставшихся строках последняя ячейка явно лишняя: во-первых, она пустая, а во-вторых, столбцов должно быть всего четыре, а не пять. Удаляем последнюю пустую ячейку в каждой строке.
Далее, Шарль Азнавур и Пол Маккартни. Они оба близнецы, поэтому автор таблицы решил объединить ячейки со знаком зодиака. Но он не учёл, что ячейка с атрибутом rowspan="2" растянется и займёт место не только в "своей" строке, но и в следующей. Поэтому ячейка «Близнецы» в строке Пола Маккартни оказалась лишней, удаляем её. Последняя пустая ячейка в строке Шарля Азнавура также не несёт никакой пользы, удаляем и её:
Осталась Мадонна. Поскольку «Мадонна» это псевдоним, а не имя или фамилия, заключаем, что объединение ячеек в стобцах «Имя» и «Фамилия» вполне обосновано. Поэтому удаляем вторую пустую ячейку из строки. Таблица выровнялась, задача решена:
Вы можете посмотреть, как выглядят выполненные задания на Codepen.