JSFiddle - React, Tailwind, and code Playground

by Ben Gillbanks

HTML

<table>
    <tbody id="charTable">
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
td {
    font-family: monospace;
    vertical-align: top;
}
span {
    display: block;
}
.num {
    opacity: 0.6;
    font-size: 10px;
}
.char {
    font-weight: bold;
}

JavaScript

function generateTable() {
        const tableBody = document.getElementById('charTable');
        let output = '';

        for (let row = 0; row < 32; row++) {
            output += '<tr>';
            for (let col = 0; col < 16; col++) {
                const num = row * 16 + col;
                const char = String.fromCharCode(num);
                output += `<td>
                	<span class="num"> ${num} </span>
                    <span class="char"> ${char} </span></td>`;
            }
            output += '</tr>';
        }

        tableBody.innerHTML = output;
    }

    generateTable();