JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table_placeholder"></div>

CSS

caption {
    background-color: #cf270f;
    font-weight: bold;
}
thead {
    background-color:#f7d117;
    font-weight: bold;
}
td {
    border: 1px solid #cf270f;
}

JavaScript

var arr =[
        ["Period Ends", "Payroll Due", "Payday"],   
        ["06/13/15",    "06/19/15", "06/26/15"],
    ];

    var body = document.getElementById('table_placeholder');
    var tab = document.createElement('table');
    var cap = tab.createCaption();
    var tr, td, col;

    // set caption
    cap.innerHTML = 'My Table Caption';

    // start from first row (skip row headings)
    for (var row=1; row < arr.length; row++){
        tr = tab.insertRow(row-1);

        for (col=0; col < arr[row].length; col++){
            td = tr.insertCell(col);
            td.innerHTML = arr[row][col];
        }
    }

    // add row headings
    var header = tab.createTHead()
    var headerRow = header.insertRow(0);
    for (col=0; col < arr[0].length; col++){
        td = headerRow.insertCell(col);
        td.innerHTML = arr[0][col];
    }

    body.appendChild(tab);