Is it possible to rename and order the table columns?

Is it possible to rename and order the table columns?

I am truly to have to come back here again today.
 
I have googled all day looking for solutions but came up empty.
 
The code below was generously provided by Godsbest.
 
  1. $("#example").on("click", "a[target='tab']", function(){
      var me = $(this);
      var url = me.attr("href");
      var tabName = me.data("tabName");
      var tabIndex = parseInt(me.data("tabIndex"), 10);
      $.get(url, function(data) {
    var table = $( '<table cellpadding="4" width="100%" cellspacing="0" />' ),
        tr = $( '<tr/>' ),
        td = $( '<td/>' ),
        th = $( '<th/>' );
      $.each( data[ 0 ], function(key,value) {
           tr.clone().html( td.clone().html( key.bold() ) )
           .append( td.clone().html( value ) )
           .appendTo( table );
       });
        $(tabName).html(table);
        // Activate the tab once the page has loaded:
        $("#tabs").tabs("option", "active", tabIndex);
        }, 'json');
         // Prevent the browser from following the link:
        return false;
        });




















 
 
It works a treat but I am having difficulty making changes to it.
 
For instance, it provided results similar to the screenshot below.
 
 
 
However, the users are insisting that the results look similar to the screenshot below where one row contains RequestId and Request Date  and the rest of the results are laid out like the first screenshot except that they need labels formatted.
 
 
 
For instance, instead of RequestID, show Request ID; instead of RequestDate, show Request Date, etc.
 
I can handle the alternating row color bit.
 
Again, please forgive me for many questions here.
 
If there is a link that walk me through this, please help point me in the right direction.
 
Many thanks again in advance for all the help.