Displaying data from mysql database using html tables

[karlcunanan]

Hello PHP geniuses! I am a beginner in php and would like to seek your expert advices and knowledge. When I display the result to a table, it always loop at the bottom, I want to display the another table at the right side of the first table. When I try to use the float:left, its coming out of the DIV and the white background is disappearing. This is my code:

<?php

    $nationality = $_POST['nationality'];
    $category = $_POST['category'];

    if ($category == 'All' and $nationality == 'All')
    {
    $sql="Select * from $tbl_name where Published = 'Y'";
    }
    elseif ($nationality and $category == 'All')
    {
    $sql = "Select * from $tbl_name where Published = 'Y' and Nationality = '$nationality'";
    }
    elseif ($category and $nationality = 'All')
    {
    $sql="Select * from $tbl_name where Published = 'Y' and Category = '$category'";
    }


    $result=mysql_query($sql);

    while($rows=mysql_fetch_array($result)){

    {
     @$image=$rows['Photo'];
     ?>

     <?php
    }
    ?>


    <table bgcolor="#FFFFFF" style="font-size:13px; float:left; margin-bottom:10px; margin-top:20px" align="center" width="400" height="40%"border="1">
      <tr>
        <td width="150" rowspan="10"><center><a href="image/<?php echo $image;?>"><img src="image/<?php echo $image; ?>" width="150" height="100" border="0"></a></center></td>
        <td width="128">Category:</td>
        <td width="150"><p><?php echo $rows['Category']; ?></p></td>
      </tr>
      <tr>
        <td>Staff Code:</td>
        <td><p><?php echo $rows['id']; ?></p></td>
      </tr>
      <tr>
        <td>Name:</td>
        <td><?php echo $rows['Firstname']; ?></td>
      </tr>
      <tr>
        <td>Nationality</td>
        <td><?php echo $rows['Nationality']; ?></td>
      </tr>
      <tr>
        <td>Weight</td>
        <td><?php echo $rows['Weight']; ?></td>
      </tr>
      <tr>
        <td>Height</td>
        <td><?php echo $rows['Height']; ?></td>
      </tr>
      <tr>
        <td>Age</td>
        <td><?php echo $rows['Age']; ?></td>
      </tr>
      <tr>
        <td>Job Title</td>
        <td><?php echo $rows['Jobtitle']; ?></td>
      </tr>
       <tr>
         <td>Qualifications</td>
        <td><?php echo $rows['Qualifications']; ?></td>
      </tr>
       <tr>
         <td colspan="2"><center>
    <form action="requestform.php" name="request" method="post">
    <input type='submit' name="submit" class="button" value='Request' />
    </form>
    </center></td>
        </tr>
    </table>


    <?php
    }
    ?>

This is the CSS

#content{
    background-color:#FFF;
    width: 955px;
    min-height: 100%;
    margin-left:auto;
    margin-right:auto;
    padding: 10px;
}

[LastMitch]

@karlcunanan

This is more CSS than PHP.

When I try to use the float:left, its coming out of the DIV and the white background is disappearing.

Try to make you TABLE WIDTH longer. Regarding about the DIV where is the DIV? I only see a TABLE. For the CSS

#content

I don't see a DIV that has #content in your code?

[karlcunanan]

@LastMitch

Sorry sir, this is included at the top of my php code

<div id="content">
<center>
<form method="post" action="" name="form">
Choose Nationality:<select id="nationality" class="select" name="nationality">
<option style="border:0px"selected="" value="All">All</option>
<option value="Filipino">Filipino</option>
<option value="Japanese">Japanese</option>
<option value="Egyptian">Egyptian</option>
<option value="sample">sample</option>
</select><br />
Choose Category:<select id="category" class="select" name="category">
<option style="border:0px"selected="" value="All">All</option>
<option value="Accounting/Finance">Accounting/Finance</option>
<option value="Admin/HR">Admin/HR</option>
<option value="Computer/IT">Computer/IT</option>
<option value="Engineering">Engineering</option>
<option value="Sales/Marketing">Sales/Marketing</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Arts/Media/Comm">Arts/Media/Comm</option>
<option value="Building/Construction">Building/Construction</option>
<option value="Services">Services</option>
<option value="Hotel/Restaurant">Hotel/Restaurant</option>
<option value="Sciences">Sciences</option>
<option value="Education/Training">Education/Training</option>
<option value="Healthcare">Healthcare</option>
<option value="Others">Others</option>
</select><br />
<input type='submit' name="submit" class="button" value='Go' />
</form>
</center>

The size of the div is good for 2 tables, so it should be 2 tables in 1 line, but the results is dispalying outside the div

[Clanstrom]

What do you mean it always loop at the bottom, and what is the another table? I am new myself, but i found your question but difficult to get, than the coding

[karlcunanan]

I used while for this to display every data in the database, so there will be a lot of tables as many as the records. What am trying to say is, i want to display the next table to the right side of the first table instead of displaying it under after another.

[LastMitch]

@karlcunanan

The size of the div is good for 2 tables, so it should be 2 tables in 1 line, but the results is dispalying outside the div

On your CSS change from this:

#content{
background-color:#FFF;
width: 955px;
min-height: 100%;
margin-left:auto;
margin-right:auto;
padding: 10px;
}

to this:

#content{
background-color:#FFF;
width: 955px;
min-height: 100%;
padding: 10px;
display:inline-block;
float: left;
}

I think this should work.

[karlcunanan]

@LastMitch

It perfectly works! But only one problem, I want the div to be at the center that's why I set the margins left and right to auto.

[LastMitch]

@karlcunanan

It perfectly works! But only one problem, I want the div to be at the center that's why I set the margins left and right to auto.

Try this:

For CSS:

<style>
    #content{
    background-color:#FFF;
    width: 100%;
    min-height: 100%;
    padding: 10px;
    }
</style>

For your DIV to be CENTER:

<table align="center">
<tr>
<td>
<div align="left">
<div id="content">
    <form method="post" action="" name="form">
    Choose Nationality:<select id="nationality" class="select" name="nationality">
    <option style="border:0px"selected="" value="All">All</option>
    <option value="Filipino">Filipino</option>
    <option value="Japanese">Japanese</option>
    <option value="Egyptian">Egyptian</option>
    <option value="sample">sample</option>
    </select><br />
    Choose Category:<select id="category" class="select" name="category">
    <option style="border:0px"selected="" value="All">All</option>
    <option value="Accounting/Finance">Accounting/Finance</option>
    <option value="Admin/HR">Admin/HR</option>
    <option value="Computer/IT">Computer/IT</option>
    <option value="Engineering">Engineering</option>
    <option value="Sales/Marketing">Sales/Marketing</option>
    <option value="Manufacturing">Manufacturing</option>
    <option value="Arts/Media/Comm">Arts/Media/Comm</option>
    <option value="Building/Construction">Building/Construction</option>
    <option value="Services">Services</option>
    <option value="Hotel/Restaurant">Hotel/Restaurant</option>
    <option value="Sciences">Sciences</option>
    <option value="Education/Training">Education/Training</option>
    <option value="Healthcare">Healthcare</option>
    <option value="Others">Others</option>
    </select><br />
    <input type='submit' name="submit" class="button" value='Go' />
    </form>
</div>
</div>
</tr>
</tr>
</table>

This should solve your issue.

[karlcunanan]

Thank you so much! I just did some minimal modification, but the concept of the div inside the table is the trick. Thanks again! :)

[LastMitch]

@karlcunanan

It's good hear it's solve! Can you click Mark Question Solve on the bottom left corner so the thread is close and solve so noone can add stuff to it. Thanks.