Списки и таблицы

Вячеслав Крысин Нетология

План занятия

1. Списки
   • Виды списков
   • Синтаксис
   • Изменяем нумерацию
   • Многоуровневые списки
2. Таблицы
   • Синтаксис
   • Атрибуты
3. figure

Разновидности списков

Списки могут быть:

• Упорядоченные или неупорядоченные. Если последовательность перечисленных элементов не зависит от какого-то определённого логического порядка, то такой список является неупорядоченным. Если же от перестановки перечисленных элементов изменяется смысл, то такой список называется упорядоченным;
• Нумерованные и ненумерованные. Каждый элемент нумерованного списка начинается с порядкового номера или буквы в алфавитном порядке. Элемент ненумерованного списка начинается c маркера списка;
• Одноуровневые (простые) или многоуровневые.

Виды списков в HTML

• Маркированные списки;
• Нумерованные списки;
• Списки описаний.

Синтаксис

Общее

Во всех видах списков общим является то, что вложить внутрь родительского тега можно только теги пунктов списка.

Пример разметки списка

Хорошо

Плохо

Маркированные списки

Родительский парный тег UL (англ. Unordered List — неупорядоченный список). Список начинается открывающимся тегом <ul> и заканчивается закрывающим тегом </ul>

Парный тег пункта списка LI (англ. List Item — элемент списка). Каждый пункт списка начинается с тега <li> и заканчивается закрывающим тегом </li>

Задача

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

На одной из страниц нужно перечислить вещи, которые понадобятся в походе.

Цепочка рассуждения

• Как оформим перечень вещей? Списком
• Какой список выбрать? Маркированный
• С чего начинается список? <ul>
• Какие теги используем для оформления пунктов? <li></li>
• Что должно стоять в конце списка? </ul>

Решение

Набор вещей: Компас, Палатка, Сменная одежда, Спальник

Итог Живой пример

Нумерованные списки

Родительский парный тег OL (англ. Ordered List — упорядоченный список). Список начинается открывающимся тегом <ol> и заканчивается закрывающим тегом </ol>

Парный тег пункта списка LI (англ. List Item — элемент списка). Каждый пункт списка начинается с тега <li> и заканчивается закрывающим тегом </li>

Задача

Продолжим писать контент для сайта о детском походе. Теперь нам нужно разместить информацию о необходимых прививках и справках.

Обязательно ставить прививки и собирать справки в строгой последовательности.

Цепочка рассуждения

• Какой список выбрать, если последовательность важна? Нумерованный
• С чего начинается нумерованный список? <ol>
• Какие теги используем для оформления пунктов? <li></li>
• Что должно стоять в конце списка? </ol>

Решение

Перечень прививок и справок: Прививка от кори, Прививка от клещевого энцефалита, Прививка от оспы, Справка от педиатра

Итог Живой пример

Списки описаний

Родительский парный тег DL (англ. Description List — список описаний). Список начинается открывающимся тегом <dl> и заканчивается закрывающим тегом </dl>

Парный тег, в котором располагается сам термин — DT (англ. Definition Term — термин).

Парный тег, внутрь которого помещается расшифровка, определение термина — DD (англ. Description — описание).

Задача

Переходим к заполнению страницы с маршрутом.

Для игрового момента обычные пункты маршрута обозначены выдуманными словами. Чтобы родителям было понятно, где же будут находится их дети — нам нужно дать расшифровку каждого выдуманного слова.

Цепочка рассуждения

• Какой список выбрать, если должны быть даны термины и расшифровки? Список определений
• С чего начинается список определений? <dl>
• Какие теги используем для оформления терминов? <dt></dt>
• Какие теги используем для оформления расшифровок? <dd></dd>
• Что должно стоять в конце списка? </dl>

Решение

Итог Живой пример

Задача

Дежурный врач попросил добавить примечание в список прививок и справок.

Текст примечания: «С момента проведения вакцинации должно пройти не больше 3 месяцев.»

Примечание относится к прививке от энцефалита.

Вариант решения

Можем ли мы сделать так?

Нет! В список должны быть вложены только пункты списка.

Изменяем начало нумерации

Изменяем первую цифру с помощью HTML-атрибута start

Решение Живой пример

Многоуровневые списки

Отдельно стоит остановится на списках, состоящих из нескольких уровней.

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

Это значит, что второй и все следующие уровни списка нужно поместить внутрь пункта предыдущего списка.

Вы можете комбинировать нумерованные и маркированные списки при вложении.

Задача

Инструктор, который пойдет с детьми в поход, боится, что под «Сменной одеждой» каждый родитель может понять разные предметы одежды. И просит нас уточнить этот пункт, добавив к нему пункты с конкретной обязательной одеждой.

Есть более важные предметы одежды, которые обязательно должны быть в рюкзаке ребенка, а есть необязательные, но желательные.

Решение

Итог Живой пример

Задача

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

На странице должны быть следующие данные: имя ребенка, название команды, сумма заработанных им баллов.

Список подойдет?

Синтаксис

Таблица всегда состоит из строк, а строки — из ячеек.

Создаем таблицу при помощи парного родительского тега table.

