Skip to content

Instantly share code, notes, and snippets.

@EncodeTheCode
Created February 19, 2026 09:58
Show Gist options
  • Select an option

  • Save EncodeTheCode/a2989452d05a30bcd5177dbfce1639c0 to your computer and use it in GitHub Desktop.

Select an option

Save EncodeTheCode/a2989452d05a30bcd5177dbfce1639c0 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Array-of-Arrays → Table (no keys)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body{font-family:system-ui,Arial;background:#f4f6f8;padding:18px;color:#111}
.card{background:#fff;border-radius:8px;padding:10px;margin:12px 0;box-shadow:0 6px 18px rgba(10,20,40,.04)}
table{width:100%;border-collapse:collapse}
th{background:#f8fafc;padding:10px;border-bottom:2px solid #eef;text-align:left}
td{padding:10px;border-bottom:1px solid #eee}
tr:nth-child(even){background:#fbfeff}
.title{color:#2563eb;font-weight:600;margin:0 0 8px 0;padding:0.5em 0.5em;}
.bg1{background-color:#AAF3AF44;}
.bg2{background-color:#3AF3AF44;}
.bg3{background-color:#EAFEDF44;}
</style>
</head>
<body>
<div id="sony_created" class="card"></div>
<div id="sony_published" class="card"></div>
<script>
const esc=v=>String(v==null?'':v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
function renderTable(container,data,cols,caption=''){
if(!Array.isArray(data)||data.length===0){ $(container).empty(); return; }
let html = caption?`<div class="title bg1">${esc(caption)}</div>`:'';
html += '<table><thead><tr>' + cols.map(c=>`<th class="bg2">${esc(c)}</th>`).join('') + '</tr></thead><tbody>';
html += data.map(row=>'<tr>'+row.map(cell=>`<td class="bg3">${esc(cell)}</td>`).join('')+'</tr>').join('');
html += '</tbody></table>';
$(container).html(html);
}
// Data: arrays of arrays (no keys)
const info_header = ["Game Title","Game ID","Serial","Release Date"];
const sony_created = [
["Crash Bandicoot", "SCES-XXXXXX", "N/A","2000-01-01"],
["Croc 2", "SCES-XXXXXX", "N/A","2000-01-01"],
["Syphon Filter", "SCES-XXXXXX", "N/A","2000-01-01"]
];
const sony_published = [
["Crash Bandicoot 2", "SCES-XXXXXX", "N/A","2000-01-01"],
["Croc", "SCES-XXXXXX", "N/A","2000-01-01"],
["Syphon Filter 2", "SCES-XXXXXX", "N/A","2000-01-01"]
];
$(function(){
renderTable('#sony_created', sony_created, info_header, 'Sony Created Games');
renderTable('#sony_published', sony_published, info_header, 'Sony Published Games');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment