I want to add the table like layout to my page.

The data in the cells will come dynamically from functions.
$j.each(records, function() {
$j('<tr></tr>')
.hide()
.attr('id',this.Id)
.append('<td>' + this.PricebookEntryId+'</td> <td>'+this.Description +'</td> <td>'+this.ListPrice+'</td>')
.appendTo('#productTable')
.show();
});
but this creates a very simple table which does not look like the screenshot above

and I can not find such layout in docs.Any pointer will be of great help.
Thanks
Jquery Mobile does not contain a table widget, so your table will not be renedered in the JQM UI.
Options:
1. develop needed enhancements yourself (from your screenshot it looks like pure CSS only)
2. try using the tableview raw example I did a while ago using JQM listview and a Responsive Table Pattern by Filament
3. use a the dataTabels version I’m working on (example here). This will look the same as (2), but you have all the functionalities of datatables available.