JSFiddle - React, Tailwind, and code Playground

HTML

<table id="cupFinals" border=1 px>
    <tbody id="matchData"></tbody>
</table>

CSS

td.centered {
    text-align: center;
}

JavaScript

// Draw table from 'jsData' array of objects
function drawTable(tbody) {
    var tbody = document.getElementById("matchData");
   	var headerNames = Object.getOwnPropertyNames(jsData[0]);
    var columnCount = headerNames.length;
    //Add the header row.
    var row = tbody.insertRow(-1);
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = headerNames[i];
        row.appendChild(headerCell);
    }


    // loop through data source
    for (var i = 0; i < jsData.length; i++) {
        var tr = document.createElement("tr");
        for(var colName in jsData[i]) {
            var td = document.createElement("td");
            td.innerHTML = jsData[i][colName];
            if(colName=="Location") 
                td.className = "centered";
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
}
var jsData = [];
jsData[0] = {
    Location: "Uruguay",
    Year: 1930,
    Winner: "Uruguay",
    WinScore: 4,
    Loser: "Argentina",
    LosScore: 2
};
jsData[1] = {
    Location: "Italy",
    Year: 1934,
    Winner: "Italy",
    WinScore: 2,
    Loser: "Czechoslovakia",
    LosScore: 1
};
jsData[2] = {
    Location: "France",
    Year: 1938,
    Winner: "Italy",
    WinScore: 4,
    Loser: "Hungary",
    LosScore: 2
};
jsData[3] = {
    Location: "Brazil",
    Year: 1950,
    Winner: "Uruguay",
    WinScore: 2,
    Loser: "Brazil",
    LosScore: 1
};
jsData[4] = {
    Location: "Switzerland",
    Year: 1954,
    Winner: "West Germany",
    WinScore: 3,
    Loser: "Hungary",
    LosScore: 2
};
drawTable("matchdata");