Ajuda para mostrar dados do banco na tela

Olá pessoal, estou fazendo um INNER JOIN entre duas tabelas do meu banco. Mas estou com dificuldade para mostrar o resultado organizado na tela, alguém poderia me ajudar?

As tabelas são de categoria e serviço (relacionado a categoria). Na tabela categoria tenho somente o id e o nome da categoria. Ja na tabela de serviço tenho várias informações, mas preciso trazer somente o código do serviço e o nome do serviço.

A query que montei foi esta:

SELECT t1.*, t2.* FROM produto_tipo AS t1 INNER JOIN categorias AS t2 ON t2.id = t1.categoria

	Onde PRODUTO_TIPO é a tabela de serviços e CATEGORIAS é a tabela de categoria, e o CAMPO categoria é a Chave Estrangeira (Sim, esta estranho, mas nao fui eu quem montou este BD). Quando executo esta query no phpmyadmin ele retorna as informações que preciso, mas, sem organização. Ele retorna assim:

id cod categoria id nome_categoria
118 ho 4 4 Hospedagem
117 dev 3 3 Desenvolvimento
116 444 3 3 Desenvolvimento
119 ho2 4 4 Hospedagem
120 emmkt 5 5 Marketing
121 rs 5 5 Marketing

Bem, primeiro vou dizer como quero as informações na tela...

Categoria: Hospedagem (Que tem id=4)

código       Serviço

ho            Servidor

ho2           SMTP

Categoria: Desenvolvimento(Que tem id=3)

código       Serviço

dev          Servidor

444          SMTP

Categoria: Marketing (Que tem id=5)

código       Serviço

emmkt       E-mail Marketing

rs             Rede social

Lembrando que as informações do campo SERVIÇO esta na tabela de serviços (PRODUTO_TIPO), com o campo chamado titulo.

No código PHP estou chamando essas informações assim:

<div class="row" align="center">
 <div class="col-lg-6">
 <h2>Categoria: <span style="color: #169F85;"><i><b>'. $row['nome_categoria'].'</b></i></span></h2>
 </div>
 <div class="col-lg-6 pull-right">
 <h2>Ações:
 <a href="categoria_form.php?n='.$row['id'].'" class="btn btn-primary btn-xs"><i class="fa fa-edit" data-tip="tooltip" data-original-title="Editar"></i></a>
 <a href="#" onClick="javascript:Apagar(\''.$row['id'].'\');" class="btn btn-danger btn-xs"><i class="fa fa-times" data-tip="tooltip" data-original-title="Apagar"></i></a>
 </h2>
 </div>
</div>
 <tr>
 <td class="text-center"><strong>'.$row['cod'].'</strong></td>
 <td class="text-center">'.$row['titulo'].'</td>
 <td class="text-center"><font class="btn btn-xs btn-success">R$ '.Decimal($row['valorCusto']).'</font></td>
 <td class="text-center"><font class="btn btn-xs btn-success">R$ '.Decimal($row['valorFinal']).'</font></td>
 <td class="text-center">
 <a href="produtotipo_form.php?n='.$row['id'].'" class="btn btn-primary btn-xs"><i class="fa fa-edit" data-tip="tooltip" data-original-title="Editar"></i></a>
 <a href="#" onClick="javascript:Apagar(\''.$row['id'].'\');" class="btn btn-danger btn-xs"><i class="fa fa-times" data-tip="tooltip" data-original-title="Apagar"></i></a>
 </td>
 </tr>';

	E deste jeito ele aparece assim na tela:

	 

	Categoria: Hospedagem

	Categoria: Desenvolvimento

	Categoria: Desenvolvimento

	Categoria: Hospedagem

	Categoria: Marketing

	Categoria: Marketing

	 

	**código**       **Serviço**

	emmkt       E-mail Marketing

	   rs             Rede social

	  dev          Servidor

	  444          SMTP

	  ho            Servidor

	  ho2           SMTP

	 

	Não sei como resolver isso :/

	 

	Alguém poderia me ajudar?

	 

	Desde já, grato!