PHP E HTML5

Pessoal boa noite.

Estou utilizando esse codigo abaixo e a minha saída na pagina gerou informações desconfiguradas na tela. Alguém pode ajudar?

Obrigado.

CÓDIGO HTML5 + PHP

<div class="row">
 <div class="col-lg-12">
 <div class="panel panel-default">
 <div class="panel-heading">DataTables Advanced Tables</div>
 <!-- /.panel-heading -->

 <div class="panel-body">

 <div class="dataTable_wrapper">

 <table class="table table-striped table-bordered table-hover"
 id="dataTables-example">

 <thead>
 <tr>
 <th>Id</th>
 <th>Nome</th>
 <th>Email</th>
 <th>Senha</th>
 <th>Nivel</th>
 <th>Alterar</th>
 <th>Excluir</th>
 </tr>
 </thead>

 <tbody>

 <?php
 $registros = listar('usuarios');
 foreach ($registros as $registro):
 ?>
 <tr class="odd gradeX">
 <td><?= $registro['id'] ?></td>
 <td><?= $registro['nome'] ?></td>
 <td><?= $registro['email'] ?></td>
 <td class="center"><?= $registro['senha'] ?></td>
 <td class="center"><?= $registro['nivel'] ?></td>
 <td><a href="alterar.php?id=<?= $registro['id'] ?>"><font
 color="#1571CD">Alterar

 </a></td>
 <td><a href="excluir.php?id=<?= $registro['id'] ?>"
 onclick="return confirm('Confirmar exclusão de registro?');"><font
 color="#1571CD">Excluir

 </a></td>
 </tr>
 <?php endforeach; ?>
 </tbody>

 </div>
 <!-- /.table-responsive -->

 </div>
 <!-- /.panel-body -->

 </div>
 <!-- /.panel -->
 </div>
 <!-- /.col-lg-12 -->
 </div>
 <!-- /.row -->