php/html table structure not working as I want it to - php

Question

I'm trying to make a table of which it is pulling information from a database. Its suppose to list the module name and then how many assignments are in it. There are two database tables involved, one simply is an id and modulename, other is id, assignment, topic, content, etc. For some reason my table won't appear correctly, it just continues rather than starting on a new line for that table. here's a picture of what it is doing
enter image description here
here's the code(if more is needed let me know):
<div id="module_1" class="row CourseModule">
<a href="#" onclick="showAssignments(1);">
<div class="col-lg-12 columnPad">
<h1-1 class="lead">List of Modules</h1-1>
</a>
<div class="pullright">
<a id="addAssignmentbutton_1" class="btn btn-primary ThemeButton" href="#" onclick="addAssignment(1);"> Add Assignment</a>
</div>
</div>
</div>
<div id="module_Assignments_1" class="row CanvasPad" style="display:none;">
<table class="CanvasTable">
<thead>
<th>
Module
</th>
<th>
Assignments
</th>
</thead>
<?php
while($row = mysqli_fetch_assoc($result)){
$count = 0;
$query = "SELECT module_id FROM module_records";
$result2 = mysqli_query($con, $query);
if(!$result2){
echo "Can't retrieve data " . mysqli_error($con);
exit;
}
while ($modInassignment = mysqli_fetch_assoc($result2)){
if($modInassignment['module_id'] == $row['module_id']){
$count++;
}
}
?>
<td>
<?php echo $row['module_name']; ?>
</td>
<td>
<span class="badge"><?php echo $count; ?></span>
</td>
<?php } ?>
List all assignments
</table>
</div>
.js
function showAssignments(module_id){
var html_id = "#module_Assignments_" + module_id;
if($(html_id).css("display") == 'block'){
$(html_id).css("display", "none");
} else {
$(html_id).css("display", "block");
}
}

Answer 1

You need a table row tr and then the table data td in it
Also, not required but good for grouping without adding divs/class/id; add all these tr inside a tbody if needed. Read more why it's not required here
<table class="CanvasTable">
<thead>
<th>
Module
</th>
<th>
Assignments
</th>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($result)){
$count = 0;
$query = "SELECT module_id FROM module_records";
$result2 = mysqli_query($con, $query);
if(!$result2){
echo "Can't retrieve data " . mysqli_error($con);
exit;
}
while ($modInassignment = mysqli_fetch_assoc($result2)){
if($modInassignment['module_id'] == $row['module_id']){
$count++;
}
}
?>
<tr>
<td>
<?php echo $row['module_name']; ?>
</td>
<td>
<span class="badge"><?php echo $count; ?></span>
</td>
</tr>
<?php } ?>
</tbody>
List all assignments
</table>
More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr