I am trying to display information in a table format from sql database what am I doing wrong?

Question

Ok I can display data on to the page from the database but I am having a problem displaying it nicely in a table format so its under headers and gos down the page. This is what has happened at the moment:

Here is my page code:

<link rel="stylesheet" href="css/productiontable.css">
<?php
error_reporting(0);
require './db/connect.php';
include './includes/header.php'; 

?>
<h2>Productions</h2>

<div class="productiontable">
    <table>
        <tr>
            <th>Production Name</th>
            <th>Production Description</th>
            <th>Production Type</th>
        </tr>
        <tr>
            <td class="productname">
                <?php 
                    if($result = $connection->query("SELECT * FROM Production")){
                        if($count = $result->num_rows){

                            while($row = $result->fetch_object()){
                                echo $row->ProductionName; 


                ?>
            </td>
            <td class="productinfo">
                <?php 

                                echo $row->ProductionInformation;

                ?>
             </td>
             <td class="producttype">
                <?php 

                                echo $row->ProductionType;

                            }
                ?>
            </td><bR>
         </tr>

    </table>
                <?php
                $result->free();
                        }
                    }
    mysqli_close($connection);


include './includes/footer.php';

Here is the css for the table:

@import url(http://fonts.googleapis.com/css?family=Dosis);

h2{
    text-align: left;
    color: white;
    font-family: 'Dosis';
    margin: 10px;
    font-size: 32px;
}
h3{
    font-size: 18px;
    color: white;
    margin: 20px; 
}
.productiontable{
    width: 900px;
    border: 1px black solid;
    margin: 10px;
}
.productname{
    width: 200px;
    float: left;
    font-weight: bold;
    margin-left: 10px;
 }
.productinfo{
    width: 500px;
    float: left;
    margin-left: 10px;
 }
 .producttype{
    width: 200px;
    float: left;
    font-style: oblique;
    margin-left: 10px;
  }

Please help as much as possible many thanks :)

Answer 1

There are a couple of things wrong: 1. The br tag is not needed. 2. The loop should be outside of the tr. This way a new row will be made for every row.