Референс преподавателя · 70–90 минут

Списки, таблицы и карточки ожидаемых игр

Основная цель урока — научить ученика выбирать HTML-структуру по смыслу данных. Flex и Grid идут как дополнительный визуальный слой, если основная практика усвоена.

Сценарий занятия

1. Разогрев: что осталось с прошлого урока

1. HTML описывает смысл и структуру содержимого; CSS — внешний вид и расположение.
2. Тег отвечает на вопрос «что это?», класс помогает выбрать элемент для оформления.
3. Сначала должна быть понятная HTML-структура, после неё — стили.

Вопросы: Чем отличается тег от элемента? Где пишутся атрибуты? Что выберет .game-card? Почему нельзя делать всю страницу из <div>?

2. Списки

<ul> используется, когда порядок пунктов не важен. <ol> — когда есть последовательность или рейтинг. Каждый пункт находится в <li>.

<h2>Игры, за которыми я слежу</h2>
<ul class="games">
  <li>Standoff 2</li>
  <li>Forza 6</li>
</ul>

<h2>Как проверить новость о релизе</h2>
<ol>
  <li>Найти официальный источник</li>
  <li>Проверить платформу</li>
  <li>Проверить дату публикации</li>
</ol>

Вложенный список

<ul>
  <li>
    Standoff 2
    <ul>
      <li>Жанр: шутер</li>
      <li>Статус: ждём официальных новостей</li>
    </ul>
  </li>
</ul>

Обратить внимание: вложенный список располагается внутри соответствующего <li>. Маркеры лучше менять через CSS, а не вставлять символы вручную.

3. Таблицы

Таблица нужна для данных, которые сравниваются по одинаковым признакам. Она не предназначена для построения макета страницы.

<table>
  <caption>Игры, новости о которых мы отслеживаем</caption>
  <thead>
    <tr>
      <th scope="col">Игра</th>
      <th scope="col">Жанр</th>
      <th scope="col">Платформа</th>
      <th scope="col">Статус</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Standoff 2</th>
      <td>Шутер</td>
      <td>PlayStation</td>
      <td>Ждём официальных новостей</td>
    </tr>
    <tr>
      <th scope="row">Forza 6</th>
      <td>Гонки</td>
      <td>PlayStation</td>
      <td>Ждём официальных новостей</td>
    </tr>
  </tbody>
</table>

• caption объясняет назначение таблицы.
• thead и tbody разделяют группы строк.
• tr — строка, th — заголовочная ячейка, td — обычная.
• scope связывает заголовок со строкой или столбцом для доступности.

4. Основная практика

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  border: 1px solid #cbd5e1;
  text-align: left;
}

thead {
  background: #1d4ed8;
  color: white;
}

tbody tr:nth-child(even) {
  background: #eff6ff;
}

5. Flex: карточки игр

Flex удобен, когда элементы нужно расположить преимущественно вдоль одной оси. Карточки остаются обычным списком по смыслу, а Flex меняет только их расположение.

<ul class="game-cards">
  <li class="game-card">
    <span class="tag">Шутер</span>
    <h3>Standoff 2</h3>
    <p>Ждём официальных новостей о платформе и дате.</p>
  </li>
  <li class="game-card">
    <span class="tag">Гонки</span>
    <h3>Forza 6</h3>
    <p>Ждём официальных новостей о платформе и дате.</p>
  </li>
</ul>

.game-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.game-card {
  flex: 1 1 240px;
  padding: 20px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
}

6. Grid: дополнительная сетка

Grid удобен, когда важны одновременно строки и столбцы. Замена касается контейнера; HTML карточек остаётся тем же.

.game-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
}

Сравнение: во Flex размер и перенос диктуют сами элементы; в Grid контейнер явно задаёт сетку. Для простых карточек подходят оба варианта.

Контрольные вопросы

• Когда использовать ul, а когда ol?
• Почему нельзя помещать li без родительского списка?
• Чем отличаются th и td?
• Для чего таблице нужны caption и scope?
• Почему таблицей не строят сетку страницы?
• Что делает flex-wrap?
• Как работает minmax(220px, 1fr)?

Критерии готовности

Важно: названия игр используются как близкая ученику тема. Не называйте вымышленные даты релиза фактом. Для реальной информации проверяйте официальные страницы издателей и PlayStation непосредственно перед уроком.