JSFiddle - React, Tailwind, and code Playground

HTML

<table id="large">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

CSS

td { border: solid 1px silver;
     width : 100px;
    padding-left: 5px;}

JavaScript

$(function () {
    var col =[];
    col.push({ "ColName": "Nom","SQLName":"Name"});
    col.push({ "ColName": "Matière principale","SQLName":"Major" });

  $thead = $('#large thead');
    $hl=$('<tr/>');
    for (var p = 0; p < col.length; p++) {
        $hl.append($('<td>').html( col[p].ColName) );
        
    } 
    $thead.append($hl);  
    
    var msg = [];
    msg.push({ "Name": "Yohann", "Major": "Math" });
    msg.push({ "Name": "Edith", "Major": "Geographie" });
    msg.push({ "Name": "Thierry", "Major": "Math" });
    
    var tbody = '';
    
    $tbody = $('#large tbody');
    
    for(m=0;m<msg.length;m++){        
        $bl=$("<tr>");
        for(c=0; c<col.length;c++){
        $bl.append($('<td/>').html(msg[m][col[c]['SQLName']]));
        }
        $tbody.append($bl);
    }
    
          });