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

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

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

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

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

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

では一行で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です。こちら覚えておきましょう。

<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>

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

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

今度は縦方向に結合しています。このように『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>

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

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

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

著者が愛する小型哺乳類

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

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア