Edit: The above uses the same approach I'm using below, except the above doesn't work since the div has neither an assigned fixed width, nor an assigned % width. Below is a little discussion on the topic.
The centering achieved here is not perfect, but as long as you assign a decently matching width value for your div it will look ok
<div style="margin: auto; width: 400px">
The actual width depends on the data in your tables. If you have one or more table cells with a lot longer text than usual, this approach will fail. You could of course try to achieve a decent match for your width in php code, but I don't believe there's a function to compute the actual width of textual output in php, but if you stick to fixed width fonts, it should be easy to do yourself.
I'm no expert on CSS, so there might be a better way, but I believe you'd have to resort to javascript to adjust the div margin manually to get proper centering.
Perhaps a wrapper table could solve it. And if this is correct, I wouldn't spend time trying to achieve the layout through divs and display: table/table-cell, since browser support for this is spotty at best - just go with a table instead.
But the code below should at least give you a start, and you could always google for "css center block" to get some help on how to center an element with display: block using CSS. The problem here is that the containing element (the div) probably needs to have a fixed or % width for this to work, and you can't assign (the correct) fixed width before you know the table widths.
<style type="text/css">
.floatleft
{
float: left;
}
.clearleft
{
clear: left;
}
table
{
margin: 12px 20px 20px;
border: 1px solid;
}
</style>
</head>
<body style="margin: 30px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed mauris a libero porttitor scelerisque. Integer scelerisque ultrices est. Sed urna purus, suscipit et viverra in, pharetra sit amet velit. Nam blandit hendrerit neque, in varius purus molestie eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas tincidunt nisi, sit amet ornare odio consectetur non. Etiam lacinia massa at nunc commodo at aliquet elit venenatis. Maecenas ultrices ullamcorper ipsum, sit amet laoreet augue adipiscing id. Fusce auctor velit et neque elementum porttitor. Mauris pharetra vehicula tempus.
</p>
<?php
# dummy data used instead of your mysql result set...
$tdata = array(
array('Name1', 'State1', 'Sex1', '1'),
array('Name2', 'State2', 'Sex2', '2'),
array('Name3', 'State3', 'Sex3', '3'),
array('Name4', 'State4', 'Sex4', '4'),
array('Name5', 'State5', 'Sex5', '5')
);
$rows = count($tdata);
$split = ceil($rows/2);
?>
<div style="margin: auto; width: 400px">
<table class="floatleft">
<thead>
<tr><th>Name</th><th>State</th><th>Sex</th><th>No. of Tracks</th></tr>
</thead>
<tbody>
<?php
for ($i = 0; $i < $split; ++$i)
{
echo
'
<tr>
<td>'.$tdata[$i][0].'</td>
<td>'.$tdata[$i][1].'</td>
<td>'.$tdata[$i][2].'</td>
<td>'.$tdata[$i][3].'</td>
</tr>';
}
?>
</tbody>
</table>
<table>
<thead>
<tr><th>Name</th><th>State</th><th>Sex</th><th>No. of Tracks</th></tr>
</thead>
<tbody>
<?php
for ($i = $split; $i < $rows; ++$i)
{
echo
'
<tr>
<td>'.$tdata[$i][0].'</td>
<td>'.$tdata[$i][1].'</td>
<td>'.$tdata[$i][2].'</td>
<td>'.$tdata[$i][3].'</td>
</tr>';
}
?>
</tbody>
</table>
</div>
<p class="clearleft">
Mauris ante augue, ornare quis pulvinar non, fringilla vel risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor consequat ipsum, ut faucibus nisl vestibulum sed. Maecenas dapibus luctus nulla in posuere. Praesent non orci sit amet odio congue varius. Vivamus eros massa, dictum ut malesuada vitae, dignissim at nisl. Ut sit amet felis nec tellus cursus tempor. In hac habitasse platea dictumst. Ut sollicitudin, erat at suscipit blandit, tortor urna sodales lacus, ut blandit metus leo eget nisi. Phasellus ut odio et mi imperdiet laoreet sed vel lectus. Integer vehicula convallis libero vitae lacinia.
</p>
</body></html>
