Таблицы и Данные

С возвращением.

В предыдущем уроке ты научился добавлять изображения и медиа на страницы.

Теперь мы входим в мир таблиц.

Таблицы полезны.

Таблицы мощные.

Но таблицами также часто злоупотребляют, будто кто-то нашёл молоток и решил, что каждая проблема теперь гвоздь.

Поэтому сегодня учимся правильному способу.

Таблицы — для данных.

Не для layout.

Не для выравнивания кнопок.

Не для построения всего сайта так, будто сейчас 1999 год и интернет ещё пахнет dial-up модемом.

Что Ты Изучишь

В этом уроке ты узнаешь:

• для чего нужны HTML-таблицы;
• как использовать table;
• как создавать строки с помощью tr;
• как создавать заголовочные ячейки с помощью th;
• как создавать ячейки данных с помощью td;
• как добавить caption;
• как использовать thead, tbody и tfoot;
• почему таблицы не нужно использовать для layout страницы;
• как делать таблицы понятнее и значимее.

Что Такое Таблица?

Таблица используется для показа структурированных данных.

Например:

• цены;
• расписания;
• статистика;
• сравнительные данные;
• счета;
• списки продуктов;
• планы уроков;
• результаты.

Таблица имеет строки и колонки.

Как spreadsheet.

Но в HTML.

И без страшных формул, которые прячутся в ячейке F37.

Базовая Таблица

Вот простая таблица:

<table>
  <tr>
    <th>Имя</th>
    <th>Роль</th>
  </tr>
  <tr>
    <td>Viktor</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Designer</td>
  </tr>
</table>

Это создаёт таблицу с:

• одной заголовочной строкой;
• двумя строками данных;
• двумя колонками.

Браузер понимает это как структурированные данные.

А не случайный текст, который притворяется организованным.

Элемент table

Вся таблица начинается с:

<table>

И заканчивается на:

</table>

Всё внутри таблицы принадлежит таблице.

Строки.

Заголовки.

Ячейки.

Caption.

Таблица — это контейнер.

Большая коробка.

Чемодан для данных.

Строки Таблицы с tr

Каждая строка создаётся с помощью tr.

Пример:

<tr>
  <td>HTML</td>
  <td>Beginner</td>
</tr>

tr означает table row.

Строка идёт горизонтально.

Так:

HTML | Beginner

Таблица строится строка за строкой.

Не колонка за колонкой.

Сначала это кажется странным.

Потом мозг это принимает.

Когда-нибудь.

Заголовочные Ячейки с th

Заголовочные ячейки используют th.

Пример:

<th>Курс</th>
<th>Уровень</th>

Заголовочные ячейки описывают, что означают данные.

Пример:

<tr>
  <th>Курс</th>
  <th>Уровень</th>
</tr>

Это говорит браузеру:

Эти ячейки являются заголовками для данных в таблице.

Браузеры обычно показывают текст th жирным и по центру.

Но снова: значение важнее стиля.

HTML — это не просто декорация.

HTML — это значение в угловых скобках.

Ячейки Данных с td

Обычные ячейки таблицы используют td.

Пример:

<td>HTML</td>
<td>Beginner</td>

td означает table data.

Строка с данными выглядит так:

<tr>
  <td>HTML</td>
  <td>Beginner</td>
</tr>

Используй td для реальных данных.

Используй th для заголовков.

Не смешивай их случайно, как носки после стирки.

Добавление Caption

Таблица может иметь caption.

Пример:

<table>
  <caption>Уровни Курсов</caption>
  <tr>
    <th>Курс</th>
    <th>Уровень</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
</table>

caption описывает таблицу.

Его нужно ставить сразу после открывающего тега table.

Хороший caption помогает пользователям понять, о чём таблица.

Это очень полезно для доступности.

И также для людей, которые не любят игры в угадайку.

Лучшая Структура Таблицы

Для больших таблиц HTML даёт нам:

• thead;
• tbody;
• tfoot.

Пример:

<table>
  <caption>Месячные Расходы</caption>

  <thead>
    <tr>
      <th>Позиция</th>
      <th>Стоимость</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Hosting</td>
      <td>€10</td>
    </tr>
    <tr>
      <td>Domain</td>
      <td>€12</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Итого</th>
      <td>€22</td>
    </tr>
  </tfoot>
</table>

Эта структура делает таблицу понятнее.

Таблица имеет:

• область заголовка;
• основную область;
• финальную область.

Очень организовано.

Почти подозрительно организовано.

thead

Элемент thead содержит заголовочную секцию таблицы.

Пример:

<thead>
  <tr>
    <th>Продукт</th>
    <th>Цена</th>
  </tr>
</thead>

Здесь обычно размещаются заголовки колонок.

Это помогает браузерам, screen readers и разработчикам понять структуру таблицы.

Также это помогает будущему тебе.

Будущий ты ценит чистый код.

Будущий ты устал.

tbody

Элемент tbody содержит основные данные таблицы.

Пример:

<tbody>
  <tr>
    <td>Laptop</td>
    <td>€800</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>€20</td>
  </tr>
</tbody>

Здесь обычно живёт большинство строк.

Если таблица — это сэндвич, то tbody — начинка.

