HTMLで表を作れる「table」タグについて解説！【初心者向け】

こんにちは、Autumn（オータム）です。

HTMLの勉強を始めたての頃によく頭を抱えるのが「表の作り方」です。

 

 

「いろんなタグを使っててよくわからん、、」
「自分の思った通りの表にならない、、」

 

そんなあなたのために、今回はHTMLでの表の作成方法をわかりやすく解説していきます！

表作成に最低限必要な基本部分だけをピックアップしていきますので、3分もかからず読める記事となっています。

一緒に表作成の基礎を身につけていきましょう！

表を作成するために使用するタグ一覧

HTMLには、表を作成するためのタグが存在します。
使用するのは以下の４種類です。

これらのタグの関係性を把握するには、それぞれタグの名前の意味を知っておくと理解しやすいので合わせて解説します。

また、今回は実際にHTMLで作成した下記の表を例に、順番に説明していきます。

tableタグ：表を作成する宣言をする

tableタグは表全体を囲う時に使用されるタグです。
単体では使用せず、後述するタグたちと一緒に使うことで、表を完成させることができます。

trタグ：表の列を構成する

「tr」は「table row」の略で、その名の通り行を構成するタグです。
trタグを複数使用することで表の行数を増やすことができます。

thタグ・tdタグ：項目名とその詳細

「th」は「table head」の略で、項目名となるタグです。
そして「td」は「table data」の略で、項目の詳細を表示するタグです。

実例のソースコードを見てみる

各タグの役割を理解したところで、エディタ上でどのように書くのか、先ほどの実例のソースコードで確認してみます。

 

 

「table」→「tr」→「th・td」の順で入れ子になっているのがわかるかと思います。
また、各trタグには、表示させる列の数に合わせてthタグ・tdタグを入れることもポイントです。

項目を横方向にすることも可能

下記のように、項目名を横にすることも可能です。

この場合は、各trタグの中にthタグとtdタグを一緒に入力していけばOKです。

応用編：表の結合

ここまでお疲れ様でした。表作成のポイントはだいたい理解できたのではないでしょうか？
ここからはプラスαのポイントとして、項目同士を結合させる方法をお伝えします。

使用するのは以下の属性要素です。

rowspan：縦に結合する

要素を縦に結合するためには、「rowspan」属性を使用します。
今回はたろうの特徴をハナコと一緒にするために、rowspanを追加します。

追加するときのポイントは2つ。

 

すると、tdタグが縦に結合され、特徴が一緒になりました。

colspan：横に結合する

逆に要素を横に結合するためには、「colspan」属性を使用します。
今度は項目が横向きになっている表で試してみます。

同じ要領で、結合するタグにcolspanを追加します。

 

すると、横に結合されて特徴が一緒になりました。

ポイントおさらい＆まとめ

お疲れ様でした！改めて今回のポイントをおさらいします。

これだけの情報を1回で覚えるのは難しいので、何度も記事を読み返して少しずつ理解していきましょう。

基礎を理解したら、実践で活用してみよう

将来的にフロントエンドエンジニアに転職、もしくはプログラミングを副業に使いたい方は、今回の内容は必須になってきます。

今回の内容を自分のものにしていくためにも、地道な反復練習をおこなっていきましょう。

 

継続するのはとても難しいことですが、やり方を工夫すれば1日1時間の勉強を習慣化することは可能です。

私も少しずつ継続する術を学び、今では1日2時間は勉強時間を確保できるようになりました。

それについては別記事にまとめてますので、よかったら参考にしてみてください！

 

また、先日Twitterアカウントを作成しました！
毎日WEBデザインがかっこいい、アニメーションの参考になるサイトを紹介しておりますので、WEB制作の勉強をしたい方はぜひのぞいてみてください！

本日も読んでいただき、ありがとうございました！