I'm retrieving a set of location names from a MySQL database using PHP and displaying them on a page. It looks like this.
The code I have written displays the results one after the other from top down.
<html>
<head>
</head>
<body>
<?php
require_once("db_handler.php");
$conn = iniCon();
$db = selectDB($conn);
$query = "SELECT DISTINCT Name FROM location_categories";
$result3 = mysql_query($query, $conn);
?>
<div id="choseLoc">
Locations <br/><br/>
<table border="0">
<?php
while($row = mysql_fetch_array($result3))
{
?>
<tr>
<td><? echo $row["Name"]; ?></td>
<td align="center"><input type="checkbox" name="checkbox[]" value="<? echo $row['Loc_Code']; ?>" /></td>
</tr>
<?php
}
?>
</table>
</div>
<br/>
<div id="buttons">
<input type="reset" value="Clear" /> <input type="submit" value="Save" name="savebtn" />
</div>
</body>
</html>
Now if there are many records, displaying it like that would not be very attractive. I want to display the results like this.
How can I display results in this format?
Thank you.
Use this for your inner table
<table border="0">
<?php
$a = 0;
while($row = mysql_fetch_array($result3))
{
if($a++ %4 == 0) echo "<tr>";
?>
<td><? echo $row["Name"]; ?></td>
<td align="center"><input type="checkbox" name="checkbox[]" value="<? echo $row['Loc_Code']; ?>" /></td>
<?php
if($a %4 == 0) echo "</tr>";
}
?>
</table>
You can float each one to the left, as long as #choseLoc is 4 times the width of the inner divs, the floats will lay them out for you.
<div id="choseLoc" style="width:800px;">
Locations<br/><br/>
<?php
while($row = mysql_fetch_array($result3)){
?>
<div style="float:left; width:200px;">
<?php echo $row["Name"]; ?> <input type="checkbox" name="checkbox[]" value="<?php echo $row['Loc_Code']; ?>" />
</div>
<?php
}
?>
</div>