HTML Academy · Урок

table, tr, td и th

Создавайте простые таблицы со строками, ячейками данных и ячейками заголовков

«table, tr, td и th» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Таблицы HTML

Таблицы отображают данные в строках и столбцах. Используйте их для табличных данных, а не для разметки страницы.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Элементы table, tr и td

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

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

th и td

Используйте <th> для ячеек заголовков — они имеют семантическое значение:

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

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

Минимальная, но полностью рабочая таблица:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

Границы таблиц с помощью CSS

По умолчанию браузеры отображают таблицы без границ. Добавьте их с помощью CSS:

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Таблицы не предназначены для разметки

В 1990-х годах таблицы использовали для разметки страниц. Сейчас этот подход устарел и вреден:

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

Адаптивные таблицы

На маленьких экранах таблицы выходят за границы. Оберните их, чтобы включить горизонтальную прокрутку:

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Пустые ячейки

Обрабатывайте пустые ячейки осознанно:

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

Предварительный обзор thead и tbody

В таблицах следует использовать <thead> и <tbody>, чтобы отделять строки заголовков от строк данных. Подробнее об этом рассказывается в следующем уроке:

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

col и colgroup для стилизации столбцов

Применяйте стили ко всему столбцу с помощью <colgroup> и <col>:

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

Чередование строк с помощью CSS

Чередуйте цвета строк для удобства чтения:

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

Проверка знаний

Чем отличаются td и th в таблице?

Повторение: table, tr, td и th

Основы таблиц:

<table> — контейнер таблицы
<tr> — строка таблицы
<td> — ячейка данных
<th> — ячейка заголовка (семантическая, по умолчанию полужирная)
Используйте border-collapse: collapse для аккуратных границ
Таблицы предназначены только для данных, а не для разметки страницы

Часто задаваемые вопросы

Урок «table, tr, td и th» бесплатный?

Да — полный текст урока «table, tr, td и th» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «table, tr, td и th»?

Создавайте простые таблицы со строками, ячейками данных и ячейками заголовков Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «table, tr, td и th»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy