Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

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

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 1. Введение и HTML Занятие 8

Таблицы

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

Изучаем: table, tr, td, th, caption
Результат: Таблица «Расписание уроков»

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

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

Показать код примера 
<table border="1">
  <caption>Моё расписание</caption>
  <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>
  <tr>
    <td colspan="3">Обед 🍎</td>
  </tr>
</table>
table {
  border-collapse: collapse;
}
th, td {
  padding: 6px 12px;
}

💡 Объяснение

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

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

Раньше таблицами верстали целые сайты (делили страницу на колонки). Сейчас так делать нельзя: для раскладки есть CSS Flexbox и Grid, а таблицы — только для табличных данных.

Из чего состоит таблица

  • <table> — вся таблица целиком.
  • <caption> — название таблицы; пишется сразу после <table>.
  • <tr> (table row) — одна строка.
  • <th> (table header) — ячейка-заголовок столбца или строки. Браузер делает текст жирным и по центру.
  • <td> (table data) — обычная ячейка с данными.

Таблица строится по строкам

Это самое важное: в HTML нет тега для столбца. Мы описываем таблицу строка за строкой, а внутри строки перечисляем ячейки слева направо. Столбцы получаются сами — из ячеек, стоящих друг под другом.

<table>
  <caption>Расписание</caption>
  <tr>
    <th>№</th>
    <th>Понедельник</th>
    <th>Вторник</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Математика</td>
    <td>Русский язык</td>
  </tr>
</table>

Совет: сначала нарисуй таблицу на бумаге, посчитай строки и столбцы. В каждой строке должно быть одинаковое количество ячеек, иначе таблица «поедет».

Рамки

По умолчанию у таблицы нет рамок, и данные сливаются. Быстрый способ — атрибут border="1", но правильнее задавать рамки через CSS:

table { border-collapse: collapse; }
th, td { border: 1px solid #999; padding: 6px 12px; }

border-collapse: collapse склеивает двойные рамки соседних ячеек в одну аккуратную линию.

Объединение ячеек

  • colspan="3" — ячейка растягивается на 3 столбца вправо. Пример: строка «Обед» на всю ширину расписания.
  • rowspan="2" — ячейка растягивается на 2 строки вниз. Пример: сдвоенный урок.

Когда ячейка растянута, в соседних строках или столбцах нужно убрать лишние ячейки — иначе появятся «торчащие» клетки. Проверка: сумма «ширин» ячеек в каждой строке должна быть одинаковой.

Части таблицы: thead, tbody, tfoot

Большие таблицы делят на части: <thead> — строка заголовков, <tbody> — основные данные, <tfoot> — итоги. Внешне почти ничего не меняется, но код понятнее, а при печати длинной таблицы шапка повторяется на каждой странице.

Частые ошибки

  • Ячейки td написаны прямо в table, без строки tr.
  • В строках разное количество ячеек.
  • Объединили ячейки через colspan, но не удалили лишние.
  • Таблицей сделана раскладка страницы, а не данные.

Проверь себя

  1. Почему в HTML нет тега для столбца?
  2. Чем th отличается от td?
  3. Строка «Обед» должна занять 4 столбца. Что написать?

⌨️ Практика

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

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

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

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход