Table doesn't align vertically - php

Question

So I want to do something very simple, which I can't figure out properly. I'm currently making a forum and where I normally have errors (the back end) it all works now, probably through the black magic I used ;D,
So now, the thing is: I want to show all my subcategories, so I'm using the following table:
<div id="content_big">
<div class="content_top_oranje">
<p class="koptekst">
<?php echo 'Name';?>
</p>
<p style="float:left; margin-left:70%; margin-top:-30px; color:#fff; font-size:11px;font-family:Ubuntu;">
<?php echo 'Description';?>
</p>
</div>
<div class="content_mid">
<?php $kop='algemeen' ;
$query=$ db->conn->prepare("SELECT * FROM ht_forum_categorien WHERE kop = ?");
$query->bind_param('s', $kop);
$query->execute();
$result = $query->get_result();
while ($row = $result->fetch_assoc()) { ?>
<table style="width:100%;" border="1" cellspacing="0">
<tr>
<td>
<?php echo $row[ 'name']; ?>
</td>
<td style="margin-left:50px;">
<?php echo $row[ 'description]; ?>
</td>
</tr>
</table>
<?php
}
?>
</div>
</div>
But when I use that, this is the output I get:
How is it possible that all of the rows won't vertically align? And how to solve it?
Thanks. (I'm sorry the screenshot is in dutch, but I can't change the values in the DB, since it isn't mine

Answer 1

You have two fairly big problems in your code:
most importantly, and the problem you ran into: you're not generating a table. You're generating lots of tables. If you want one table, move your <table> and </table> tags outside of your loop and only generate <tr> with their content in your while loop.
a problem you didn't realise you had: the HTML you're using isn't faithful to the promise that your markup is semantic: that heading should be a heading element (h1, h2, h3, what have you), and as a table, really this shouldn't be divs and p and table at all, this should be a single table, with a heading row, styled as your heading, and then data rows.
So let's rewrite this to something that makes sense both from a PHP and from an HTML perspective:
<?php
...query your data. Do this first...
$result = ...;
if($result isn't empty) {
?>
<table>
<?php
echo "<thead><th>$kop</th><th>$description</th></thead>";
?>
<tbody>
<?php
while ($row = $result->fetch_assoc()) {
$name = $row['name'];
$desc = $row['description'];
echo "<tr><td>$name</td><td>$desc</td></tr>\n";
}
?>
</tbody>
</table>
<?php } ?>
So don't do the querying inside the table, do it first, then if there are results to show, decide whether or not to write the single table, generating the dynamic content in the tbody as table rows. And use CSS to style the thead cells the way you need.
For that matter, don't use all those inline style="..." bits. They're all identical, so you're just needlessly repeating static CSS. Use class="rowclass" or whatever name you think is appropriate, and then in your stylesheet or <style> block, define
.rowclass {
background-color: ...;
color: ...;
...
}

Answer 2

Try this
<div id="content_big">
<div class="content_top_oranje">
<p class="koptekst">
<?php echo 'Name';?>
</p>
<p style="float:left; margin-left:70%; margin-top:-30px; color:#fff; font-size:11px;font-family:Ubuntu;">
<?php echo 'Description';?>
</p>
</div>
<div class="content_mid">
<?php $kop='algemeen' ;
$query=$ db->conn->prepare("SELECT * FROM ht_forum_categorien WHERE kop = ?");
$query->bind_param('s', $kop);
$query->execute();
$result = $query->get_result();
?>
<table style="width:100%;" border="1" cellspacing="0">
<?php while ($row = $result->fetch_assoc()) { ?>
<tr>
<td>
<?php echo $row[ 'name']; ?>
</td>
<td style="margin-left:50px;">
<?php echo $row[ 'description']; ?>
</td>
</tr>
<?php
}
?>
</table>
</div>
</div>