Полезная часть.

Причина, почему мы здесь.

tfoot

Элемент tfoot содержит финальную информацию.

Пример:

<tfoot>
  <tr>
    <th>Итого</th>
    <td>€820</td>
  </tr>
</tfoot>

Используй его для сумм, итогов или финальной информации таблицы.

Не каждой таблице нужен tfoot.

Используй его, когда это помогает.

Не добавляй теги только потому, что они выглядят профессионально.

Так сайты превращаются в суп.

Создай Страницу для Практики

Создай новый файл:

touch tables.html

Добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика Таблиц</title>
</head>
<body>
  <h1>Практика Таблиц</h1>

  <p>Эта страница показывает простую таблицу с информацией о курсе.</p>

  <table>
    <caption>План Курса</caption>

    <thead>
      <tr>
        <th>Урок</th>
        <th>Тема</th>
        <th>Статус</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>Первые Шаги</td>
        <td>Готово</td>
      </tr>
      <tr>
        <td>2</td>
        <td>HTML-Структура</td>
        <td>Готово</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Текст и Заголовки</td>
        <td>Готово</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Открой её в браузере.

Она будет выглядеть просто.

Это нормально.

HTML создаёт структуру.

CSS сделает её красивой позже.

Пока таблица жива.

Простая, но живая.

Не Используй Таблицы для Layout

Это важно.

Таблицы не нужно использовать для построения layout страницы.

Плохая идея:

<table>
  <tr>
    <td>Sidebar</td>
    <td>Main Content</td>
  </tr>
</table>

Когда-то это было популярно.

Но сегодня для layout мы используем CSS.

Таблицы — для данных.

CSS — для layout.

Не заставляй таблицы переносить мебель.

Они не грузовики для переезда.

Когда Использовать Таблицу

Используй таблицу, когда контент имеет чёткие строки и колонки.

Хорошее использование таблицы:

Продукт | Цена | Количество
Laptop  | €800 | 1
Mouse   | €20  | 2

Плохое использование таблицы:

Header | Main area | Footer

Это layout.

Позже используй CSS.

Здесь будь строгим.

Будущие проекты скажут спасибо.

Доступность Таблиц

Таблицы должны быть понятными для всех.

Используй:

• значимые заголовки;
• caption;
• простую структуру;
• логичную организацию строк и колонок.

Пример:

<table>
  <caption>Недельное Расписание Тренировок</caption>
  <thead>
    <tr>
      <th>День</th>
      <th>Активность</th>
      <th>Время</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Понедельник</td>
      <td>Карате</td>
      <td>19:00</td>
    </tr>
    <tr>
      <td>Среда</td>
      <td>Йога</td>
      <td>18:30</td>
    </tr>
  </tbody>
</table>

Это читаемо.

Это имеет значение.

Это не заставляет браузер тихо плакать.

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

Забыть tr

Неправильно:

<table>
  <td>HTML</td>
  <td>Beginner</td>
</table>

Правильно:

<table>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
</table>

Ячейки должны быть внутри строк.

Строки должны быть внутри таблицы.

Иерархия важна.

HTML — это не куча белья.

Использовать td для Заголовков

Не идеально:

<tr>
  <td>Имя</td>
  <td>Email</td>
</tr>

Лучше:

<tr>
  <th>Имя</th>
  <th>Email</th>
</tr>

Если это заголовок, используй th.

Слишком Много Данных

Гигантскую таблицу может быть трудно читать.

Не создавай таблицу с 40 колонками, а потом не удивляйся, что пользователи страдают.

Если таблица становится слишком большой, подумай о её разделении.

Или о другой организации данных.

Иногда лучшая таблица — это меньшая таблица.

Как пицца.

Меньшие куски легче пережить.

Практика

Создай страницу:

schedule.html

Построй таблицу для недельного расписания.

Она должна содержать:

• один h1;
• один вступительный абзац;
• одну таблицу;
• один caption;
• thead;
• tbody;
• минимум пять строк;
• колонки для дня, активности и времени.

Без CSS.

Без JavaScript.

Только HTML-структура таблицы.

Мини-Задание

Создай файл:

price-list.html

Построй таблицу цен.

Она должна содержать:

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

Примеры услуг:

• landing page;
• portfolio website;
• business website;
• website maintenance.

Держи всё чисто.

Без layout-трюков.

Таблицы — для данных.

Мы внимательно за ними смотрим.

Итог

Сегодня ты узнал, что:

• таблицы нужны для структурированных данных;
• table создаёт таблицу;
• tr создаёт строку таблицы;
• th создаёт заголовочную ячейку;
• td создаёт ячейку данных;
• caption описывает таблицу;
• thead группирует заголовочные строки;
• tbody группирует основные строки данных;
• tfoot группирует финальные строки;
• таблицы не нужно использовать для layout;
• хорошие таблицы понятные, значимые и доступные.

Таблицы полезны, если использовать их правильно.

Но если ты используешь их для layout, где-то frontend developer проливает кофе.

Следующий Урок

В следующем уроке мы изучим формы.

Формы — это момент, когда пользователи наконец отвечают сайту.

Это мощно.

И это также место, куда хаос любит заходить в солнцезащитных очках.