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

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

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

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

В этом коде мы создали простую таблицу с заголовками и двумя строками данных. Теперь давайте сделаем ее адаптивной.

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

Для того чтобы таблица была адаптивной, мы будем использовать CSS медиа-запросы. Начнем с базовых стилей:

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

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

th {
    background-color: #f2f2f2;
}

Эти стили задают ширину таблицы в 100% и обеспечивают простую стилизацию ячеек.

Теперь добавим медиа-запросы, чтобы таблица выглядела хорошо на мобильных устройствах:

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

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

Шаг 3: Добавление данных в таблицу

Теперь, чтобы использовать адаптивную таблицу, мы добавим атрибуты data-label к ячейкам <td> в HTML:

<tr>
    <td data-label="Название">Иван</td>
    <td data-label="Возраст">30</td>
    <td data-label="Город">Москва</td>
</tr>
<tr>
    <td data-label="Название">Анна</td>
    <td data-label="Возраст">25</td>
    <td data-label="Город">Санкт-Петербург</td>
</tr>

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

Шаг 4: Тестирование адаптивности

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

Заключение

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

Надеемся, что эта статья была для вас полезной и поможет вам в разработке адаптивных таблиц!