tableタグを使って表を作成しよう

HTMLの問題に挑戦しよう！

問題

「tableタグを使って表を作成しよう」

tableを使って2行、2列の表を作成してください。

期待する画面を参考にして作成しましょう。

あらかじめエディタに書くコード

                    見出し部分
内容部分
見出し部分
内容部分
¥HTML¥

期待する画面

解答と解説（tableタグを使って表を作成しよう）

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

まずはtableを書いて表を定義します。
定義出来たらtableタグの子要素にtrタグを書きます。
※全て開始タグと終了タグを書き忘れないようにしましょう。

trタグは行を定義するタグなので行の数だけ書きます。
trタグの中にはth・tdタグを書きます。
thタグには見出しとなる情報、tdタグには内容となる情報を書きましょう。
th・tdタグの数だけ列が追加されていきます。

表のテキストが完成したら最後に表の枠線を表示します。
今回はborder属性を使って枠線を表示ましたがこちらは非推奨タグになるので
VSCODEを使用している場合、赤字で表示されたかと思います。
基本的にはCSSで枠線を指定することを覚えておきましょう。

補足

tableタグ以外のタグは英単語の意味で覚えておきましょう。

・関連する問題を解く：colspanを使ってtableの列を結合しよう

HTML学習のコース一覧へ戻る

ポイント

tableタグとは

tableタグとは、Webページ内に表を作成したい場合に使用するHTMLのタグです。
一般的に表のことをテーブルと呼ばれることが多いので、大体同じ意味だと認識しておけば大丈夫です。
tableで表を作るには、tableタグの中にtr・th・tdという3つのタグを使って表の情報を定義していきます。

tr・th・tdとは

tr・th・tdとは、HTMLで表を作成する際に使用するHTMLのタグです。
trタグ:Table Row(表の行)
thタグ:Table Header(表の見出し)
tdタグ:Table Data(表のデータ・情報)
trタグで表の行を定義し、thタグで見出しを定義、tdタグでセルの中身を記述します。

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する

HTML学習におすすめのコース