Строка таблицы HTML tr - полное руководство для верстальщиков и разработчиков

Введение

Элемент tr в HTML отвечает за строку таблицы. Через него вы описываете, какие ячейки будут находиться в одной горизонтальной линии, как они будут сгруппированы и как таблица в целом будет выглядеть и работать.

Смотрите, я сразу покажу вам базовый пример, чтобы стало понятнее, о чем пойдет речь:

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

// Здесь каждая пара открывающего и закрывающего тегов tr формирует строку // Внутри tr находятся ячейки таблицы td

Дальше мы разберем, в каких местах документа может находиться tr, какие элементы он может содержать, как работать с объединением ячеек, как управлять стилями строк и как обращаться к ним с помощью JavaScript.

Базовый синтаксис и место tr в структуре таблицы

Минимальный пример разметки таблицы с tr

Давайте разберемся на простом примере:

<table>
  <tr>
    <td>Имя</td>
    <td>Возраст</td>
  </tr>
  <tr>
    <td>Алексей</td>
    <td>29</td>
  </tr>
</table>

// В первой строке таблицы мы описываем заголовки или данные // Во второй строке описываем следующую строку с данными

Ключевой момент здесь в том, что tr сам по себе не отображает содержимое. Его задача — быть контейнером для ячеек таблицы, таких как th и td.

Какие элементы может содержать tr

В современных HTML-спецификациях tr должен содержать следующие элементы:

• th — ячейка-заголовок
• td — обычная ячейка таблицы

Внутри tr вы не можете напрямую размещать текст, дивы или другие элементы без обертки в ячейку. Если так сделать, браузер все равно попытается «починить» разметку и автоматически создаст недостающие td или th, но лучше на это не рассчитывать.

Пример корректного кода:

<tr>
  <th>Имя</th>
  <th>Возраст</th>
</tr>
<tr>
  <td>Екатерина</td>
  <td>34</td>
</tr>

// В первой строке используются заголовочные ячейки th // Во второй строке обычные ячейки td с данными

В каких контейнерах допустим tr

Элемент tr может находиться только внутри определенных «табличных» контейнеров:

• thead — секция заголовка таблицы
• tbody — основная секция с данными
• tfoot — секция с итогами таблицы
• table — напрямую, если секции не указаны (браузер сам создаст tbody)

Смотрите, здесь я размещаю пример различных секций:

<table>
  <thead>
    <tr>
      <th>Товар</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Кофе</td>
      <td>300</td>
    </tr>
    <tr>
      <td>Чай</td>
      <td>250</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Итого</td>
      <td>550</td>
    </tr>
  </tfoot>
</table>

// tr внутри thead - строки заголовков // tr внутри tbody - строки с данными // tr внутри tfoot - строка с итогами

Если вы напишете tr сразу внутри table, браузер автоматически создаст блок tbody, а ваш tr поместит туда. Этот момент часто не виден визуально, но важен, когда вы работаете с JavaScript и DOM.

Отличия строк заголовков и строк с данными

Использование th и td внутри tr

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

• tr с th обычно относится к заголовкам столбцов или строк.
• tr с td — к обычным данным.

Давайте посмотрим пример, где в первой строке таблицы используются заголовки:

<table>
  <tr>
    <th>Имя</th>
    <th>Роль</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Разработчик</td>
  </tr>
  <tr>
    <td>Марина</td>
    <td>Дизайнер</td>
  </tr>
</table>

// Первая строка - заголовочная, благодаря th // Остальные строки - обычные данные

Семантически вы можете помещать th и в другие строки, например для заголовков строк слева:

<tr>
  <th>Понедельник</th>
  <td>10 задач</td>
  <td>2 встречи</td>
</tr>

// Здесь th описывает заголовок строки, а не столбца

Атрибуты tr и их использование

Глобальные атрибуты

Элемент tr поддерживает все глобальные атрибуты HTML, в том числе:

• id — уникальный идентификатор строки
• class — классы для оформления и работы с JavaScript
• style — встроенные стили
• data-* — пользовательские атрибуты данных

Пример:

<tr id="user-1" class="user-row selected" data-status="active">
  <td>Ольга</td>
  <td>Администратор</td>
</tr>

// id помогает однозначно ссылаться на строку // class используется для CSS и выбора элементов в скриптах // data-status хранит дополнительную информацию о строке

Устаревшие атрибуты и почему их лучше не использовать

Раньше tr поддерживал атрибуты вроде:

• bgcolor — цвет фона строки
• align — выравнивание содержимого
• valign — вертикальное выравнивание

Сейчас эти атрибуты считаются устаревшими и не рекомендуются к использованию. Все оформление лучше переносить в CSS.

Сравните два варианта:

<!-- Устаревший способ -->
<tr bgcolor="#f0f0f0">
  <td>Товар</td>
  <td>Цена</td>
</tr>

<!-- Рекомендуемый способ -->
<tr class="row-gray">
  <td>Товар</td>
  <td>Цена</td>
</tr>

/* Оформление задаем через CSS */
.row-gray {
  background-color: #f0f0f0; /* Цвет фона для строки */
}

// Во втором варианте оформление отделено от структуры // Строку можно легко переиспользовать и переоформлять

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

Семантика tr в таблицах с данными

tr задуман для представления табличных данных:

• строки отчетов
• таблицы тарифов
• прайс-листы
• расписания

Семантическая таблица с данными помогает:

• вспомогательным технологиям (читателям с экрана)
• поисковым системам
• поддержке кода в будущем

Пример семантической таблицы:

<table>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Доход</th>
      <th>Расход</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>100000</td>
      <td>70000</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>120000</td>
      <td>80000</td>
    </tr>
  </tbody>
</table>

// Каждая строка tr представляет собой одну запись - месяц с показателями

Почему не стоит использовать tr для верстки макета страницы

Раньше таблицы часто применяли для верстки всего макета сайта. Сейчас это считается антипаттерном. Для макета лучше использовать блочные элементы div, flex, grid и другие современные механизмы.

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

Стилизация строк таблицы с помощью CSS

Базовая стилизация tr

Покажу вам, как это реализовано на практике: мы присваиваем строкам классы и настраиваем оформление.

<table class="user-table">
  <tr class="header-row">
    <th>Имя</th>
    <th>Роль</th>
  </tr>
  <tr class="odd-row">
    <td>Илья</td>
    <td>Маркетолог</td>
  </tr>
  <tr class="even-row">
    <td>Наталья</td>
    <td>HR</td>
  </tr>
</table>

.user-table {
  border-collapse: collapse;   /* Убираем промежутки между ячейками */
  width: 100%;                 /* Таблица занимает всю ширину */
}

.user-table td,
.user-table th {
  border: 1px solid #ccc;      /* Граница вокруг каждой ячейки */
  padding: 8px;                /* Внутренние отступы в ячейках */
}

.header-row {
  background-color: #f5f5f5;   /* Фон строки заголовка */
  font-weight: bold;           /* Полужирный текст */
}

.odd-row {
  background-color: #ffffff;   /* Фон нечетных строк */
}

.even-row {
  background-color: #f9f9f9;   /* Фон четных строк */
}

// Класс header-row применяется к первой строке для ее выделения // Классы odd-row и even-row задают чередующийся фон строк

Чередование цветов строк с помощью nth-child

Назначать классы для каждой строки неудобно. Гораздо проще использовать селекторы nth-child.

Давайте посмотрим, как это выглядит в коде:

<table class="striped-table">
  <tr>
    <th>№</th>
    <th>Имя</th>
    <th>Статус</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Антон</td>
    <td>Активен</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Мария</td>
    <td>Неактивен</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Дмитрий</td>
    <td>Активен</td>
  </tr>
</table>

.striped-table {
  border-collapse: collapse;          /* Схлопываем границы */
  width: 100%;
}

.striped-table th,
.striped-table td {
  border: 1px solid #ddd;
  padding: 6px 8px;
}

/* Чередуем фон строк, кроме первой строки с заголовком */
.striped-table tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.striped-table tr:nth-child(even) {
  background-color: #ffffff;
}

/* Выделяем первую строку отдельно */
.striped-table tr:first-child {
  background-color: #e0e0e0;
  font-weight: bold;
}

// nth-child(odd) применяет стиль к нечетным строкам // nth-child(even) - к четным // first-child переопределяет стили для первой строки

Если у вас есть thead и tbody, стоит уточнить селектор, чтобы не смешивать заголовок и строки с данными:

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

.striped-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

// Здесь четность строк считается только внутри tbody // Заголовок в thead остается без влияния этих правил

Стилизация строки при наведении курсора

Частая задача — подсветить строку при наведении:

.striped-table tbody tr:hover {
  background-color: #dfefff;   /* Подсвечиваем строку при ховере */
  cursor: pointer;             /* Показываем, что по строке можно кликнуть */
}

// :hover применяется к строке, на которую наведен курсор // Это удобно для таблиц с кликабельными строками

Объединение ячеек и влияние на строки tr

Как работает rowspan и colspan

