HTML-тег <tr>

HTML-тег <tr> используется для определения строки в HTML-таблице. Каждая строка в таблице создаётся с помощью элемента <tr> , который служит контейнером для ячеек таблицы( <td> для данных и <th> для заголовков). Тег <tr> — это фундаментальный строительный блок HTML-таблиц, группирующий ячейки по горизонтали для формирования строк.

Тег <tr> является дочерним элементом элементов <table> , <thead> , <tbody> или <tfoot> .

Базовый синтаксис HTML-тега <tr>

Базовая структура строки таблицы с использованием тега <tr> следующая: 

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Каждый элемент <tr> представляет собой одну строку, содержащую одну или несколько ячеек.

Пример таблицы с несколькими строками

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Student Grades</h2>
        <table border="1">
            <tr>
                <th>Name</th>
                <th>Subject</th>
                <th>Grade</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>Math</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Science</td>
                <td>B</td>
            </tr>
        </table>
    </body>
</html>
Пример таблицы с несколькими строками — несколько тегов tr внутри таблицы

Пояснение: Таблица содержит три строки: одну строку заголовка( <th> ячейки внутри <tr> ) и две строки данных( <td> ячейки внутри <tr> s).

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

Вы можете оформить строки таблицы, чтобы улучшить её внешний вид и удобство использования. Например, чередование цветов строк может улучшить читаемость: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }
            tr:nth-child(even) {
                background-color: #f9f9f9;
            }
            tr:hover {
                background-color: #f1f1f1;
            }
        </style>
    </head>
    <body>
        <h2>Styled Table Rows</h2>
        <table>
            <tr>
                <th>Name</th>
                <th>Subject</th>
                <th>Grade</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>Math</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Science</td>
                <td>B</td>
            </tr>
        </table>
    </body>
</html>

Пояснение: Селектор tr:nth-child(even) применяет светлый цвет фона к четным строкам, а tr:hover подсвечивает строку при наведении на нее курсора.

Атрибуты HTML-тега <tr>

  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: позволяют обработчикам событий, таким как onclick , onmouseover и onmouseout добавлять интерактивность.

Пример использования атрибутов событий с <tr>

Вот пример, где тег <tr> использует атрибуты событий для обеспечения интерактивности: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Interactive Table Rows</h2>
        <table border="1">
            <tr onclick="alert('You clicked on row 1!')">
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
            </tr>
            <tr onclick="alert('You clicked on row 2!')">
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
            </tr>
        </table>
    </body>
</html>
Пример использования атрибутов событий с tr

Пояснение: Щелчок по строке вызывает оповещение с пользовательским сообщением. Эта функция добавляется с помощью атрибута onclick .

Практическое применение тега <tr>

  • Таблицы данных: используйте <tr> для определения строк в табличных данных для отчетов, инвентаризаций и сравнений.
  • Динамические строки: динамически добавляйте или удаляйте строки с помощью JavaScript для создания интерактивных таблиц данных.
  • Стиль: стилизуйте строки независимо друг от друга для улучшения читабельности и удобства использования.
  • Интерактивность: реализуйте интерактивные функции, такие как выбор строк или события, основанные на щелчках.