Карта сайта

Урок 8: Таблицы в HTML

/Уроки по HTML/CSS/Урок 8: Таблицы в HTML
Урок 8: Таблицы в HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

На 8-м уроке мы разберем одну из ключевых тем в HTML, это создание таблиц. Таблицы это мощный инструмент для структурирования данных, расписаний, прайс-листов, статистики и многого другого. Даже если сейчас они кажутся вам сложными, к концу урока вы будете уверенно работать с тегами <table>, <tr>, <td> и <th>.

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

Представьте, что вы хотите отобразить на сайте расписание уроков, цены на товары или результаты спортивных матчей. Без таблиц это превратилось бы в хаотичный набор текста. Таблицы упорядочивают информацию, делая её понятной и визуально привлекательной. И хотя для вёрстки страниц сейчас чаще используют CSS Grid и Flexbox, таблицы остаются незаменимы для работы с данными.

Базовый синтаксис таблиц

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

<table>
  <tr>
    <th>Месяц</th>
    <th>Доход</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>50 000 рублей</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>75 000 рублей</td>
  </tr>
</table>

На странице это отобразится так:

Месяц Доход
Январь 50 000 рублей
Февраль 75 000 рублей

Разбираем теги по порядку

1. <table> — контейнер таблицы

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

2. <tr> — строка таблицы (table row)

Каждая строка создается тегом <tr>. Внутри неё могут находиться ячейки (<td>) или заголовки (<th>). Количество строк определяет «высоту» таблицы.

3. <td> — ячейка (table data)

Это обычная ячейка с данными. Например, в таблице выше «Январь» и «1000$» находятся внутри <td>.

4. <th> — заголовок (table header)

Заголовок используется для обозначения столбцов или строк. Текст внутри <th> выделяется жирным и выравнивается по центру. Это улучшает семантику и помогает скринридерам правильно интерпретировать таблицу.

Атрибуты для работы с таблицами

Хотя стилизацию лучше делать через CSS, некоторые атрибуты всё ещё полезны:

  • colspan — объединение ячеек по горизонтали.
    Пример: <td colspan="2">Объединённая ячейка</td>.
  • rowspan — объединение ячеек по вертикали.
    Пример: <td rowspan="3">Ячейка на 3 строки</td>.

Практические примеры

Пример 1: Таблица расписания

<table>
  <tr>
    <th>Время</th>
    <th>Понедельник</th>
    <th>Среда</th>
  </tr>
  <tr>
    <td>10:00</td>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
  <tr>
    <td>12:00</td>
    <td>JavaScript</td>
    <td>Практика</td>
  </tr>
</table>

Пример 2: Объединение ячеек

<table>
  <tr>
    <th>Имя</th>
    <th colspan="2">Контакты</th>
  </tr>
  <tr>
    <td>Максим</td>
    <td>max@example.com</td>
    <td>+7 900 123-45-67</td>
  </tr>
</table>

Задачи для закрепления

  1. Базовая таблица. Создайте таблицу с 3 столбцами: «Продукт», «Цена», «Количество». Заполните её данными для 2-3 товаров.
  2. Таблица с заголовками. Сделайте таблицу расписания фильмов в кинотеатре. Используйте <th> для названий столбцов: «Фильм», «Время», «Зал».
  3. Объединение ячеек. Постройте таблицу, где одна ячейка объединяет два столбца (например, «Итоговая сумма»), а другая — две строки (например, «Фото товара»).

Советы по работе с таблицами

  • Не используйте таблицы для вёрстки страницы. Это устаревший подход. Таблицы — только для данных!
  • Добавляйте семантические теги вроде <thead>, <tbody> и <tfoot>. Они упрощают стилизацию и улучшают доступность.
  • Экспериментируйте с CSS. Даже простая рамка (border: 1px solid black;) сделает таблицу читаемой.

Чем больше таблиц вы создадите, тем проще будет запомнить синтаксис.

Полный курс «HTML и CSS для начинающих» доступен здесь: https://max-gabov.ru/html-css-dlya-nachinaushih