Атрибуты rowspan и colspan задаются на ячейках td или th, но напрямую влияют на структуру строки tr.

• colspan — объединяет несколько ячеек по горизонтали (в пределах одной строки)
• rowspan — объединяет ячейки по вертикали (через несколько строк)

Смотрите, я покажу вам, как это работает.

Горизонтальное объединение (colspan)

<table>
  <tr>
    <th>Имя</th>
    <th>Роль</th>
    <th>Статус</th>
  </tr>
  <tr>
    <td colspan="2">Общий заголовок</td> <!-- Объединяем две ячейки -->
    <td>Активен</td>
  </tr>
</table>

// Во второй строке первая ячейка расширяется на два столбца // Итого во второй строке все равно три логических столбца

Вертикальное объединение (rowspan)

<table>
  <tr>
    <th>Имя</th>
    <th>Статус</th>
  </tr>
  <tr>
    <td rowspan="2">Анна</td>        <!-- Одна ячейка на две строки -->
    <td>Активна</td>
  </tr>
  <tr>
    <!-- Здесь уже не нужно еще одно td для имени -->
    <td>Заблокирована</td>
  </tr>
</table>

// Ячейка с именем Анна занимает сразу две строки // Во второй и третьей строке шаблон ячеек отличается

Почему объединение ячеек усложняет работу с tr

Когда вы активно используете rowspan и colspan, каждая строка tr перестает быть «простым набором колонок». Вам приходится учитывать:

• Что количество td и th в строках может отличаться
• Что визуальная «ячейка» может физически находиться в другом tr
• Что расчет индексов столбцов становится сложнее

Это особенно важно, если вы:

• Изменяете таблицу через JavaScript
• Пытаетесь привязать к определенному столбцу обработчики
• Динамически добавляете строки

По возможности старайтесь не злоупотреблять rowspan и colspan, если таблицу предстоит часто изменять скриптами.

Работа с tr через JavaScript

Получение строк таблицы

Давайте разберемся, как выбрать строки в JavaScript.

Предположим, у вас есть такая таблица:

<table id="users">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Роль</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Кирилл</td>
      <td>Редактор</td>
    </tr>
    <tr>
      <td>Алена</td>
      <td>Автор</td>
    </tr>
  </tbody>
</table>

Теперь посмотрим, как получить строки:

// Получаем саму таблицу по id
const table = document.getElementById('users');

// Получаем все строки таблицы (включая заголовок)
const allRows = table.getElementsByTagName('tr');

// Получаем только строки с данными (из tbody)
const bodyRows = table.tBodies[0].rows;

// Перебираем строки и выводим текст первой ячейки
for (let i = 0; i < bodyRows.length; i++) {
  const row = bodyRows[i];           // Текущая строка
  const firstCell = row.cells[0];    // Первая ячейка строки
  console.log(firstCell.textContent);
}

// table.tBodies[0].rows возвращает HTMLCollection всех tr в первом tbody // row.cells - коллекция ячеек td и th в строке

Добавление новой строки в таблицу

Теперь вы увидите, как это выглядит в коде при добавлении строк.

// Находим таблицу
const table = document.getElementById('users');

// Находим tbody - туда будем добавлять новые строки
const tbody = table.tBodies[0];

// Создаем новую строку
const newRow = document.createElement('tr');

// Создаем ячейки
const nameCell = document.createElement('td');
const roleCell = document.createElement('td');

// Заполняем текстом
nameCell.textContent = 'Сергей';
roleCell.textContent = 'Модератор';

// Вставляем ячейки в строку
newRow.appendChild(nameCell);
newRow.appendChild(roleCell);

// Вставляем строку в tbody
tbody.appendChild(newRow);

// createElement('tr') создает новый элемент строки // appendChild добавляет ячейки в строку и строку в tbody

Реагирование на клики по строкам

Очень распространенный сценарий — сделать так, чтобы по клику на строку выделялась эта строка и, возможно, где-то показывались подробности.

Давайте посмотрим пример:

<table id="users-clickable">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Роль</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td>Андрей</td>
      <td>Редактор</td>
    </tr>
    <tr data-id="2">
      <td>Светлана</td>
      <td>Автор</td>
    </tr>
  </tbody>
</table>

/* Класс для выделенной строки */
.selected-row {
  background-color: #cce5ff;      /* Голубой фон */
}

const table = document.getElementById('users-clickable');
const tbody = table.tBodies[0];

