JSFiddle - React, Tailwind, and code Playground

by angstrey

HTML

<p>Hello</p>

CSS

body
{
    font: 1em/1.5em 'Arial';
}

table
{
    border-collapse: collapse;
    border: solid 1px #ccc;
    width: 100%;
}

th, td
{
    border: solid 1px #ccc;
    padding: 4px;
}

tr:nth-child(2n)
{
    background: #E3F3F9;
}

caption
{
    font-style: italic;
}

JavaScript

var table = document.createElement('table'),
    tbody = document.createElement('tbody'),
    i, 
    row,
    rowCount = 10;

table.appendChild(tbody);

for (i = 0; i < rowCount; i++) {
    tbody.insertRow(i);

    row = tbody.rows[i];
    row.insertCell(0);
    row.insertCell(1);
    row.insertCell(2);
    row.cells[0].appendChild(document.createTextNode('Row ' + i + ', Cell 1'));
    row.cells[1].appendChild(document.createTextNode('Row ' + i + ', Cell 2'));
    row.cells[2].appendChild(document.createTextNode('Row ' + i + ', Cell 3'));
}

table.createCaption();
table.caption.appendChild(document.createTextNode("A DOM-Generated Table"));

document.body.appendChild(table);