В HTML есть два основных способа создания таблиц: с использованием элемента table и с использованием grid layout. В этом ответе я расскажу, как реализовать таблицу с использованием гибкого механизма разметки grid layout.
Для начала нам понадобится контейнер, в котором будет размещаться наша таблица. Создадим для этого элемент div и установим ему класс или идентификатор, чтобы было легче его стилизовать. Например:
<div class="table-container"></div>
Затем добавим стили для нашего контейнера, чтобы использовать grid layout:
.table-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Задаем три колонки равной ширины */
grid-gap: 10px; /* Задаем промежуток между ячейками таблицы */
}
Теперь, чтобы добавить ячейки в таблицу, мы используем элементы div, которые являются дочерними элементами контейнера:
<div class="table-container"> <div class="cell">Ячейка 1</div> <div class="cell">Ячейка 2</div> <div class="cell">Ячейка 3</div> <div class="cell">Ячейка 4</div> <div class="cell">Ячейка 5</div> <div class="cell">Ячейка 6</div> </div>
Добавим стили для ячеек:
.cell {
border: 1px solid black; /* Задаем границу для ячеек */
padding: 10px; /* Задаем отступы внутри ячеек */
}
И вот, наша таблица на основе grid готова! Она состоит из 2 строк и 3 столбцов, но вы можете легко изменить количество строк и столбцов, поменяв значение grid-template-columns и добавив дополнительные div-элементы.
Также, вы можете добавить дополнительные стили для кастомизации таблицы, например, изменить цвет фона ячейки, шрифт текста и размер границы.
Обратите внимание, что grid layout относится к современным технологиям CSS и не работает в старых версиях браузеров. Поэтому убедитесь, что ваши посетители используют современные браузеры, или предусмотрите альтернативный вариант для старых браузеров, используя table или другие методы разметки.