// Добавляем один обработчик на tbody - используется делегирование
tbody.addEventListener('click', function (event) {
  // Находим строку, на которую кликнули
  const row = event.target.closest('tr'); // Ищем ближайший tr

  // Если клик не по строке, ничего не делаем
  if (!row) return;

  // Убираем выделение со всех строк
  const rows = tbody.rows;
  for (let i = 0; i < rows.length; i++) {
    rows[i].classList.remove('selected-row');
  }

  // Добавляем класс выделения на текущую строку
  row.classList.add('selected-row');

  // Читаем пользовательский атрибут data-id
  const id = row.dataset.id;
  console.log('Вы выбрали пользователя с id', id);
});

// closest('tr') поднимается по дереву DOM, пока не найдет tr // classList.add и remove управляют классами строки // dataset.id читает значение атрибута data-id

Доступность (accessibility) и роль tr

Семантика таблицы и tr

Когда вы правильно используете tr вместе с th и td, браузеры и экранные читалки могут корректно интерпретировать структуру таблицы. Каждый tr воспринимается как строка с ячейками, а th — как заголовки.

Для улучшения доступности важно:

• выстраивать заголовки таблицы через th
• при сложных таблицах связывать заголовки и ячейки атрибутами scope или headers
• не разрывать логические строки ненужными пустыми tr

Простой пример с заголовками:

<table>
  <thead>
    <tr>
      <th scope="col">Имя</th>
      <th scope="col">Возраст</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Игорь</td>
      <td>27</td>
    </tr>
  </tbody>
</table>

// scope="col" подсказывает, что заголовок относится к столбцу // Это помогает вспомогательным технологиям

Избегайте пустых tr для отступов

Иногда можно встретить такое:

<tr><td colspan="3">&nbsp;</td></tr>

// Эту строку добавляют только ради отступа

Лучше в таких случаях использовать CSS отступы и margin у соседних элементов, а не создавать «мусорные» строки, которые не несут данных и мешают логике таблицы.

Практические примеры использования tr

Пример 1. Таблица с группировкой данных по разделам

Представим таблицу заказов, сгруппированных по дате. Мы можем использовать отдельные строки для заголовков групп.

<table class="orders-table">
  <thead>
    <tr>
      <th>Дата</th>
      <th>Заказ</th>
      <th>Сумма</th>
    </tr>
  </thead>
  <tbody>
    <!-- Заголовок группы -->
    <tr class="group-row">
      <td colspan="3">10 января 2025</td>
    </tr>
    <tr>
      <td>10.01.2025</td>
      <td>Заказ 101</td>
      <td>3500</td>
    </tr>
    <tr>
      <td>10.01.2025</td>
      <td>Заказ 102</td>
      <td>4200</td>
    </tr>

    <!-- Следующая группа -->
    <tr class="group-row">
      <td colspan="3">11 января 2025</td>
    </tr>
    <tr>
      <td>11.01.2025</td>
      <td>Заказ 103</td>
      <td>1500</td>
    </tr>
  </tbody>
</table>

.orders-table {
  border-collapse: collapse;
  width: 100%;
}

.orders-table th,
.orders-table td {
  border: 1px solid #ddd;
  padding: 6px 8px;
}

.group-row {
  background-color: #f0f0f0;   /* Отделяем группы визуально */
  font-weight: bold;
  text-align: left;
}

// group-row используется для строк-заголовков групп // colspan="3" объединяет ячейки на всю ширину таблицы

Здесь строки с классом group-row не несут «обычных» данных, а выступают в роли разделителей внутри tbody.

Пример 2. Таблица с кликабельными строками и подробностями

Допустим, вам нужно, чтобы по клику на строку ниже раскрывались подробности о записи.

<table id="products-table" class="products-table">
  <thead>
    <tr>
      <th>Товар</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr class="product-row" data-id="p1">
      <td>Ноутбук</td>
      <td>60000</td>
    </tr>
    <tr class="details-row" data-for="p1">
      <td colspan="2">
        <!-- Дополнительная информация -->
        Оперативная память 16 ГБ, SSD 512 ГБ
      </td>
    </tr>

    <tr class="product-row" data-id="p2">
      <td>Монитор</td>
      <td>15000</td>
    </tr>
    <tr class="details-row" data-for="p2">
      <td colspan="2">
        IPS, 27 дюймов, 144 Гц
      </td>
    </tr>
  </tbody>
</table>

.products-table {
  border-collapse: collapse;
  width: 100%;
}

.products-table th,
.products-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.product-row {
  cursor: pointer;                 /* Показываем, что строка кликабельна */
}

.details-row {
  display: none;                   /* Изначально скрываем строки с деталями */
  background-color: #fafafa;
}

const productsTable = document.getElementById('products-table');
const tbody = productsTable.tBodies[0];

tbody.addEventListener('click', function (event) {
  const row = event.target.closest('.product-row'); // Ищем строку товара
  if (!row) return;

  const productId = row.dataset.id; // Читаем data-id товара

  // Находим соответствующую строку с деталями
  const detailsRow = tbody.querySelector(`.details-row[data-for="${productId}"]`);

  if (!detailsRow) return;

  // Переключаем видимость строки с деталями
  if (detailsRow.style.display === 'table-row') {
    detailsRow.style.display = 'none';
  } else {
    detailsRow.style.display = 'table-row';
  }
});

// product-row - основная строка с данными по товару // details-row - дополнительная строка с подробностями // Связь между ними через data-id и data-for

Обратите внимание, как здесь строки tr работают в паре, формируя логическую группу: строка-элемент и строка-подробности.

Частые ошибки при использовании tr

Разнородные элементы внутри tr

Иногда внутри строки пытаются разместить что-то вроде:

<tr>
  <td>Имя</td>
  <div>Некая информация</div> <!-- Неправильно -->
</tr>

// Такой код нарушает структуру таблицы

Браузер скорее всего преобразует этот div, но правильнее поместить его внутрь td:

<tr>
  <td>Имя</td>
  <td>
    <div>Некая информация</div>
  </td>
</tr>

// Теперь структура корректная - в tr только ячейки td и th

Неверное количество ячеек в строках

Частая проблема — неодинаковое количество ячеек в строках, если вы не используете colspan. Например:

<tr>
  <td>Имя</td>
  <td>Возраст</td>
</tr>
<tr>
  <td>Андрей</td>
  <!-- Вторая ячейка пропущена -->
</tr>

// Визуально таблица может выглядеть «смещенной»

Лучше делать структуру однородной:

<tr>
  <td>Андрей</td>
  <td></td> <!-- Пустая ячейка, если данных нет -->
</tr>

// Так таблица останется ровной, а данные - предсказуемыми по индексам столбцов

Заключение

Элемент tr — это основа структуры любой HTML-таблицы. Он отвечает за строки, в которых вы размещаете заголовки и данные. Сам по себе tr не отображает контент, но он определяет, как таблица будет разбита на горизонтальные блоки и как будут располагаться ячейки.

При работе с tr важно:

• помещать его только внутрь таблицы и ее секций (thead, tbody, tfoot)
• использовать внутри только th и td
• оформлять строки через CSS, а не через устаревшие атрибуты
• аккуратно обращаться с rowspan и colspan
• использовать JavaScript для динамического управления строками

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

Частозадаваемые технические вопросы по теме и ответы

Как программно удалить строку tr из таблицы

Чтобы удалить строку, найдите ее элемент и вызовите remove или удалите через родителя:

const row = document.querySelector('#users tbody tr'); // Первая строка
row.remove(); // Удаляем строку из DOM

// remove полностью убирает элемент из документа

Как получить индекс строки tr внутри tbody

Используйте свойство rowIndex или sectionRowIndex:

const row = document.querySelector('#users tbody tr.selected');

// Индекс в пределах всей таблицы
const indexInTable = row.rowIndex;

// Индекс только в пределах своего секционного блока (tbody)
const indexInSection = row.sectionRowIndex;

// sectionRowIndex чаще удобнее, когда у таблицы есть thead

Как задать высоту строки tr

Высоту строки лучше задавать через ячейки:

.my-table td,
.my-table th {
  padding: 4px 8px;
  height: 40px;      /* Минимальная высота ячейки и строки */
}

// Если нужно, дополнительно можно использовать line-height для управления высотой текста

Как сделать фиксированную шапку таблицы при прокрутке

Шапка фиксируется через position sticky на ячейках заголовка:

table thead th {
  position: sticky;   /* Приклеиваем заголовки */
  top: 0;             /* Позиция относительно верхней границы контейнера */
  background: white;  /* Фон, чтобы не просвечивались строки */
  z-index: 2;         /* Чтобы заголовки были выше строк */
}

// Важно, чтобы таблица или контейнер имели ограниченную высоту и overflow auto

Как спрятать строку tr так, чтобы она не занимала место

Используйте display none на строке:

.hidden-row {
  display: none;   /* Строка полностью скрыта и не занимает место */
}

<tr class="hidden-row">
  <td>Скрытая строка</td>
  <td>Данные</td>
</tr>

// В JavaScript класс можно добавлять и убирать динамически через classList