Skip to content

Instantly share code, notes, and snippets.

@itod

itod/times_table.html

Created September 10, 2025 19:22
Show Gist options
  • Save itod/6eeb855e9fbbbd9ab7f11b3126c4c9e2 to your computer and use it in GitHub Desktop.
Save itod/6eeb855e9fbbbd9ab7f11b3126c4c9e2 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Times Table
Raw
times_table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Times Table</title>
<script type="text/javascript">
window.TOGGLE = false;
function headerClick(evt) {
var name = (evt.target.classList + "").trim();
var cells = document.querySelectorAll('table tbody td');
for (var cell of cells) {
var idx = cell.classList.value.indexOf(name);
var hidden = false;
if (window.TOGGLE) {
hidden = false;
} else {
hidden = (-1 == idx);
}
cell.firstChild.style.display = hidden ? "none" : "";
}
window.TOGGLE = !window.TOGGLE;
}
window.onload = function() {
var headCells = document.querySelectorAll('table thead tr th');
var colIdx = 0;
for (var cell of headCells) {
cell.onclick = headerClick;
colIdx++;
}
var tbody = document.querySelector('table tbody');
var rows = tbody.querySelectorAll('tr');
var rowIdx = 0;
for (var row of rows) {
var cells = row.querySelectorAll('td');
var colIdx = 0;
for (var cell of cells) {
cell.innerHTML = "<span>" + (rowIdx * colIdx) + "</span>";
if (rowIdx == colIdx) {
cell.classList.add('mid');
}
++colIdx;
}
++rowIdx;
}
}
</script>
<style>
table {
width:800px;
}
th, td {
text-align:center;
padding:6px 0;
width:45px; height:45px;
font-size:35px;
}
td.mid {
background-color:#ddd;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th width="" class=""> </th>
<th width="" class="c0"> 0</th>
<th width="" class="c1"> 1</th>
<th width="" class="c2"> 2</th>
<th width="" class="c3"> 3</th>
<th width="" class="c4"> 4</th>
<th width="" class="c5"> 5</th>
<th width="" class="c6"> 6</th>
<th width="" class="c7"> 7</th>
<th width="" class="c8"> 8</th>
<th width="" class="c9"> 9</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td class="r0 c0"></td><td class="r0 c1"></td><td class="r0 c2"></td><td class="r0 c3"></td><td class="r0 c4"></td><td class="r0 c5"></td><td class="r0 c6"></td><td class="r0 c7"></td><td class="r0 c8"></td><td class="r0 c9"></td>
</tr>
<tr>
<th>1</th>
<td class="r1 c0"></td><td class="r1 c1"></td><td class="r1 c2"></td><td class="r1 c3"></td><td class="r1 c4"></td><td class="r1 c5"></td><td class="r1 c6"></td><td class="r1 c7"></td><td class="r1 c8"></td><td class="r1 c9"></td>
</tr>
<tr>
<th>2</th>
<td class="r2 c0"></td><td class="r2 c1"></td><td class="r2 c2"></td><td class="r2 c3"></td><td class="r2 c4"></td><td class="r2 c5"></td><td class="r2 c6"></td><td class="r2 c7"></td><td class="r2 c8"></td><td class="r2 c9"></td>
</tr>
<tr>
<th>3</th>
<td class="r3 c0"></td><td class="r3 c1"></td><td class="r3 c2"></td><td class="r3 c3"></td><td class="r3 c4"></td><td class="r3 c5"></td><td class="r3 c6"></td><td class="r3 c7"></td><td class="r3 c8"></td><td class="r3 c9"></td>
</tr>
<tr>
<th>4</th>
<td class="r4 c0"></td><td class="r4 c1"></td><td class="r4 c2"></td><td class="r4 c3"></td><td class="r4 c4"></td><td class="r4 c5"></td><td class="r4 c6"></td><td class="r4 c7"></td><td class="r4 c8"></td><td class="r4 c9"></td>
</tr>
<tr>
<th>5</th>
<td class="r5 c0"></td><td class="r5 c1"></td><td class="r5 c2"></td><td class="r5 c3"></td><td class="r5 c4"></td><td class="r5 c5"></td><td class="r5 c6"></td><td class="r5 c7"></td><td class="r5 c8"></td><td class="r5 c9"></td>
</tr>
<tr>
<th>6</th>
<td class="r6 c0"></td><td class="r6 c1"></td><td class="r6 c2"></td><td class="r6 c3"></td><td class="r6 c4"></td><td class="r6 c5"></td><td class="r6 c6"></td><td class="r6 c7"></td><td class="r6 c8"></td><td class="r6 c9"></td>
</tr>
<tr>
<th>7</th>
<td class="r7 c0"></td><td class="r7 c1"></td><td class="r7 c2"></td><td class="r7 c3"></td><td class="r7 c4"></td><td class="r7 c5"></td><td class="r7 c6"></td><td class="r7 c7"></td><td class="r7 c8"></td><td class="r7 c9"></td>
</tr>
<tr>
<th>8</th>
<td class="r8 c0"></td><td class="r8 c1"></td><td class="r8 c2"></td><td class="r8 c3"></td><td class="r8 c4"></td><td class="r8 c5"></td><td class="r8 c6"></td><td class="r8 c7"></td><td class="r8 c8"></td><td class="r8 c9"></td>
</tr>
<tr>
<th>9</th>
<td class="r9 c0"></td><td class="r9 c1"></td><td class="r9 c2"></td><td class="r9 c3"></td><td class="r9 c4"></td><td class="r9 c5"></td><td class="r9 c6"></td><td class="r9 c7"></td><td class="r9 c8"></td><td class="r9 c9"></td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment