BASIC 300を意味の所まで広げるにはどうしたら良いでしょうか？また、来たるべきadvanced 300を入れる時にはどうするのか？ご意見をお聞かせ下さい。イメージとしてはこんな感じです。 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-23/c6bb75a2-51aa-4dfc-8af3-7888783476ac.png) ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-23/dbd97eca-07fb-4d79-adc7-cd2b262e0f47.png) ```html 単語帳プログラミング必須英単語600+ 登録全0件単語意味 BASIC 300 h1 { font-family: "Yu Gothic" ; } /*idにテーブルがついている要素*/ #table { /* テーブルの境界線を重ねて表示し、隣接するセルの境界線を1本にまとめる */ border-collapse: collapse; } /*td要素とth要素*/ td, th { /*1px実践の罫線(色は#333)*/ border: 1px solid #333; /*上下0 左右10pxのパディング*/ padding: 0 10px; /*テキストを中央揃えにする */ text-align: center; } th { background: #0000ff; /*文字色を白に設定*/ color: white; } #class { background: pink; } 'use strict'; //文書が読み込み終わったら処理を実行 window.onload = () => { class Word { //コンストラクター constructor(en, ja) { this.en = en; this.ja = ja; } //メソッド showInfo() { return ` ${this.en} ${this.ja} `; } } //input要素をNodeListとして取得 const inputs = document.querySelectorAll('input'); //セレクタをもとに要素を取得 const btn = document.querySelector('#btn'); const total = document.querySelector('#total'); const table = document.querySelector('#table'); //空の配列を準備 let list = []; //btnにクリックイベントを登録 btn.addEventListener('click', () => { // 入力値を取得(前後についた無駄なスペースを除去) const enValue = inputs[0].value.trim(); const jaValue = inputs[1].value.trim(); if (enValue === '' || jaValue === '') { alert('単語と意味を両方入力してください。'); return; // 入力が不正な場合は処理を中断 } //Wordインスタンスを作成 let word = new Word(enValue, jaValue); //インスタンスを配列に追加 list.push(word); //すべてのinput要素を空欄にする inputs.forEach((input) => { input.value = ''; }); updateTable(); }); function updateTable() { //見出し行を作成 // table.innerHTML = ' 単語意味 '; // table.innerHTML = ' BASIC 300 '; //配列から1件1件取り出しながら処理を行う(取り出した1件をwordとして扱う) list.forEach((word) => { //tr要素を作成 let tr = document.createElement('tr'); //trの子要素をhtmlが含まれた文字列で設定 tr.innerHTML = word.showInfo(); //table要素の子要素として作成したtr要素を追加 table.appendChild(tr); }); //total要素のテキストコンテントを設定 total.textContent = `全${list.length}件`; } updateTable(); }; ```

見ても分からんのなら、答えを書きます。22行目。 ``` BASIC 300 ```

colspan はお試しになりましたか？ [ : 表データセル要素 - HTML: ハイパーテキストマークアップ言語 | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/td#colspan)

BASIC 300を広げたい

BASIC 300を意味の所まで広げるにはどうしたら良いでしょうか？
また、来たるべきadvanced 300を入れる時にはどうするのか？ご意見をお聞かせ下さい。
イメージとしてはこんな感じです。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>単語帳</title>
8    </head>
9
10<body>
11    <h1>プログラミング必須英単語600+</h1>
12    <input type="text" placeholder="単語">
13    <input type="text" placeholder="意味">
14    <button id="btn">登録</button>
15    <p id="total">全0件</p>
16    <table id="table">
17        <tr>
18            <th>単語</th>
19            <th>意味</th>
20        </tr>
21        <tr>
22            <td id="class">BASIC 300</td>
23        </tr>
24    </table>
25
26
27    <style>
28        h1 {
29            font-family: "Yu Gothic" ;
30        }
31        /*idにテーブルがついている要素*/
32        #table {
33            /* テーブルの境界線を重ねて表示し、隣接するセルの境界線を1本にまとめる */
34            border-collapse: collapse;
35        }
36
37        /*td要素とth要素*/
38        td,
39        th {
40            /*1px実践の罫線(色は#333)*/
41            border: 1px solid #333;
42            /*上下0 左右10pxのパディング*/
43            padding: 0 10px;
44            /*テキストを中央揃えにする */
45            text-align: center;
46        }
47
48        th {
49            background: #0000ff;
50            /*文字色を白に設定*/
51            color: white;
52        }
53
54        #class {
55            background: pink;
56        }
57    </style>
58
59
60    <script>
61        'use strict';
62
63        //文書が読み込み終わったら処理を実行
64        window.onload = () => {
65            class Word {
66                //コンストラクター
67                constructor(en, ja) {
68                    this.en = en;
69                    this.ja = ja;
70                }
71
72                //メソッド
73                showInfo() {
74                    return `<td>${this.en}</td><td>${this.ja}</td>`;
75                }
76            }
77
78            //input要素をNodeListとして取得
79            const inputs = document.querySelectorAll('input');
80            //セレクタをもとに要素を取得
81            const btn = document.querySelector('#btn');
82            const total = document.querySelector('#total');
83            const table = document.querySelector('#table');
84
85            //空の配列を準備
86            let list = [];
87
88            //btnにクリックイベントを登録
89            btn.addEventListener('click', () => {
90                // 入力値を取得(前後についた無駄なスペースを除去)
91                const enValue = inputs[0].value.trim();
92                const jaValue = inputs[1].value.trim();
93
94                if (enValue === '' || jaValue === '') {
95                    alert('単語と意味を両方入力してください。');
96                    return;  // 入力が不正な場合は処理を中断
97                }
98
99                //Wordインスタンスを作成
100                let word = new Word(enValue, jaValue);
101                //インスタンスを配列に追加
102                list.push(word);
103                //すべてのinput要素を空欄にする
104                inputs.forEach((input) => {
105                    input.value = '';
106                });
107                updateTable();
108            });
109
110            function updateTable() {
111                //見出し行を作成
112                // table.innerHTML = '<tr><th>単語</th><th>意味</th></tr>';
113                // table.innerHTML = '<tr><td>BASIC 300</td></tr>';
114
115                //配列から1件1件取り出しながら処理を行う(取り出した1件をwordとして扱う)
116                list.forEach((word) => {
117                    //tr要素を作成
118                    let tr = document.createElement('tr');
119                    //trの子要素をhtmlが含まれた文字列で設定
120                    tr.innerHTML = word.showInfo();
121                    //table要素の子要素として作成したtr要素を追加
122                    table.appendChild(tr);
123                });
124
125                //total要素のテキストコンテントを設定
126                total.textContent = `全${list.length}件`;
127            }
128
129
130            updateTable();
131        };
132    </script>
133
134</body>
135
136</html>

TakaiY

2024/10/23 08:33

そもそもカラムとして「単語」と「意味」のある表の内容として、 BASIC 300 はあてはまらないと思うのですが、これはどういう意図でしょう。また、「来たるべきadvanced 300」とはどういう意味でしょう？全般的にどのような表になうｒのかのイメージを出していただけるとアドバイスしやすいと思います。 (回答はここではなく、質問を編集してください)

行動規範の内容に同意します

回答2件

colspan はお試しになりましたか？
<td>: 表データセル要素 - HTML: ハイパーテキストマークアップ言語 | MDN

投稿2024/10/23 10:02

Lhankor_Mhy

総合スコア37647

zawber

2024/10/23 11:12

見ても分からんです。

行動規範の内容に同意します

ベストアンサー

見ても分からんのなら、答えを書きます。22行目。

            <td colspan=2 id="class">BASIC 300</td>

投稿2024/10/23 11:20

hiroki-o

総合スコア1645

zawber

2024/10/23 23:39

出来てる！列ってそういうこと。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問