Таблицы

HTML-таблицы используются для табличных данных (не для верстки макета!). Основные теги: <table> — таблица, <tr> — строка, <td> — ячейка данных, <th> — заголовочная ячейка. <thead>, <tbody>, <tfoot> разделяют секции таблицы.

Структура таблицы:

<table> <thead> <tr> <th>Имя</th> <th>Возраст</th> </tr> </thead> <tbody> <tr> <td>Анна</td> <td>25</td> </tr> </tbody> </table>

Теги:

• <table> — контейнер таблицы
• <tr> — table row (строка)
• <td> — table data (ячейка данных)
• <th> — table header (заголовочная ячейка, жирная по умолчанию)
• <thead> — шапка таблицы
• <tbody> — тело таблицы
• <tfoot> — подвал таблицы

Атрибуты:

• colspan="2" — ячейка занимает 2 колонки
• rowspan="3" — ячейка занимает 3 строки

Важно: таблицы — для ТАБЛИЧНЫХ ДАННЫХ (расписание, сравнение, статистика). НЕ для верстки макета страницы!

Таблица — как календарь. <table> — сам календарь. <tr> — строка (понедельник, вторник...). <td> — ячейка (конкретный день). <th> — заголовок столбца (дни недели).

**Самый простой:**

<table>
  <tr>
    <th>Имя</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Питер</td>
  </tr>
</table>

Базовая таблица с заголовками и данными.

**Простой:**

<table>
  <thead>
    <tr>
      <th>Язык</th>
      <th>Тип</th>
      <th>Год</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Разметки</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Стилей</td>
      <td>1996</td>
    </tr>
  </tbody>
</table>

Таблица с секциями thead и tbody — правильная структура.

**Реальный пример:**

<table>
  <caption>Сравнение форматов изображений</caption>
  <thead>
    <tr>
      <th>Формат</th>
      <th>Прозрачность</th>
      <th>Сжатие</th>
      <th>Использование</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JPEG</td>
      <td>Нет</td>
      <td>С потерей</td>
      <td>Фотографии</td>
    </tr>
    <tr>
      <td>PNG</td>
      <td>Да</td>
      <td>Без потерь</td>
      <td>Логотипы, иконки</td>
    </tr>
    <tr>
      <td>WebP</td>
      <td>Да</td>
      <td>Оба варианта</td>
      <td>Современные сайты</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Для фотографий — JPEG/WebP. Для графики — PNG/WebP.</td>
    </tr>
  </tfoot>
</table>

Полноценная таблица с caption, thead, tbody, tfoot и colspan.

**Неправильно:** Использовать таблицы для верстки макета

**Почему:** Таблицы — для табличных данных. Верстка макета — это CSS (flexbox, grid). Таблицы для макета — наследие 2000-х.

**Правильно:** Для макета используйте div + CSS (flexbox/grid). Таблицы — только для данных в строках и столбцах.

**Неправильно:** Забывать <thead>, <tbody>

**Почему:** Без секций таблица — просто набор строк. Скринридеры и поисковики не понимают структуру.

**Правильно:** Используйте <thead>, <tbody>, <tfoot> для разделения секций таблицы.

**Неправильно:** Не использовать <th> для заголовков

**Почему:** <th> — семантический тег. Он говорит «это заголовок столбца/строки». <td> — просто данные.

**Правильно:** Заголовки столбцов/строк — <th>. Данные — <td>.

• table — только для табличных данных, НЕ для верстки макета
• th — заголовочная ячейка, td — данные
• thead/tbody/tfoot разделяют секции
• colspan/rowspan — объединение ячеек
• caption — подпись таблицы (для скринридеров)

Назад: Вы знаете списки (H9) — таблицы организуют данные в строки и столбцы.

Вперёд: В следующем уроке (H11) вы изучите формы: <form>, <input>, <button> — как пользователи взаимодействуют со страницей.