$ sudo teach IT
Модуль 3 · Структура HTML

Урок 3.2 — Таблицы: table, tr, td, th

Учимся создавать таблицы в HTML: строки, ячейки, заголовки, объединение ячеек. Создаём расписание уроков и прайс-лист.

🔷

Что такое таблицы и зачем они нужны?

Таблицы в HTML отображают данные, у которых есть строки и столбцы: расписание уроков, прайс-лист, результаты матчей, список сотрудников. Раньше таблицами верстали макеты сайтов, но сегодня для этого есть CSS (Flexbox, Grid). Мы используем таблицы строго по назначению — для табличных данных.

Представьте таблицу в Excel: строки (горизонтально) и столбцы (вертикально). На пересечении — ячейка. В HTML строка — <tr> (table row), ячейка — <td> (table data).

🔷

1. table — создаём таблицу

Тег <table> — контейнер всей таблицы. Внутри него строки (<tr>), внутри строк — ячейки (<td>). Без <table> таблицы не существует.

Вот простейшая таблица 2x2:

HTML
<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>
🔷

2. tr — строка таблицы

Тег <tr> (table row) создаёт строку. Сколько <tr> — столько строк. Строки идут сверху вниз: первый <tr> — первая строка, второй — вторая и т.д.

HTML · Три строки
<table border="1">
  <tr>
    <td>Строка 1</td>
    <td>Колонка 2</td>
  </tr>
  <tr>
    <td>Строка 2</td>
    <td>Колонка 2</td>
  </tr>
  <tr>
    <td>Строка 3</td>
    <td>Колонка 2</td>
  </tr>
</table>
💡
Запомните: tr = table row (строка). Один <tr> = одна строка. Атрибут border="1" добавляет видимые границы.
🔷

3. td — ячейка таблицы

Тег <td> (table data) создаёт ячейку. Внутри можно разместить любой HTML: текст, ссылку, картинку, список или даже другую таблицу. Количество <td> в строке определяет количество столбцов.

HTML · Разный контент в ячейках
<table border="1">
  <tr>
    <td>Простой текст</td>
    <td><strong>Жирный текст</strong></td>
    <td><a href="#">Ссылка</a></td>
  </tr>
  <tr>
    <td>42 (число)</td>
    <td><em>Курсив</em></td>
    <td>💰 Эмодзи</td>
  </tr>
</table>
🔷

4. th — ячейка-заголовок

Тег <th> (table header) — ячейка-заголовок. Текст внутри жирный и выровнен по центру. Браузер и поисковики понимают, что это заголовок.

HTML · Таблица с заголовками
<table border="1">
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>25</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>30</td>
    <td>Санкт-Петербург</td>
  </tr>
  <tr>
    <td>Ольга</td>
    <td>27</td>
    <td>Казань</td>
  </tr>
</table>

<th> можно использовать и для заголовков строк. Например, первый столбец — время занятий:

HTML · Заголовки строк
<table border="1">
  <tr>
    <th></th>
    <th>Понедельник</th>
    <th>Вторник</th>
  </tr>
  <tr>
    <th>8:00 - 9:30</th>
    <td>Математика</td>
    <td>Физика</td>
  </tr>
  <tr>
    <th>9:45 - 11:15</th>
    <td>Русский язык</td>
    <td>История</td>
  </tr>
</table>
💡
Разница: <th> — заголовок (жирный, по центру). <td> — обычная ячейка. Используйте <th> для заголовков — это семантически правильно.
🔷

5. colspan — объединяем столбцы

colspan позволяет одной ячейке занимать несколько столбцов. Например, заголовок на всю ширину таблицы. Значение — количество столбцов: colspan="2" на два столбца, colspan="3" на три.

HTML · colspan
<table border="1">
  <tr>
    <th colspan="2">Полное имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Анна</td>
    <td>Смирнова</td>
    <td>25</td>
  </tr>
</table>

Ещё пример — центрированный заголовок на всю ширину:

HTML · Заголовок на 3 столбца
<table border="1">
  <tr>
    <th colspan="3">Мои любимые книги</th>
  </tr>
  <tr>
    <th>Название</th>
    <th>Автор</th>
    <th>Год</th>
  </tr>
  <tr>
    <td>Мастер и Маргарита</td>
    <td>М. Булгаков</td>
    <td>1967</td>
  </tr>
  <tr>
    <td>Преступление и наказание</td>
    <td>Ф. Достоевский</td>
    <td>1866</td>
  </tr>
  <tr>
    <td>Война и мир</td>
    <td>Л. Толстой</td>
    <td>1869</td>
  </tr>
</table>
💡
Cчётчик: colspan="2" считается за два столбца. Мысленно суммируйте colspan всех ячеек в строке — результат должен быть одинаковым для всех строк таблицы.
🔷

6. rowspan — объединяем строки

rowspan объединяет ячейки по вертикали — одна ячейка занимает несколько строк. Полезно для группировки категорий.

HTML · rowspan
<table border="1">
  <tr>
    <th rowspan="2">Фрукты</th>
    <td>Яблоки</td>
    <td>100 руб</td>
  </tr>
  <tr>
    <td>Груши</td>
    <td>120 руб</td>
  </tr>
  <tr>
    <th rowspan="2">Овощи</th>
    <td>Картофель</td>
    <td>40 руб</td>
  </tr>
  <tr>
    <td>Морковь</td>
    <td>50 руб</td>
  </tr>
</table>

