🧱

Модуль 1. Введение и HTML

Занятие 8
Таблицы

Сегодня мы составим расписание уроков в виде настоящей таблицы.

👀

Сегодня сделаем вот такое

📊

Когда нужна таблица

  • ✅ Расписание уроков
  • ✅ Результаты соревнований
  • ✅ Сравнение: цены, характеристики
  • ❌ Раскладка страницы на колонки — для этого есть CSS

Таблица — для данных в строках и столбцах.

🧱

Кирпичики таблицы

  • table — таблица
  • caption — название
  • tr — строка (row)
  • th — ячейка-заголовок
  • td — ячейка с данными
<table border="1">
  <caption>Оценки</caption>
  <tr>
    <th>Предмет</th>
    <th>Оценка</th>
  </tr>
  <tr>
    <td>Информатика</td>
    <td>5</td>
  </tr>
</table>
➡️

Строим по строкам!

В HTML нет тега для столбца.

  1. Открываем строку tr
  2. Пишем ячейки слева направо
  3. Закрываем строку, начинаем следующую

Столбцы получаются сами.

🗓

Расписание

Рамки делаем через CSS:

  • border-collapse: collapse — одна линия вместо двойной
  • padding — воздух в ячейках
<table>
  <tr><th>№</th><th>Пн</th><th>Вт</th></tr>
  <tr><td>1</td><td>Математика</td><td>История</td></tr>
  <tr><td>2</td><td>Информатика</td><td>Биология</td></tr>
</table>
table { border-collapse: collapse; }
th, td { border: 2px solid #2f7de1; padding: 6px 12px; }
th { background: #e8f1fd; }
↔️

colspan и rowspan

  • colspan="3" — на 3 столбца вправо
  • rowspan="2" — на 2 строки вниз
  • Лишние ячейки удаляем!
<table border="1">
  <tr><th>№</th><th>Пн</th><th>Вт</th></tr>
  <tr><td>1</td><td rowspan="2">Физкультура</td><td>Музыка</td></tr>
  <tr><td>2</td><td>ИЗО</td></tr>
  <tr><td colspan="3">🍎 Обед</td></tr>
</table>
🗃

thead, tbody, tfoot

  • thead — шапка
  • tbody — данные
  • tfoot — итоги

Код понятнее, шапка повторяется при печати.

<table border="1">
  <thead><tr><th>Игрок</th><th>Очки</th></tr></thead>
  <tbody>
    <tr><td>Аня</td><td>12</td></tr>
    <tr><td>Петя</td><td>9</td></tr>
  </tbody>
  <tfoot><tr><td>Всего</td><td>21</td></tr></tfoot>
</table>
🐞

Почему таблица «поехала»?

Найди 2 ошибки.

<table border="1">
  <tr><th>Пн</th><th>Вт</th></tr>
  <td>Математика</td><td>Музыка</td>
  <tr><td colspan="2">Обед</td><td>?</td></tr>
</table>
🃏

Запомни!

  • <table>Таблица
  • <caption>Название
  • <tr>Строка
  • <th>Ячейка-заголовок
  • <td>Ячейка
  • colspan="2"Объединить 2 ячейки в строке
⌨️

Практика: Таблица «Расписание уроков»

  1. Создай таблицу с названием «Моё расписание на неделю».
  2. Первая строка — заголовки: №, Понедельник, Вторник, Среда.
  3. Заполни минимум 4 урока.
  4. Добавь строку «Обед», объединив ячейки с помощью colspan.

🚀 Со звёздочкой: Добавь thead и tbody, а столбец «№» объедини через rowspan для сдвоенного урока.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

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

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Сделай таблицу своих кружков и секций на неделю.