HTML

HTML: списки и таблицы

📚 22 вопросовПройти тест →
Лекция

HTML: списки и таблицы

HTML

HTML: списки и таблицы

Введение: как порядок на полке 🧺

Представьте полку: если вещи разбросаны, ничего не найти.
Списки и таблицы — это способ организовать информацию, чтобы её легко читать и сравнивать.
💡 Совет: список — это «перечень», таблица — «сетка сравнения».
✅ Вывод: правильная форма подачи делает данные понятными.

Проблема: данные без структуры ❌

Без структуры:
  • текст «слипается»;
  • сложно сравнивать значения;
  • пользователь теряется.
Со списками и таблицами:
  • ясная логика;
  • быстрое чтение;
  • удобное сравнение.
✅ Вывод: структура экономит время читателя.

Чем помогает и как работает

  • упрощает чтение: пользователь быстрее понимает структуру материалов;
  • делает данные сравнимыми и снижает когнитивную нагрузку;
  • улучшает доступность и качество контента для SEO.
Как это работает:
  1. Сначала определяем, что перед нами: перечисление или сравнение параметров.
  2. Для перечней используем списки (ul/ol/dl) с корректной иерархией.
  3. Для сравнения используем таблицу с заголовками и логическими секциями.
  4. Проверяем, что структура читается быстро и без двусмысленностей.
✅ Вывод: правильный формат данных экономит время пользователю и снижает число ошибок чтения.

Что такое списки и таблицы

Список — это набор однотипных пунктов.
Таблица — это данные, которые нужно сравнивать по строкам и столбцам.
✅ Вывод: списки — про «перечень», таблицы — про «сравнение».

Ключевые термины (простыми словами)

  • ul — маркированный список (без порядка).
  • ol — нумерованный список (порядок важен).
  • li — элемент списка.
  • dl — список терминов и определений.
  • table — таблица.
  • tr — строка таблицы.
  • th — заголовочная ячейка.
  • td — обычная ячейка.
  • caption — подпись таблицы.
  • thead / tbody / tfoot — логические части таблицы.
✅ Вывод: это базовые элементы для структурирования данных.

1. Списки — когда элементы однотипны

Назначение: собрать пункты одной природы.
Простыми словами: списки нужны, когда у вас есть набор однотипных пунктов, который нужно быстро просканировать.
Аналогия: список покупок.
Пример:
<ul>  <li>HTML</li>  <li>CSS</li>  <li>JavaScript</li></ul>
🔎 Как это происходит на практике:
  1. Сначала проверяю, действительно ли элементы однотипны и относятся к одной задаче.
  2. Формирую каждый пункт как отдельный li с короткой формулировкой.
  3. Проверяю, что список читается сверху вниз без потери смысла. Характеристики:
  • ✅ Каждый пункт — li.
  • ✅ Список можно вкладывать.
❗ Когда использовать: когда элементы равны по смыслу.
✅ Вывод: списки делают текст «сканируемым».

2. ul — маркированный список

Назначение: показать пункты без строгого порядка.
Простыми словами: ul — список без строгого порядка, где важен сам набор пунктов, а не их номер.
Аналогия: перечень характеристик.
Пример:
<ul>  <li>Короткие уроки</li>  <li>Практика после каждого блока</li></ul>
🔎 Как это происходит на практике:
  1. Выбираю ul, если пункты можно менять местами без потери смысла.
  2. Добавляю лаконичные li без перегруженных формулировок.
  3. Проверяю, что каждый пункт отвечает на один и тот же вопрос.
❗ Когда использовать: когда порядок пунктов не влияет на результат чтения. ✅ Вывод: ul — когда порядок не важен.

3. ol — нумерованный список

Назначение: показать порядок шагов.
Простыми словами: ol нужен для шагов и последовательностей, где номер пункта влияет на выполнение.
Аналогия: инструкция по сборке.
Пример:
<ol>  <li>Зарегистрироваться</li>  <li>Выбрать курс</li>  <li>Начать обучение</li></ol>
🔎 Как это происходит на практике:
  1. Для инструкций и алгоритмов сразу выбираю ol.
  2. Проверяю, что шаги нельзя безопасно переставить местами.
  3. Тестирую, что пользователь проходит шаги именно в указанном порядке.
❗ Когда использовать: когда есть пошаговый процесс или приоритетная последовательность. ✅ Вывод: ol — когда порядок важен.

4. dl — список определений

Назначение: «термин → значение».
Простыми словами: dl — формат «термин и объяснение», который подходит для словарей и FAQ.
Аналогия: словарь.
Пример:
<dl>  <dt>HTML</dt>  <dd>Язык разметки</dd></dl>
🔎 Как это происходит на практике:
  1. Выписываю термины в dt, а объяснения — в dd.
  2. Следю, чтобы у каждого термина было понятное и краткое определение.
  3. Проверяю, что структура читается как словарь, а не как обычный список.
❗ Когда использовать: когда нужно показать пары «понятие → определение». ✅ Вывод: dl — лучший способ для терминов и определений.

5. Вложенные списки

Назначение: показать иерархию.
Простыми словами: вложенный список показывает уровни иерархии: родительский пункт и его подпункты.
Аналогия: меню с подкатегориями.
Пример:
<ul>  <li>Frontend    <ul>      <li>HTML</li>      <li>CSS</li>    </ul>  </li></ul>
🔎 Как это происходит на практике:
  1. Выделяю верхний уровень элементов как родительские пункты.
  2. Под каждый родительский пункт добавляю дочерний список.
  3. Проверяю, что вложенность не уходит слишком глубоко и остаётся читаемой.
