Вывод PHP-массива колонками

Несколько примеров как вывести одномерный PHP-массив в виде таблицы, плиток и списком в несколько колонок. Имеем массив городов:

$array = array(
	'Москва', 'Санкт-Петербург', 'Новосибирск', 'Екатеринбург', 'Казань', 
	'Нижний Новгород', 'Челябинск', 'Самара', 'Омск', 'Ростов-на-Дону',
	'Уфа', 'Красноярск', 'Воронеж', 'Пермь', 'Волгоград', 'Краснодар',
	'Саратов', 'Тюмень', 'Тольятти', 'Ижевск', 'Барнаул', 'Ульяновск', 
	'Иркутск', 'Хабаровск', 'Ярославль', 'Владивосток', 'Махачкала', 
	'Томск', 'Оренбург', 'Кемерово', 'Новокузнецк', 'Рязань', 'Набережные Челны', 
	'Астрахань', 'Пенза', 'Киров', 'Липецк', 'Балашиха', 'Чебоксары',
);
PHP

Для вывода массива в таблице его нужно разделить на части, сделать это можно с помощью функции array_chunk(), далее используя циклы сформировать нужную структуру HTML-элементов.

<?php
$array = array_chunk($array, 4);
?>

<table class="city_list">
	<?php foreach ($array as $items): ?>
	<tr>
		<?php foreach ($items as $row): ?>
		<td><?php echo $row; ?></td>
		<?php endforeach; ?>
	</tr>
	<?php endforeach; ?>
</table>

<style>
.city_list {
	width: 100%;
}
.city_list td {
	width: 25%;
	border: 1px solid #ddd;
	padding: 7px 10px;
}
</style>
HTML

Результат:

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

<?php
$cols = ceil(count($array) / 4);
$array = array_chunk($array, $cols);
?>

<table class="city_list">
	<?php for ($i = 0; $i < $cols; $i++): ?>
	<tr>
		<?php foreach($array as $row): ?>
		<td><?php echo @$row[$i]; ?></td>
		<?php endforeach; ?>
	</tr>
	<?php endfor; ?>
</table>

<style>
.city_list {
	width: 100%;
}
.city_list td {
	width: 25%;
	border: 1px solid #ddd;
	padding: 7px 10px;
}
</style>
HTML

Результат:

В качестве сетки для колонок можно использовать таблицу – так можно добавить рамки одной высоты.

<?php
$array = array_chunk($array, ceil(count($array) / 4));
?>

<table class="city_list">
	<tr>
		<?php foreach($array as $items): ?>
		<td>
			<ul>
				<?php foreach($items as $row): ?>
				<li><?php echo $row; ?></li>
				<?php endforeach; ?>
			</ul> 
		</td>  
		<?php endforeach; ?>
	</tr>
</table>

<style>
.city_list {
	width: 100%;
}
.city_list td {
	width: 25%;
	border: 1px solid #ddd;
	padding: 5px;
}
.city_list li {
	padding-left: 30px;
}
.city_list li {
	box-sizing: border-box;
	padding: 5px 0;
}
</style>
HTML

Результат:

Если рамки не нужны, то вполне подойдут стили с float.

$array = array_chunk($array, ceil(count($array) / 4));
?>

<div class="city_list">
	<?php foreach($array as $items): ?>
	<ul>
		<?php foreach($items as $row): ?>
		<li><?php echo $row; ?></li>
		<?php endforeach; ?>
	</ul> 
	<?php endforeach; ?>
</div>

<style>
.city_list {
	overflow: hidden;
}
.city_list ul {
	float: left;
	width: 25%;
	box-sizing: border-box;
}
.city_list li {
	box-sizing: border-box;
	padding: 5px 0;
}
</style>
HTML

Результат:

При таком подходе array_chunk() уже не потребуется, у элементов задается фиксированная ширина (желательно еще указать высоту) и обтекание слева, так они выстроятся слева на право.

<div class="city_list">
	<?php foreach($array as $row): ?>
	<div class="city_list-row"><?php echo $row; ?></div>
	<?php endforeach; ?>
</div>

<style>
.city_list {
	overflow: hidden;
}
.city_list-row {
	float: left;
	box-sizing: border-box;
	width: calc(25% - 2px);
	padding: 7px 10px;
	background: #eee;
	margin: 1px; 
}
</style>
HTML

Результат:

С использованием flex

<div class="city_list">
	<?php foreach($array as $row): ?>
	<div class="city_list-row"><?php echo $row; ?></div>
	<?php endforeach; ?>
</div>

<style>
.city_list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.city_list-row {
	box-sizing: border-box;
	width: calc(25% - 2px);
	padding: 7px 10px;
	background: #eee;
	margin: 1px; 
}
</style>
HTML

Результат:

20.05.2020, обновлено 04.12.2021
10419

Комментарии

, чтобы добавить комментарий.

Другие публикации

Работа с массивами PHP – создание, наполнение, удаление
Основные примеры работы с массивами PHP. Создание, наполнение, извлечение удаление значений.
48032
+6
Сортировка массивов
В продолжении темы работы с массивами поговорим о типичной задаче – их сортировке. Для ее выполнения в PHP существует множество функций, их подробное описание можно посмотреть на php.net, рассмотрим...
41053
+4
Преобразование строк в массив PHP
Примеры преобразования строк текста в массив по разным разделителям.
4846
+3
Список городов РФ
Города РФ на 2019 год - список, массив, SQL.
3738
+5
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
41118
+27
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
34333
+14