<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function () {
var table = $("<table>").attr("border", "1");
var headerRow = $("<thead>");
headerRow.append($("<td>"));
for (var i = 2; i <= 9; i++) {
var headerCell = $("<th>").text(i + "단");
headerRow.append(headerCell);
}
table.append(headerRow);
var bodyRow = $("<tbody>");
for (var j = 1; j <= 9; j++) {
var row = $("<tr>");
var firstCell = $("<td>").text(j);
row.append(firstCell);
for (var i = 2; i <= 9; i++) {
var cell = $("<td>").text(i + " x " + j + " = " + i * j);
row.append(cell);
}
bodyRow.append(row);
}
table.append(bodyRow);
$("#gugudan").append(table);
});
</script>
</head>
<body>
<div class="container">
<div id="gugudan">
</div>
</div>
</body>
</html>
velog, GitHub, Notion 등에 작업물을 정리하고 있습니다.