Таблицы: теги <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>

Зачем нужны таблицы в HTML? 🤔

Таблицы — это мощный инструмент для структурирования данных на веб-странице. Они идеально подходят для:

• Отображения статистики (цены, рейтинги, расписания)
• Сравнения характеристик товаров
• Организации календарей и расписаний
• Вывода сложных данных с чёткой структурой

Без таблиц многие данные выглядели бы как бессвязный текст. Давай научимся создавать их правильно!

Базовая структура таблицы 🏗️

Всё начинается с трёх основных тегов:

<table> <!-- Обёртка всей таблицы -->
  <tr>   <!-- Table Row (строка таблицы) -->
    <td> <!-- Table Data (ячейка с данными) -->
      Контент
    </td>
  </tr>
</table>

Простой пример с двумя строками:

<table>
  <tr>
    <td>Яблоко</td>
    <td>Зелёное</td>
  </tr>
  <tr>
    <td>Банан</td>
    <td>Жёлтый</td>
  </tr>
</table>

Заголовки таблицы с <th> 👑

Тег <th> (Table Header) создаёт ячейки-заголовки. Браузеры автоматически делают их жирными и выравнивают по центру.

<table>
  <tr>
    <th>Фрукт</th>
    <th>Цвет</th>
  </tr>
  <tr>
    <td>Апельсин</td>
    <td>Оранжевый</td>
  </tr>
</table>

🔍 Важно: <th> можно использовать не только в первой строке, но и в любом месте таблицы!

Семантические секции таблицы 🧩

Для лучшей структуры используй:

• <thead> — шапка таблицы (заголовки)
• <tbody> — основное содержимое
• <tfoot> — итоги или примечания

<table>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Доход</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>$1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Итого</td>
      <td>$1000</td>
    </tr>
  </tfoot>
</table>

🌟 Профи-совет: Браузер может отображать <tfoot> перед <tbody>, но это нормально!

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

Используй атрибуты: - colspan — объединение по горизонтали - rowspan — объединение по вертикали

<table>
  <tr>
    <th rowspan="2">Продукт</th>
    <th colspan="2">Цены</th>
  </tr>
  <tr>
    <th>Розница</th>
    <th>Опт</th>
  </tr>
  <tr>
    <td>Кофе</td>
    <td>$5</td>
    <td>$3</td>
  </tr>
</table>

⚠️ Осторожно: При объединении ячеек следи, чтобы количество ячеек в строках совпадало!

Стилизация таблиц 🎨

Хоть стили — тема CSS, вот базовые атрибуты HTML:

<table border="1"> <!-- Рамка вокруг таблицы -->
  <tr>
    <td width="200" align="right">Ширина 200px</td>
    <td valign="top">Выравнивание по верху</td>
  </tr>
</table>

💡 Современный подход: Лучше использовать CSS для оформления, а HTML — только для структуры.

Когда НЕ использовать таблицы? 🚫

Таблицы — не для верстки всего сайта! Они созданы для: - Табличных данных - Чётко структурированной информации

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

Практическое задание 📝

Создай таблицу расписания занятий:

1. Объедини ячейки для одинаковых предметов
2. Добавь секции <thead>, <tbody>, <tfoot>
3. Сделай заголовки в <th>

Пример структуры:

💻 Проверь результат в браузере — всё ли отображается как задумано?