Обратите внимание: в строках после rowspan на одну ячейку меньше — первая колонка уже занята. Во второй строке (где "Груши") всего две ячейки, потому что первая ячейка "Фрукты" из первой строки занимает и эту строку тоже.

💡
Внимание: При rowspan в следующих строках становится меньше ячеек — часть столбцов уже занята. Всегда проверяйте общее количество логических столбцов в каждой строке.
🔷

7. Стилизация таблицы через border и inline CSS

Атрибут border у <table> — простой способ добавить границы. Но для красивых таблиц используем атрибут style (inline CSS):

HTML · Стилизованная таблица
<table style="border-collapse: collapse; width: 100%;">
  <tr style="background: #f97316; color: white;">
    <th style="padding: 10px; border: 1px solid #ccc;">Предмет</th>
    <th style="padding: 10px; border: 1px solid #ccc;">Оценка</th>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ccc;">Математика</td>
    <td style="padding: 10px; border: 1px solid #ccc;">5</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ccc;">Физика</td>
    <td style="padding: 10px; border: 1px solid #ccc;">4</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ccc;">История</td>
    <td style="padding: 10px; border: 1px solid #ccc;">5</td>
  </tr>
</table>
  • border-collapse: collapse — убирает двойные границы
  • width: 100% — таблица на всю ширину
  • padding: 10px — отступы внутри ячеек
  • border: 1px solid #ccc — рамка вокруг ячейки
🔷

Практика: расписание уроков

Создадим расписание на неделю, используя всё, что узнали:

HTML · Расписание
<table style="border-collapse: collapse; width: 100%; font-family: Arial;">
  <tr style="background: #ea580c; color: white;">
    <th style="padding: 12px; border: 1px solid #ddd;">Время</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Пн</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Вт</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Ср</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Чт</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Пт</th>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">8:00 - 8:45</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Математика</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Физика</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Русский</td>
    <td style="padding: 10px; border: 1px solid #ddd;">История</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Биология</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">9:00 - 9:45</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Физика</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Химия</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Математика</td>
    <td style="padding: 10px; border: 1px solid #ddd;">География</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Физ-ра</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">10:00 - 10:45</td>
    <td style="padding: 10px; border: 1px solid #ddd;">История</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Литература</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Английский</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Математика</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Информатика</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">11:00 - 11:45</td>
    <td colspan="5" style="padding: 10px; border: 1px solid #ddd; text-align: center; font-style: italic;">Обед</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">12:00 - 12:45</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Литература</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Информатика</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Биология</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Физика</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Химия</td>
  </tr>
</table>

Для "Обеда" используем colspan="5" — он занимает все пять столбцов с предметами. Время сделали жирным через font-weight: bold.

💡
Задание: Измените расписание под свои уроки, добавьте субботу, добавьте "зону комфорта" — каждую вторую строку сделайте с серым фоном (background: #f9f9f9).
🔷

Практика: прайс-лист с rowspan

Создадим прайс-лист с группировкой услуг по категориям:

HTML · Прайс-лист
<table style="border-collapse: collapse; width: 80%; font-family: Arial;">
  <tr style="background: #dc2626; color: white;">
    <th style="padding: 12px; border: 1px solid #ddd;">Услуга</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Описание</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Цена</th>
  </tr>
  <tr>
    <td rowspan="3" style="padding: 10px; border: 1px solid #ddd; font-weight: bold; background: #fff7ed;">Вёрстка</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Сайт-визитка</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">5 000 ₽</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;">Многостраничный</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">15 000 ₽</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;">Интернет-магазин</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">40 000 ₽</td>
  </tr>
  <tr>
    <td rowspan="2" style="padding: 10px; border: 1px solid #ddd; font-weight: bold; background: #fff7ed;">Дизайн</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Макет страницы</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">8 000 ₽</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;">Логотип</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">3 000 ₽</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold; background: #fff7ed;">SEO</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Оптимизация</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">7 000 ₽</td>
  </tr>
</table>

Обратите внимание: цены выровнены вправо (text-align: right) — так принято для чисел. "Вёрстка" занимает 3 строки через rowspan="3", "Дизайн" — 2 строки.

🔷

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

Разное количество столбцов. Если в одной строке 4 ячейки, а в другой 3 (без colspan/rowspan) — таблица "сломается". В каждом ряду должно быть одинаковое число логических столбцов.

Забыли закрыть теги. Незакрытый <tr> или <td> — и таблица отображается непредсказуемо. Проверяйте парность.

Неправильный colspan. Если colspan="5", а в таблице 3 столбца — браузер добавит недостающие. Может выглядеть странно.

Таблицы для вёрстки. Не используйте таблицы для макетов. Для расположения элементов на странице есть CSS Flexbox и Grid.

💡
Золотое правило: Сначала нарисуйте таблицу на бумаге. Определите количество строк, столбцов и места объединений. Потом переносите в код.
🔷

Что мы узнали?

  • <table> — контейнер таблицы
  • <tr> — строка
  • <td> — обычная ячейка
  • <th> — ячейка-заголовок (жирная, по центру)
  • colspan — объединение столбцов (по горизонтали)
  • rowspan — объединение строк (по вертикали)
  • Логическое число столбцов должно быть одинаковым во всех строках

Потренируйтесь: создайте таблицу с расписанием, таблицу успеваемости, прайс-лист. Чем больше практики — тем увереннее навык. В следующем уроке — формы!

Урок 3.2: Таблицы: table, tr, td, th

9 вопросов

Перейти к тестуНа следующий урок