Display two tables from mysql using PHP and spry or something similar

I'm trying to display data from two different tables in mysql using PHP and something like spry.. Originally, I wanted to used spry tabbed panels, but I'm not sure if that's possible. I would want the tab name to be populated from one table and the contents of that tab to be populated from another table. Here's the basic html...

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">NAME_1 POPULATED FROM FIRST TABLE</li>
    <li class="TabbedPanelsTab" tabindex="0">NAME_2 POPULATED FROM FIRST TABLE</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
    <table border="0" cellspacing="5" cellpadding="5">
        <tr>
<!-- CONTENT POPULATED FROM SECOND TABLE!-->
          <td width="450">&nbsp;</td>
          <td width="50">&nbsp;</td>
          <td width="50">&nbsp;</td>
          <td width="50">&nbsp;</td>
          <td width="50">&nbsp;</td>
        </tr>
      </table></div>
   </div>
</div>
</div>

The problem I think I'll have is that I won't be able to connect the tabs with the content. Since the tabs are listed first in the html... then the content. I don't know if this is possible or if there is a better way.

Solution

It depends a little on the final result you want to get. For example:

If the only thing you want is a list of tabs taken from a table and their content completed from another DB table you just need to do 2 query, one for each table, and save the results in variables. You can then complete the HTML structure inside a variable and finally do a echo of this variable at the end.

// $result1 has the info of the tab names.
// $result2 has the contents of each tab.
$final_html='<div id="TabbedPanels1" class="TabbedPanels">
             <ul class="TabbedPanelsTabGroup">';

while($row1=$result1->mysqli_fetch_array()){
     $final_html.="<li class=\"TabbedPanelsTab\" tabindex=\"0\">$row1[0]</li>";
}

$final_html.='</ul><div class="TabbedPanelsContentGroup">
              <div class="TabbedPanelsContent">
              <table border="0" cellspacing="5" cellpadding="5">
              <tr>';

while($row2=$result2->mysqli_fetch_array()){
     $final_html.="<td width=\"450\">$row2[0]</td>";
}

$final_html.='</tr></table></div></div></div></div>';

echo $final_html;

If the problem is how to make tabs work I would suggest using Jquery.

The main idea would be to use ids based on the same variable in the tab and the tab content. For example one tab could be named 'tab1' and its contents could be named 'tab1content'.

If you want more detail in the Jquery part please post some of your code to see how do you want these tabs to work.