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

Шаг 1: Основная структура таблицы

Сначала создадим основную структуру таблицы с помощью HTML. Вот пример кода:

<table>
    <thead>
        <tr>
            <th>Имя</th>
            <th>Возраст</th>
            <th>Город</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Иван</td>
            <td>25</td>
            <td>Москва</td>
        </tr>
        <tr>
            <td>Анна</td>
            <td>30</td>
            <td>Санкт-Петербург</td>
        </tr>
    </tbody>
</table>

Этот код создаст таблицу с заголовками для имени, возраста и города.

Шаг 2: Стилизация таблицы с помощью CSS

Теперь давайте добавим немного стилей, чтобы сделать таблицу более привлекательной и адаптивной. Вот пример CSS-кода:

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

thead {
    background-color: #f2f2f2;
}

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

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

tr:hover {
    background-color: #ddd;
}

@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    th {
        display: none;
    }
    tr {
        margin-bottom: 10px;
    }
    td {
        text-align: right;
        position: relative;
        padding-left: 50%;
    }
    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

В этом CSS-коде мы:

  • Установили ширину таблицы на 100% для адаптации к экрану.
  • Добавили стили для заголовков и ячеек таблицы.
  • Определили медиазапрос для изменения структуры таблицы на мобильных устройствах.

Шаг 3: Добавление атрибутов для адаптации

Чтобы сделать таблицу действительно адаптивной, нам нужно добавить атрибуты data-label к ячейкам td. Это позволит нам отображать названия столбцов в мобильной версии. Вот как это будет выглядеть:

<tr>
    <td data-label="Имя">Иван</td>
    <td data-label="Возраст">25</td>
    <td data-label="Город">Москва</td>
</tr>

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

Шаг 4: Полный код

Теперь соберем все вместе. Вот полный код HTML и CSS для нашей адаптивной таблицы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Адаптивная таблица</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        thead {
            background-color: #f2f2f2;
        }

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

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

        tr:hover {
            background-color: #ddd;
        }

        @media (max-width: 600px) {
            table, thead, tbody, th, td, tr {
                display: block;
            }
            th {
                display: none;
            }
            tr {
                margin-bottom: 10px;
            }
            td {
                text-align: right;
                position: relative;
                padding-left: 50%;
            }
            td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 50%;
                padding-left: 10px;
                font-weight: bold;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Имя</th>
                <th>Возраст</th>
                <th>Город</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Имя">Иван</td>
                <td data-label="Возраст">25</td>
                <td data-label="Город">Москва</td>
            </tr>
            <tr>
                <td data-label="Имя">Анна</td>
                <td data-label="Возраст">30</td>
                <td data-label="Город">Санкт-Петербург</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

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

Заключение

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