❗ Когда использовать: когда у данных есть уровни и подкатегории. ✅ Вывод: вложенность помогает показать уровни.

6. Таблица — данные в сетке

Назначение: сравнение и структура.
Простыми словами: таблица нужна для данных, которые удобно сравнивать по строкам и столбцам.
Аналогия: расписание в дневнике.
Пример:
<table>  <tr>    <th>Курс</th>    <th>Длительность</th>  </tr>  <tr>    <td>HTML</td>    <td>4 недели</td>  </tr></table>
🔎 Как это происходит на практике:
  1. Определяю колонки сравнения и заполняю строки данных.
  2. Выношу названия колонок в заголовочные ячейки th.
  3. Проверяю, что таблица помогает сравнивать, а не дублирует обычный текст.
❗ Когда использовать: когда у данных есть общие параметры для сравнения. ✅ Вывод: таблица нужна, когда важно сравнение.

7. thead, tbody, tfoot

Назначение: логически разделить таблицу.
Простыми словами: thead, tbody и tfoot делят таблицу на логические части: шапка, тело и итог.
Аналогия: заголовок, тело, итог.
Пример:
<table>  <thead>    <tr><th>Тариф</th><th>Цена</th></tr>  </thead>  <tbody>    <tr><td>Базовый</td><td>1990 ₽</td></tr>  </tbody>  <tfoot>    <tr><td>Итого</td><td>1990 ₽</td></tr>  </tfoot></table>
🔎 Как это происходит на практике:
  1. Заголовки колонок помещаю в thead.
  2. Основные данные размещаю в tbody.
  3. Сводную строку или итог выношу в tfoot, если это уместно.
❗ Когда использовать: когда таблица содержит несколько строк и требует чёткой структуры. ✅ Вывод: разделение делает таблицу понятнее.

8. Заголовки и доступность таблицы

Назначение: объяснить, что означает колонка или строка.
Простыми словами: правильные заголовки таблицы делают данные понятными для экранных дикторов и клавиатурной навигации.
Аналогия: подписи к осям графика.
Пример:
<th scope="col">Тариф</th><th scope="row">Базовый</th>
🔎 Как это происходит на практике:
  1. Для заголовков использую th, а для данных — td.
  2. Добавляю scope, чтобы явно задать связь заголовков со строками и колонками.
  3. Проверяю таблицу через инструменты доступности в DevTools.
❗ Когда использовать: на всех таблицах, которые могут читать разные группы пользователей. ✅ Вывод: th и scope помогают доступности.

9. Объединение ячеек (rowspan, colspan)

Назначение: объединить блоки.
Простыми словами: rowspan и colspan объединяют ячейки, когда одна ячейка относится к нескольким строкам или колонкам.
Аналогия: объединённые клетки в расписании.
Пример:
<td colspan="2">Все курсы</td>
🔎 Как это происходит на практике:
  1. Сначала строю обычную таблицу без объединений.
  2. Добавляю rowspan/colspan только там, где это логически оправдано.
  3. Проверяю, что после объединения структура остаётся понятной.
❗ Когда использовать: когда объединение реально упрощает чтение таблицы, а не усложняет её. ✅ Вывод: используйте объединение только когда оно реально нужно.

10. Список или таблица?

Простыми словами: список — для перечня пунктов, таблица — для сравнения значений по общим колонкам.
  • Список — когда пункты равны.
  • Таблица — когда нужно сравнение по параметрам.
🔎 Как это происходит на практике:
  1. Сначала отвечаю на вопрос: нужно перечисление или сравнение параметров.
  2. Если нужен просто набор пунктов — выбираю список; если сравнение — таблицу.
  3. Проверяю итоговый формат на читабельность и скорость восприятия.
❗ Когда использовать: когда выбираете формат представления данных в интерфейсе. ✅ Вывод: таблица — только для табличных данных.

Сравнение: список vs таблица

ЧтоСписокТаблица
СтруктураПереченьСетка
Когда нужноОднотипные элементыСравнение параметров
ПримерПреимущества курсаТарифы и цены

Часто спрашивают на собеседованиях

  • Когда использовать ol, а когда ul? ol — порядок важен, ul — нет.
  • Когда нужен dl? Для терминов и определений.
  • Зачем thead/tbody? Для логической структуры и доступности.
  • Чем th отличается от td? th — заголовок, td — данные.
  • Когда таблица неуместна? Когда данные не требуют сравнения.
✅ Вывод: это базовые интервью‑вопросы по структуре.

Типичные ошибки

Ошибка 1: Делать список из div

❌ Неправильно: нет семантики.
✅ Правильно: ul/ol.
Почему: списки должны быть списками.

Ошибка 2: Использовать таблицу для верстки

❌ Неправильно: таблица не для макета.
✅ Правильно: таблица только для данных.
Почему: нарушается смысл.

Ошибка 3: Нет thead и th

❌ Неправильно: непонятны заголовки.
✅ Правильно: выделять шапку таблицы.
Почему: помогает чтению и доступности.

Ошибка 4: Перепутан ol и ul

❌ Неправильно: шаги без порядка.
✅ Правильно: если шаги — используйте ol.
Почему: порядок должен читаться сразу.

Best Practices

  • Используйте ul, когда порядок не важен.
  • Используйте ol, когда порядок важен.
  • Используйте dl для терминов.
  • В таблицах всегда выделяйте заголовки th.
  • Добавляйте caption для пояснения.
  • Не применяйте таблицы для layout.

Заключение

Ключевые мысли

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

Проверьте знания

Закрепите материал — пройдите тест по теме «HTML: списки и таблицы»

Пройти тест →