6. Таблицы

HTML: Таблицы

Привет, будущий веб-мастер! Яша здесь, и сегодня мы погрузимся в мир таблиц HTML. Таблицы — это мощный инструмент для организации данных, но важно знать, когда и как их использовать правильно.

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

Таблицы в HTML используются для структурированного отображения табличных данных. Представь себе расписание уроков, список товаров с ценами, финансовый отчет или результаты спортивного матча – все это отличные кандидаты для HTML-таблиц.

Запомни: Таблицы не предназначены для создания общего макета страницы! Для этого есть CSS Flexbox и Grid. Используй таблицы только для того, чтобы показать данные, которые логически организованы в строки и столбцы.

Основные элементы таблицы

Давай разберем базовые элементы, из которых строится любая таблица:

• <table>: Это главный контейнер для всей таблицы.
• <tr>: Обозначает строку таблицы (Table Row). Внутри <tr> находятся ячейки.
• <th>: Обозначает заголовок столбца (Table Header). Обычно отображается жирным шрифтом и центрируется браузером по умолчанию.
• <td>: Обозначает ячейку данных (Table Data). Это обычная ячейка таблицы.

<!-- Пример 1: Простая таблица с заголовками и данными -->
<table>
  <!-- Первая строка таблицы, содержит заголовки -->
  <tr>
    <th>Название</th>
    <th>Цена</th>
    <th>Количество</th>
  </tr>
  <!-- Вторая строка таблицы, содержит данные -->
  <tr>
    <td>Яблоко</td>
    <td>50 руб.</td>
    <td>1 кг</td>
  </tr>
  <!-- Третья строка таблицы, содержит данные -->
  <tr>
    <td>Молоко</td>
    <td>90 руб.</td>
    <td>1 л</td>
  </tr>
</table>

Структурирование таблицы для доступности и семантики (HTML5)

Для больших и сложных таблиц HTML5 предлагает элементы, которые улучшают семантику и доступность (помогают скринридерам):

• <caption>: Определяет заголовок таблицы, который отображается над ней. Очень важен для доступности!
• <thead>: Группирует строки, содержащие заголовки столбцов.
• <tbody>: Группирует основные данные таблицы.
• <tfoot>: Группирует строки с итоговыми данными (футер таблицы).

<!-- Пример 2: Таблица с элементами thead, tbody, tfoot и caption -->
<table>
  <caption>Список покупок на неделю</caption>
  <thead>
    <tr>
      <th>Товар</th>
      <th>Количество</th>
      <th>Ед. измерения</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Хлеб</td>
      <td>1</td>
      <td>буханка</td>
    </tr>
    <tr>
      <td>Сыр</td>
      <td>200</td>
      <td>гр</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Итого: 2 позиции</td> <!-- colspan будет объяснен ниже -->
    </tr>
  </tfoot>
</table>

Объединение ячеек: rowspan и colspan

Иногда нужно, чтобы одна ячейка занимала место нескольких. Для этого используются атрибуты rowspan и colspan.

• colspan: Объединяет ячейки по горизонтали (столбцы). Значение атрибута — сколько столбцов должна занимать ячейка.
• rowspan: Объединяет ячейки по вертикали (строки). Значение атрибута — сколько строк должна занимать ячейка.

<!-- Пример 3: Использование colspan -->
<table>
  <caption>Расписание на вторник</caption>
  <tr>
    <th>Время</th>
    <th colspan="2">Занятие</th> <!-- Эта ячейка занимает 2 столбца -->
  </tr>
  <tr>
    <td>9:00</td>
    <td>Математика</td>
    <td>Ауд. 201</td>
  </tr>
  <tr>
    <td>11:00</td>
    <td colspan="2">Обед</td> <!-- Эта ячейка тоже занимает 2 столбца -->
  </tr>
</table>

<!-- Пример 4: Использование rowspan -->
<table>
  <caption>Контактные данные</caption>
  <tr>
    <th>Имя</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td rowspan="2">Яша</td> <!-- Эта ячейка занимает 2 строки -->
    <td>+7 (999) 123-45-67</td>
  </tr>
  <tr>
    <!-- Для второй строки Яши не нужно указывать td для имени, так как оно уже объединено -->
    <td>+7 (999) 765-43-21</td>
  </tr>
</table>

<!-- Пример 5: Комбинированное использование rowspan и colspan -->
<table>
  <caption>График работы</caption>
  <thead>
    <tr>
      <th rowspan="2">День недели</th>
      <th colspan="2">Часы работы</th>
    </tr>
    <tr>
      <th>Утро</th>
      <th>Вечер</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Понедельник</td>
      <td>9:00 - 13:00</td>
      <td>14:00 - 18:00</td>
    </tr>
    <tr>
      <td>Суббота</td>
      <td colspan="2">10:00 - 16:00 (без перерыва)</td>
    </tr>
  </tbody>
</table>

Типичные ошибки

1. Использование таблиц для разметки страницы: Это устаревшая и плохая практика. Используй таблицы только для табличных данных.
2. Забывать <th>: Всегда используй <th> для заголовков столбцов, это важно для семантики и доступности.
3. Игнорирование <thead>, <tbody>, <tfoot>: Для сложных таблиц эти элементы улучшают структуру и помогают скринридерам.

🎯 Практика

Попробуй создать следующие таблицы:

1. Простая таблица с расписанием фильмов:
   • 3 столбца: “Название фильма”, “Время начала”, “Жанр”.
   • Минимум 3 фильма.
2. Таблица “Мои любимые книги” с полной структурой:
   • Используй <caption>, <thead>, <tbody>.
   • 3 столбца: “Название”, “Автор”, “Год издания”.
   • Добавь <tfoot> с надписью “Итого: X книг”.
3. Таблица результатов экзамена с объединением ячеек:
   • Первая строка <th> объединяет два столбца: “Предмет”.
   • Следующая строка <th> имеет “Оценка” и “Статус”.
   • Один студент сдал два предмета, у него имя должно занимать две строки (rowspan).

💡 Совет

Помни, HTML отвечает за структуру и семантику. То, как таблица выглядит (цвет, рамки, отступы), это уже задача CSS. Сначала сделай таблицу правильно с точки зрения HTML, а потом уже приступай к стилизации!

Интерактивный пример