Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. HTML5入門編 - テーブル(表)を作ってみよう

テーブル(表)を作ってみよう

みなさまどうもこんにちわ。

続きまして『テーブル』について勉強していきましょう。テーブルとは『表』のことです。今回はHTMLで『表』を作ってみましょう。

まずは表においての用語解説です。表のマス目ひとつひとつを『セル』と呼びます。横並びのセルのまとまりを『』と呼びます。縦並びのセルのまとまりを『』と呼びます。

↓列↓列
行→セルセル
行→セルセル
行→セルセル

エクセルなどでもよく使われる言葉ですね。

htmlで表を作成する場合に主に使用する要素は『table要素』、『tr要素』、『th要素』、『td要素』の4つです。

では一行で3つのセルが入った表を作成してみましょう。以下が完成イメージです。

セル1セル2セル3

上記のようにデフォルトの状態では境界線がなく隙間がないので分かりづらいですがこれも『table』タグを使ってちゃんと『表』としてマークアップしています。CSSを使うと境界線とか隙間とか入れられるのですが今回はデフォルトの状態の表を作っていきましょう。

では作成手順です。HTMLで表を作成するにはまず『table』タグを記述します。

<table></table>

これが表の大枠となります。この状態では中身が空なので『行』を定義するtrタグと『セル』を定義する『td』タグを使って中身を記入していきましょう。

一行で3つのセルが入った表を作成するので『tr』タグが1つ、その中に『td』タグを3つ記述します。

<table>
    <tr>
        <td>セル1</td>
        <td>セル2</td>
        <td>セル3</td>
    </tr>
</table>

できましたでしょうか。これを保存してブラウザで表示してみてください。先ほどの表と同じようになっていればOKです。

続いて『th』タグを使用してみましょう。

これは『td』タグと同じくセルを定義するタグですが、『th』タグを使用すると『見出しセル』として定義されます。『h1』タグなどと同じような感じですね。見出しとして設定したいセルを『th』要素にしてしまえばOKです。デフォルトの状態だと文字が太字になったりします。以下にデフォルトの状態のサンプルを用意したのでみてみてください。

サンプルをみてみる。

表示しているブラウザによって多少の差があるかと思いますが太字になっているかと思います。ではこの『th』要素を記述していきましょう。行が一行増えるので先ほどの『tr』タグの上にもう1つ『tr』タグを記述します。閉じタグを忘れないようにしてくださいね。

<table>
    <tr>
    </tr>
    <tr>
        <td>セル1</td>
        <td>セル2</td>
        <td>セル3</td>
    </tr>
</table>

追加した『tr』タグのなかに『th』タグを置いていきましょう。

<table>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
        <th>見出し3</th> 
    </tr>
    <tr>
        <td>セル1</td>
        <td>セル2</td>
        <td>セル3</td>
    </tr>
</table> 

これで完成です。保存してブラウザで確認してみましょう。先ほどのサンプルのように表示されましたでしょうか。

tableタグ系はちょっと入れ子関係が複雑になりがちなので閉じタグ忘れなどしないように注意してくださいね。

さて、ちょっと注意点でございますが、『td』要素、『th』要素は『table』要素の子要素にする必要がありますので『table』要素の外に出すことはNGです。こちら覚えておきましょう。

テーブルを構成する要素の『td』要素、『th』要素以外に『thead』要素、『tfoot』要素、『tbody』要素が存在します。これはテーブル内でヘッダー部分、本体部分、フッター部分を明示的に分けることができる要素です。

記述例は以下のような感じになります。

<table class="table_border">
    <thead>
        <tr>
            <th>thead要素の中のth要素</th>
            <th>thead要素の中のth要素</th>
            <th>thead要素の中のth要素</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tbody要素の中のtd要素</td>
            <td>tbody要素の中のtd要素</td>
            <td>tbody要素の中のtd要素</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>tfoot要素の中のtd要素</td>
            <td>tfoot要素の中のtd要素</td>
            <td>tfoot要素の中のtd要素</td>
        </tr>
    </tfoot>
