grid data with span and div

<!doctype html>
<head>
<title>product</title>
<style type="text/css">
span.row {
 width:100%;
 display: table-row;
}
div.paging{
 width:100%;
 text-align:center;
 padding:2px;
}

div.box {
 border:dashed 1px #eee;
 text-align:center;
 width:200px;
 height:50px;
 display: table-cell;
 padding:2px;
}
img {
  width:150px;
  height:40px;
  background-color:#ffc;
}
</style>
<body>
<?php
  $row=2;
  $column=2;
  $batas=$row*$column;
  $p=isset($_GET['p'])?$_GET['p']:0;
  $data=array("satu","dua","tiga","empat","lima","enam","tujuh","delapan","sembilan","sepuluh");
  $i=$batas*$p;
  echo "<span class=\"row\">\n";
  while(isset($data[$i])&&$i<($batas*($p+1))){
    echo ($i%$column==0?"</span>\n<span>\n":"")."<div class=\"box\"><img src=\"\" alt=\"gambar ".$data[$i]."\"><br>".$data[$i]."</div>\n";
    $i++;
  }
  echo "</span>\n";
?>
<span class="row">
  <div class="paging">
  <?php
    echo ($p>0)?"<a href=\"?p=".($p-1)."\">prev</a>":"prev";
    echo " | ";
    echo (($p+1)<count($data)/$batas)?"<a href=\"?p=".($p+1)."\">next</a>":"next";
  ?>
  </div>
</span>
</body>
</html>