HTML-тег <td>

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

Тег <td> является основным компонентом HTML-таблиц, наряду с <th> (ячейки заголовков) и <tr> .

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

Базовая структура таблицы с ячейками <td> следующая: 

<table>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

Каждый <td> представляет одну ячейку данных в таблице.

Пример простой таблицы с ячейками <td>

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Student Information</h2>
        <table border="1">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Grade</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>14</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>15</td>
                <td>B</td>
            </tr>
        </table>
    </body>
</html>
Пример простой таблицы с ячейками td

Пояснение: Каждая ячейка <td> содержит отдельные фрагменты данных, организованные в строки внутри таблицы.

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

  • colspan: определяет количество столбцов, которые должна охватывать ячейка.
  • rowspan: указывает количество строк, которые должна охватывать ячейка.
  • заголовки: связывают ячейку с одним или несколькими элементами <th> .
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: поддерживает такие атрибуты событий, как onclick , onmouseover и onfocus .

Объединение ячеек с использованием colspan и rowspan

Атрибуты colspan и rowspan позволяют объединять ячейки: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Merged Cells Example</h2>
        <table border="1">
            <tr>
                <th>Name</th>
                <th>Details</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td rowspan="2">Excellent student</td>
            </tr>
            <tr>
                <td>Bob</td>
            </tr>
        </table>
    </body>
</html>
Объединение ячеек с использованием colspan и rowspan

Объяснение: Атрибут rowspan объединяет две строки, а столбец «Подробности» охватывает несколько ячеек по вертикали.

Стилизация ячеек <td> с помощью CSS

Настройте внешний вид ячеек <td> с помощью CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }
            td {
                background-color: #f9f9f9;
            }
            td:hover {
                background-color: #f1f1f1;
            }
        </style>
    </head>
    <body>
        <h2>Styled Table</h2>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>30</td>
            </tr>
        </table>
    </body>
</html>

Результат: ячейки данных имеют светлый фоновый цвет, отступы и эффекты наведения для улучшения читаемости и интерактивности.

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

  • Представление данных: используйте ячейки <td> для представления структурированных данных в строках и столбцах.
  • Динамические таблицы: динамическое заполнение ячеек <td> с помощью JavaScript или данных на стороне сервера.
  • Пользовательские макеты: создайте визуально привлекательные таблицы, объединив ячейки с colspan и rowspan .
  • Адаптивные таблицы: объединяйте элементы CSS и <td> для создания адаптивных макетов таблиц, удобных для мобильных устройств.