</table>
thead要素の中のth要素 thead要素の中のth要素 thead要素の中のth要素
tbody要素の中のtd要素 tbody要素の中のtd要素 tbody要素の中のtd要素
tfoot要素の中のtd要素 tfoot要素の中のtd要素 tfoot要素の中のtd要素

『thead』要素、『tfoot』要素は『table』要素の中に必ず一つ、『tbody』要素は複数設置することができます。

この『thead』要素、『tfoot』要素、『tbody』要素は入れても入れなくても構いません。ほとんどの場合入れる必要はなかったりします。『thead』要素、『tfoot』要素、『tbody』要素を使用すればHTMLのテーブル構造の意味分けがはっきり定義できるというメリットがありますが、昨今ではCSSやJavaScriptで要素を特定するためだけの目的で使用されることが多いです。なので特に目的がなければ省略してしまって構いません。最近のほぼ全てのブラウザは省略してもブラウザ側で『tbody』要素のみ自動補完されるレンダリングになっています。

そしてヘッダー部分、本体部分、フッター部分はこういう内容ならこれを該当させれば良い、などとはっきり定義されているわけではありません。なので、内容を吟味して「ここは本体だな、これはヘッダーだな」とご自身で決定しちゃってOKです。例えば見出しになりそうなところを『thead』要素で包んだり、数値を表にしているのであればその合計値を『tfoot』要素にしたりといった感じですね。

昔のHTMLではborder属性というのを使用して境界線を構築していたのですが、html5ではborder属性は非推薦となっています。境界線を設定したい場合はCSSで指定するようにしましょう。

さて、続いてセルを結合する『colspan』属性と『rowspan』属性を紹介します。以下のサンプルをみてみてください。ちょっとデフォルトの状態だと分かりづらいのでCSSで境界線と隙間を入れています。

colspanに3を設定しているよ!
セル1セル2セル3

上記のサンプルは『colspan』属性に『3』と設定しています。横方向に結合していますね。続いて以下が『rowspan』属性のサンプルです。

rowspanに3を設定しているよ!セル2セル3
セル2セル3
セル2セル3

今度は縦方向に結合しています。このように『colspan』属性と『rowspan』属性を使用するとセルを結合させることができます。『colspan』属性は横方向、『rowspan』属性は縦方向の結合になります

では記述方法の確認です。まずは『colspan』属性からですね。『colspan』属性に入れる値は結合させたい数だけ数値をいれてあげればOKです。単位もなにもいりません。以下のような感じです。

<table>
    <tr>
        <td colspan="3">colspanに3を設定しているよ!</td>
    </tr>
    <tr>
        <td>セル1</td><td>セル2</td><td>セル3</td>
    </tr>
</table>

『colspan』属性を指定した要素から指定された値の分だけ右方向へ結合されます。続いて『rowspan』属性ですがこれも『colspan』属性と同じように値に縦方向に結合したい数だけ数値をいれてあげればOKです。

<table>
    <tr>
        <td rowspan="3">rowspanに3を設定しているよ!</td><td>セル2</td><td>セル3</td>
    </tr>
    <tr>
        <td>セル2</td><td>セル3</td>
    </tr>
    <tr>
        <td>セル2</td><td>セル3</td>
    </tr>
</table>

そして『colspan』属性と『rowspan』属性を同時に設定することができます。同時に設定すると以下のようなレンダリングになりますね。
※以下のサンプルは分かりやすいようにCSSで境界線と隙間を入れています。

<table>
    <tr>
        <td colspan="3" rowspan="3">colspanとrowspanに3を設定しているよ!</td><td>セル2</td><td>セル3</td>
    </tr>
    <tr>
        <td>セル2</td><td>セル3</td>
    </tr>
    <tr>
        <td>セル2</td><td>セル3</td>
    </tr>
</table>
colspanとrowspanに3を設定しているよ!セル2セル3
セル2セル3
セル2セル3

横方向と縦方向に3つ結合されているのが確認できたと思います。『colspan』属性と『rowspan』属性の使い方はこんな感じですね。

というわけでテーブルの解説は以上となります。次の記事ではリストについて勉強していきます。引き続き頑張っていきましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。