Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal boa tarde...estou começando agora no HP Mysql, e tenho um dificuldade muito grande de ajeitar os dados na tela.
estou desenvolvendo um software para consulta de preços, em minhas consultas na maioria das vezes retornam grandes quantidades de linhas (aproximadamente 10 a 1000 linhas dependendo da consulta e sempre com 30 colunas), e alguns desses campos chegam a 400 caracteres.
Então vem a dificuldade , atualmente estou exibindo os dados em tabelas.
É recomendável o uso de tabelas pra exibição de dados? Se nao qual a melhor forma de organiza - los. Pois com tabela fica muito feio e ainda nao encontrei uma forma de alinhar os dados.
segue abaixo o codigo usado e uma imagem da exibiçao dos dados.
<DOCTYPE html>
<html>
<head>
<style>
table {
width: 650px;
border-collapse:collapse;
border:1px solid #FFCA5E;
white-space:nowrap;
font-size:12;
}
caption {
font: 1.8em/1.8em Arial, Helvetica, sans-serif;
text-align: left;
text-indent: 10px;
background: url(bg_caption.jpg) right top;
height: 45px;
color: #FFAA00;
}
thead th {
background: url(bg_th.jpg) no-repeat right;
height: 47px;
color: #FFFFFF;
font-size: 0.8em;
font-weight: bold;
padding: 0px 7px;
margin: 20px 0px 0px;
text-align: left;
border-right: 1px solid #FCF1D4;
}
tr {
background: url(bg_td1.jpg) repeat-x top;
width:50px ;
}
tbody tr.odd {
background: #FFF8E8 url(bg_td2.jpg) repeat-x;
}
tbody th,td {
font-size: 0.8em;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
padding: 10px 7px;
border-top: 1px solid #FFCA5E;
border-right: 1px solid #DDDDDD;
text-align: left;
width: 100px;
}
</style>
</head>
<body>
<div class="tabela">
<?php
require_once"verificalogin.php";
require_once"conexao.php";
$busca = $_POST['edtconsulta'];
$consulta = "select * from sinapi where desc_composicao like '%$busca%' limit 0,10";
$result = mysqli_query($con,$consulta) or die (mysqli_error());
echo '<Table>';
echo '<th>Desc. Classe</th>';
echo '<th>Sigla</th>';
echo '<th>Desc. Tipo </th>';
echo '<th>Sigla </th>';
echo '<th>Cod. Agrupador</th>';
echo '<th>Desc. Agrupador</th>';
echo '<th>Cod. Composição</th>';
echo '<th>Desc. Composição</th>';
echo '<th>Unidade</th>';
echo '<th>Origem preço</th>';
echo '<th>Custo Total</th>';
echo '<th>Tipo de item </th>';
echo '<th>Cod. Item</th>';
echo '<th>Desc. Item</th>';
echo '<th>Unidade</th>';
echo '<th>Origem do Preço</th>';
echo '<th>Coeficiente</th>';
echo '<th>Preço Unit.</th>';
echo '<th>Custo Total Item</th>';
echo '<th>Custo M. Obra</th>';
echo '<th>% M. Obra</th>';
echo '<th>Custo Material</th>';
echo '<th>% Material</th>';
echo '<th>Custo Equip.</th>';
echo '<th>% Equip.</th>';
echo '<th>Custo Serv. Terceiros</th>';
echo '<th>% Serv. Terceiros </th>';
echo '<th>Cusot Outros</th>';
echo '<th>% Outros</th>';
echo '<th>Vinculo</th>';
echo '</table>';
echo '<br>';
while ($sql = mysqli_fetch_array($result)){
echo'<table>';
echo '<tr>';
echo '<td>'.$sql["desc_classe"].'</td>';
echo '<td>'.$sql["sigla_classe"].'</td>';
echo '<td>'.$sql["desc_tipo"].'</td>';
echo '<td>'.$sql["sigla_tipo"].'</td>';
echo '<td>'.$sql["cod_agrupador"].'</td>';
echo '<td>'.$sql["desc_agrupador"].'</td>';
echo '<td>'.$sql["id_composicao"].'</td>';
echo '<td>'.$sql["desc_composicao"].'</td>';
echo '<td>'.$sql["unidade"].'</td>';
echo '<td>'.$sql["origem_preco"].'</td>';
echo '<td>'.$sql["custo_total"].'</td>';
echo '<td>'.$sql["tipo_item"].'</td>';
echo '<td>'.$sql["id_item"].'</td>';
echo '<td>'.$sql["desc_item"].'</td>';
echo '<td>'.$sql["unidade_item"].'</td>';
echo '<td>'.$sql["origem_preco_item"].'</td>';
echo '<td>'.$sql["coeficiente"].'</td>';
echo '<td>'.$sql["preco_unitario"].'</td>';
echo '<td>'.$sql["custo_total_item"].'</td>';
echo '<td>'.$sql["custo_mobra"].'</td>';
echo '<td>'.$sql["porcentagem_mobra"].'</td>';
echo '<td>'.$sql["custo_material"].'</td>';
echo '<td>'.$sql["porcentagem_material"].'</td>';
echo '<td>'.$sql["custo_equipamento"].'</td>';
echo '<td>'.$sql["porcentagem_equipamento"].'</td>';
echo '<td>'.$sql["custo_servter"].'</td>';
echo '<td>'.$sql["porcentagem_servter"].'</td>';
echo '<td>'.$sql["custo_outros"].'</td>';
echo '<td>'.$sql["porcentagem_outros"].'</td>';
echo '<td>'.$sql["vinculo"].'</td>';
echo '</tr>';
echo'</table>';
}
?>
</div>
</body>
</html>vlw pelas dicas pessoal, usei a dica do aoliveira178 e funcionou, escrevendo a tabela da forma correta e coloquei tb no CSS a opção white-space: nowrap; na tag table e ficou bem melhor o visual.
>
Cara o que eu te recomendaria fazer visando um UI/UX bem melhor seria, na tabela você exibe apenas alguns campos essenciais para identificar o item, como o nome, um código identificador, enfim, pouca coisa, umas 4 ou 5 colunas no máximo, ou mais se necessário, mas não passando de 10 que aí já ficaria muita informação pra uma tela só. E aí você cria um link passando pela URL um parâmetro id correspondente ao id do item clicado para uma página onde vão conter as outras informações do item em questão, assim sua tabela vai ficar bem limpa, bonita e mais organizado na hora de buscar uma informação.
Outra dica é pra fazer paginação e um formulário de busca, já que podem vir centenas de resultados ;)