Membuat hasil query menjadi 2 kolom tanpa menggunakan tabel

Iseng nulis cara membuat dua kolom untuk hasil query sql, tanpa menggunakan tabel , tapi menggunakan div dan ul,li
kunci ada pada formating dan operator modulo , karena saya bukan seorang programer php sejati jadi solusi ini yang saya bisa , mungkin diluar sana ada penyelesaian yang lebih cantik, hasilnya seperti contoh gambar dibawah ini

oke untuk lebih jelasnya ikut kode berikut ini

pertama tama kita buat dulu CSS formatingnya.

<style>
#colOne ul{
float: left;
width: 220px;

margin: 0px; border-bottom:1px dotted #999;border-right:1px dotted #999;
}

#colOne ul li{
list-style:none;
}

#colOne ul li a{
font-size: 11px;
color: #636363;
height: 54px !important;

height: 50px;
margin:0px 0px 0px 0px;
padding:10px 10px 10px 0px;
display:block;
list-style:none;
text-decoration: none;
}

#colOne ul li a:hover{
color:#000000;

background-color:#F8F8F8;
text-decoration:none;
}

#colTwo ul{
float: right;
width: 49%;
margin: 0px;border-bottom:1px dotted #999;
}

#colTwo ul li{

list-style:none;
}

#colTwo ul li a{
font-size: 11px;
color: #636363;
height: 54px !important;
height: 50px;
margin:0px 0px 0px 0px;
padding:10px 10px 10px 0px;

display:block;
list-style:none;text-decoration: none;
}

#colTwo ul li a:hover{
color:#000000;
background-color:#F8F8F8;
text-decoration:none;
}

#colTwo img, #colOne img{

background-color: #ffffff;
border: 1px solid red;
margin: 0px 12px 8px 0px;
float: left;
}
#colTwo h1, #colOne h1{
color:orange;font-size:8pt;font-weight:bold;margin:0;padding:0;
}
#colTwo h6, #colOne h6{

color:#FF3300;font-size:8pt;font-weight:normal;margin:0;padding:0;
}
#colTwo{padding-left:34px;}
</style>

And the php code goes like this

<div style=”width: 560px; font-family: sans-serif;”>
<?php

menggunakan tanda pipa untuk memisahkan antar bagian yang terdiri dari 3 variabel
variable $str sebagai contoh dapat digati berupa keluar dari query sql

$str = ‘Villa Teresa,US$120,Villa Teresa Bali is situated on the beach of Canggu Village|Sienna Villa,US$148,Red Heart Special for beautiful 3 bedroom villas. Located at Seminyak South Bali|COMO Shambhala,US$158,a private estate located amidst the serenity of Bali’s stunning landscape|Villa Teresa,US$120,Villa Teresa Bali is situated on the beach of Canggu Village|Sienna Villa,US$148,Red Heart Special for beautiful 3 bedroom villas. Located at Seminyak South Bali|COMO Shambhala,US$158,a private estate located amidst the serenity of Bali’s stunning landscape’;

$expOne = explode(’|’,$str );
foreach ($expOne as $valOne){
$expTwo=explode(’,’,$valOne);
$title[] = $expTwo[0];
$rate[] = $expTwo[1];
$introtext[] = $expTwo[2];
}

$n = count( $expOne );
$i = 0;
//iteration for total part
for ($i=0; $i < $n; $i++){
?>

And the modulo in action

<div id=”<?php echo $i % 2?’colTwo’:’colOne’; ?>”>

<ul>
<li> <a href=”#”><h1> <php echo $title[$i];> </h1>
<h6>< ? echo $rate[$i];?></h6>
<? echo $introtext[$i];?></a>

</li>
</ul>
</div>
<?}?>
</div>