Как я могу создать HTML таблицу с двумя заголовками и данными из БД

---

Всем привет,

я хочу скомбинировать данные из БД в таблицу с двумя заголовками сверху и одним столбцом слева. с помощью Jquery я могу сделать это, но только с верхним заголовком, Может ли enybody объяснить мне, как я могу сделать это и на стороне lesft?

пример:

headerTop1/ headerTop2/ headerTop3
header1/ dbcontent / dbcontent / dbcntent
header2/ dbcontent / dbcontent / dbcntent
header3 / dbcontent / dbcontent / dbcntent

есть идеи?

Что я уже пробовал:

$.ajax({
       type: "GET",
       url: "/Home/JsonWeekEvents",
       dataType: "JSON",
       success: function (result) {
           $.each(result, function (i, val) {
               var trow = $('<tr/>').data("id", val.Id);
               //trow.append('<td>' + val.Id + " " + '</td>');
               trow.append('<div style="padding:5px; width:100px; height:70px"></div>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Monday + '</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Tuesday  + '</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Wednesday  + '</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Thursday  +'</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Friday  +'</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Saturday +'</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Sunday + '</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + '<a href="#" rel="events-week-edit" data-toggle="modal" data-target="#editWeekCenter">Edit Week</a>' + '</td>');
               //trow.append('<td>' + '<a href="#" rel="event-edit-details" data-toggle="modal" data-target="#editModalCenter">edit</a>' + " " + "|" + " " + '</td>');
               //trow.append('<td>' + '<a href="#" rel="event-delete" data-toggle="modal" data-target="#exampleModalCenter">delete</a>' + " " + '</td>');
               tab.append(trow);
           });
           $("tr:odd", tab).css('background-color', '#C4C4C4');
           $("#weekEvents").html(tab);
       },
       error: function () {
           alert("Failed! Please try again.");
       }
   });
   var tab = $('<table class=MyTable border=1 ></table>');
   var thead = $('<thead></thead>');

   thead.append('<th style="padding:5px">FSE' + " " + '</th>');
   thead.append('<th style="padding:5px">Monday' + " " + '</th>');
   thead.append('<th style="padding:5px">Tuesday' + " " + '</th>');
   thead.append('<th style="padding:5px">Wednesday' + " " + '</th>');
   thead.append('<th style="padding:5px">Thursday' + " " + '</th>');
   thead.append('<th style="padding:5px">Friday' + " " + '</th>');
   thead.append('<th style="padding:5px">Saturday' + " " + '</th>');
   thead.append('<th style="padding:5px">Sunday' + " " + '</th>');
   tab.append(thead);

---