こんにちは。
プログラミング初心者のオジサンです。
JavaScriptでミニアプリを作成しており、そのアプリでテーブルを動的に作成する必要がありまして、テストがてらDOMだけでテーブルを作成するコードを作ってみました。
1.HTML（index.html）
テーブルはDOMで作るため、bodyタグの中はほぼ空です。
JavaScriptを読み込むためのscriptタグしかありません。
DOMを勉強するときは、だいたいこの内容でやってます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>表をjsで作る</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
2.CSS（css/styles.css）
書式は最低限、整えてます。
テーブルはdivタグでflexboxちっくに。
…まだ、flexbosをよく理解できていません(;^_^A
/* 表の書式設定 */
.table {
text-align: center;
}
/* 行の書式設定 */
.row {
display: flex;
}
/* 列の書式設定 */
.cell {
margin: auto;
}
3.JavaScript（js/main.js）
今作っているミニアプリは、テーブルの列数は固定ですが、行数はどんどん追加される仕様となっています。
そのため、本来は行数や列数を選ばさせ、表を動的に作る内容としたかったのですが、ボリュームが増えそうなので今回は4×4の固定された表とさせていただきました。
コードの流れですが、createElement()でdivタグを生成し、その後にクラスやテキストを入れ、最後にappendChild()でブラウザに表示させるようにしています。
行はdlタグ、列はdtタグで作成しています。
こちらもcreateElement()でタグを生成し、その後クラスやテキストを入れ、最後にappendChild()でブラウザに表示させるようにしています。
{
// divタグで表を作る
const table = document.createElement('div');
table.classList.add('table');
table.textContent = '表';
document.body.appendChild(table);
// dlタグで行を作る（今回は4つ）
for (let i = 0; i < 4; i++) {
const dl = document.createElement('dl');
dl.classList.add('row');
table.appendChild(dl);
// dtタグで列を作る（今回は4つ）
for (let j = 0; j < 4; j++) {
const dt = document.createElement('dt');
dt.classList.add('cell')
dt.textContent = `${i}行${j}列`;
dl.appendChild(dt);
}
}
}
最後に
Qiita初投稿になります！
今後もどんどんサンプルコードを書いていきたいと思いますので、よろしくお願いします。