【HTML】tableタグで表を作成する方法の解説

このページについて

このページではHTMLタグのtableタグに関する解説をしています。

tableタグはHTML文書内に表を定義する機能を持っています。このサイトでもかなりつかっていますが、CSSで色々とレイアウトや色を変更しているので、一概に同じ見た目になるとは言えませんがtableタグ自体は共通しています。

tableタグは単体で使うことはなく、いくつかのタグを併用して表を作成します。その際に使うのがtrタグ、thタグ、tdタグ、captionタグ、colgroupタグ、theadタグ、tbodyタグ、tfootタグの8種です。

簡単にいうと

という役割があります。それぞれをHTMLタグ全体の機能に割り当てて考えると、理解しやすいと思います。実際のそれぞれの役割を画像で書くと以下のようになります。

まず横の4つを囲っている緑の大きな線。これがtrタグです。横の行を全てひとくくりにします。

次にその下にあるtd部分が、それぞれデータを入れる実際の部分になります。エクセルでいうセル部分ですね。

そして全体的に囲んでいるのが、tableタグになります。

実際に簡単なソースコードと、完成品を見て見ましょう。

<table>
<tr><th>部品名</th><th>個数</th></tr>
<tr><td>○○</td><td>1</td></tr>
<tr><td>××</td><td>2</td></tr>
</table>

これをHTMLファイルに記載して実際に読み込むと表が完成しますが、CSSで色々といじっているので見た目は完全に異なりますがテキストの配置だけは確認できると思います。

部品名	個数
○○	1
××	2

こんな感じにthタグを使用した部分と、tdタグを使用した部分がそれぞれ位置関係がわかると思います。

ちなみにtbodyタグ、theadタグ、tfootタグはあってもなくても機能します。今回はまず表のそもそも構成と対応する箇所を覚えてもらいたいだけなのでその辺りは割愛します。

tableタグ固有の属性は無く、グローバル属性やイベント属性をサポートしています。どちらかというとtrタグ、tdタグそれぞれで使用する属性の方が重要なのでtableタグを使いこなしたい場合はそちらを重点的に覚えた方がいいと思います。

tableタグは単体では「表の定義」しか行わず、肝心のデータセルなどの表示や作成などは一切行いません。他のタグと一緒に使って初めて機能するので他のタグの使い方も覚えてしまいましょう。

tableタグを生成することができるページを公開しました。まだ色々と機能不足で基礎的なコードしか生成できませんが、今後もちまちま更新予定です。