Skip to content Skip to sidebar Skip to footer

Mysql Data From Database Align Horizontally

Im creating a basic website that will show 10 different tv programmes. I have the 10 different programmes stored in the database. Im able to retriev the 10 programmes but they all

Solution 1:

Try to put them in a table:

<?php$results = $mysqli->query("SELECT * FROM programmes ORDER BY ProgrammeName ASC");
if ($results) { 
     $i=0;
     echo'<table><tr>';
     while($obj = $results->fetch_object())
    {
        echo'<td>';
        echo'<div class="tvProgs">'; 
        echo'<form method="post" id = "books" action="cart_update.php">';
        echo'<div class="progImage"><img src="images/'.$obj->Image.'"></div>';
        echo'<div class="progTitle"><h3>'.$obj->ProgrammeName.'</h3>';
        echo'</form>';
        echo'</div>';
        echo'</td>';
        $i++; 
        if ($i == 5) {
          echo'</tr><tr>';
        }
    }
     echo'</tr></table>';
}
?>

Solution 2:

You can start from:

$i=0;
echo'<br>';
while($obj = $results->fetch_object())
{

    echo'<div class="tvProgs">'; 
    echo'<form method="post" id = "books" action="cart_update.php">';
    echo'<div class="progImage"><img src="images/'.$obj->Image.'"></div>';
    echo'<div class="progTitle"><h3>'.$obj->ProgrammeName.'</h3>';
    echo'</form>';
    echo'</div>';
    if (($i++) == 5) { echo'<br>'; $i=0; }
}

UPDATE CSS

.tvProgs {
    float:left;
    width:200px;
    display:block;
}

Solution 3:

This will put them in a table 5 in each row just like you asked for.

<?php$results = $mysqli->query("SELECT * FROM programmes ORDER BY ProgrammeName ASC");
if ($results) {
    $i = 0;
    echo'<table>';
     while($obj = $results->fetch_object())
    {
        if ($i == 0) {
            echo'<tr>';
        }
        echo'<td>';
        echo'<div class="tvProgs">'; 
        echo'<form method="post" id = "books" action="cart_update.php">';
        echo'<div class="progImage"><img src="images/'.$obj->Image.'"></div>';
        echo'<div class="progTitle"><h3>'.$obj->ProgrammeName.'</h3>';
        echo'</form>';
        echo'</div>';
        echo'</tr>';

        $i++;

        if ($i == 5) {
            echo'</tr>';
            $i = 0;
        }
    }
    if ($i != 0) {
        echo'</tr>';
    }
    echo'</table>';
}
?>

Post a Comment for "Mysql Data From Database Align Horizontally"