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