Затем внутрь таблицы помещается необходимое количество строк при помощи парного тега TR (англ. table row — строка таблицы)

В каждой строке может лежать любое (нужное нам) количество ячеек.

Ячейка создается при помощи парного тега TD (англ. table data cells — ячейка данных таблицы).

Ячейки формируют колонки данных.

Задача

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

На странице должны быть следующие данные: имя ребенка, название команды, сумма заработанных им баллов.

Организаторы похода прислали вам данные о каждом ребенке. Всего в поход ходили 8 детей.

Цепочка рассуждения

• Как создать таблицу? <table>
• Сколько строк должно быть в таблице? 8
• Как создать строку? <tr></tr>
• Сколько ячеек должно быть в строке? 3
• Как создать ячейку? <td></td>
• Какой тег стоит в конце таблицы? </table>

Решение

Итог Живой пример

Решение

Итог Живой пример

Заголовки

Чтобы создать строку с заголовками колонок и отделить эту строку от основных данных таблицы используется парный тег THEAD (англ. table head — "голова" таблицы).

thead следует использовать в самом начале таблицы. Что логично, поскольку заголовки колонок должны располагаться сверху.

Допускается использование не более одного thead в пределах одной таблицы.

Должен идти в разметке сразу после тега table. Внутрь вкладывается тег ряда — tr, а в него теги ячеек — td.

Задача

Родители заходят на сайт и не понимают, что за цифра в последней колонке. Мы поняли, что нам нужно подписать колонки и обозначить, что за данные в каждой из них находятся.

Решение

Итог Живой пример

Тело таблицы

После thead должен идти основной контент таблицы. Его так же группируют по смыслу, для этого используется парный тег TBODY (англ. table body — «тело» таблицы)

Тел таблицы может быть несколько.

Задача

Взять данные одной команды и разбить их по дням, проведенным в походе.

Решение

Итог Живой пример

Итого

В наверняка не раз видели таблицы с расчетами, где в нижней строке выводится сумма или какой-то вывод из приведенных выше цифр.

Для строк ИТОГО используется парный тег TFOOT (англ. table footer — «подвал» таблицы).

Синтаксис его использования ничем не отличается от предыдущих логических элементов thead и tbody.

Задача

Подсчитать и вывести под таблицей общее количество баллов, набранных командой.

Решение

Итог Живой пример

Пустые ячейки

В строках с днями недели у нас есть пустые ячейки. Таже ситуация в последней строке ИТОГО.

Почему бы не объединить пустые ячейки?

Так таблица станет более читаемой и аккуратной.

Горизонтальное объединение ячеек

HTML-атрибут colspan (англ. span — охват).

Указывается для тега ячейки — td.

Значением этих атрибутов может быть только целое положительное число.

Синтаксис

Важно! Следите за суммарным количеством ячеек в строках с учетом охвата.

Задача

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

Решение

Итог Живой пример

Вертикальное объединение ячеек

Можно общединять ячейки не только по горизонтали, но и по вертикали.

Для этого используется атрибут rowspan.

Он так же применяется к тегу ячейки — td.

Задача

Поскольку у всех детей в этой таблице одинаковое название команды, то мы можем объединить все три ячейки напротив имен детей в одну по вертикали.

Решение

Итог Живой пример

Обратите внимание

Как вы возможно заметили, в разметке для строк с данными второго и третьего ребенка не хватает ячеек. Причина в том, что для охвата нужно будет освободить место. По факту атрибуты не склеивают ячейки по ширине или высоте. Они растягивают одну ячейку на указанное количество строк или колонок.

Соответственно, для того, чтобы таблица не развалилась нужно освободить место под это растягивание.

Задача

Было принято решение наградить ребенка, занявшего первое место. И создать на сайте почетную доску, где будет размещена фотография победителя и его имя.

figure

Мы можем отдельно разместить картинку и отдельно написать текст. Но такой код не будет связан между собой по смыслу.

Специально для создания связи между изображением и подписью к нему были созданы отдельные теги.

Тег figure — парный родительский тег. Внутрь него вложен парный тег figcaption.

figcaption является не обязательным — фигура может сущестовать и без описания.

Задача

Было принято решение наградить ребенка, занявшего первое место. И создать на сайте почетную доску, где будет размещена фотография победителя и его имя.

Цепочка рассуждения

• Нам нужно сязать по смыслу картинку и текст? Да
• Подойдет тег figure+figcaption? Да
• Что пишем в начале? <figure>
• Нужно ли обернуть картинку в какой-то тег? Нет
• Какой тег используем для размещения подписи? <figcaption></figcaprtion>
• Что пишем в конце? </figure>

Решение

Создаем фигуру с фотогафией победителя Живой пример

Решение

Вставляем тег figcaption и пишем имя победителя. Живой пример

Подведем итоги

Мы умеем:

1. Создавать маркированный список;
2. Создавать нумерованный список;
3. Создавать список определений;
4. Правильно вкладывать несколько уровней списков друг в друга;
5. Создавать таблицы с любым количеством строк и колонок;
6. Объединять колонки по вертикали и горизонтали;
7. Связывать по смыслу картинку и подпись к ней при помощи фигуры.