動的データ

Question

I need to make a table like this

And actually i have this

私の問題は、レイアウトであると特定のテーブルレイアウトの作成には、データは完全に動的であり、両方のキー（青）と値（白）、およびテーブルはjqueryでマウントされています。

誰でも私ができるだけこの結果に近づく方法を知っていますか？ここで

は私のjqueryのコードです：

function loadRelatos(json) { 
$.getJSON(json, function (radoc) { 
    $('#ano-base').text(radoc.anoBase); 

    var relatorio = $('#relatorio'); 

    $.each(radoc.relatos, function (key, value) { 
     var repetido = false; 
     var relato; 
     $('[id^="relato-"]').each(function() { 
      if(value.classe === $(this).find('.cabecalho-relato a').text()) { 
       relato = $(this); 
       repetido = true; 
       return false; 
      } 
     }); 

     if(!repetido) { 
      relatorio.append(
       $(document.createElement('div')).addClass('row relato').attr('id', 'relato-'+key) 
      ); 
      relato = $('#relato-'+key); 
      relato.append(
       $(document.createElement('div')).addClass('cabecalho-relato').append(
        $(document.createElement('a')).text(value.classe) 
       ) 
      ); 
     } 

     relato.append(
      $(document.createElement('table')).addClass('conteudo-relato').attr('id', 'conteudo-'+key) 
     ); 

     var conteudo = relato.find('#conteudo-'+key); 
     $.each(value.atributos, function (key, value) { 
      conteudo.append(
       $(document.createElement('tr')).addClass('atributo').append(
        $(document.createElement('td')).addClass('atributo-key').text(key+':'), 
        $(document.createElement('td')).addClass('atributo-value').text(value) 
       ) 
      ); 
     }); 
    }); 
});} 

Answer 1

あなたは、私はPHPのコードを記述する2列以上の列

<table> 
    <thead> 
    <tr> 
     <th scope="col">Lorem</th> 
     <th scope="col">Ipsum</th> 
     <th scope="col">Dolor</th> 
     <th scope="col">Sit</th> 
     <th scope="col">Amet</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Amet</td> 
     <td>Sit</td> 
     <td>Dolor</td> 
     <td>Ipsum</td> 
     <td>Lorem</td> 
    </tr> 
    <tr> 
     <td rowspan="2">Amet</td> 
     <td colspan="2">Sit</td> 
     <td>Ipsum</td> 
     <td>Lorem</td> 
    </tr> 

    <tr> 
     <td>Sit</td> 
     <td>Dolor</td> 
     <td>Ipsum</td> 
     <td>Lorem</td> 
    </tr> 
    </tbody> 
</table> 

Example

Answer 2

にまたがるcolspanプロパティを、使用する必要があります。あなたは

<?php 
$data; //Hava data array 
$res = ""; 
$res . = "<table>"; 
foreach($data as $val) 
{ 
    $res . = "<tr>"; 
    $res . = "<td>".$val['id']."</td>"; 
    $res . = "<td>".$val['Name']."</td>"; 
    $res . = "<td>".$val['status']."</td>"; 
    $res . = "</tr>"; 
} 
$res . = "</table>"; 
echo $res; 
?>