Blog Post

情報を整理するテーブル系タグの使い方

　前回記事(情報を整理するリスト系タグの使い方)ではリスト系タグで表現する方法を解説しました。今回ではテーブル構造を作成する方法を解説します。

最小限のテーブル構成要素(tableタグ、trタグ、tdタグ)

　まずは最低限のテーブルを構成します。使用するタグはtableタグ、trタグ、tdタグです。

tdタグはセル1つ分、trタグは1行分、tabaleタグはテーブル全体です。このタグ構成で枠線なしの文字が並んだテーブルが作成できます。

html

<table>
<tr>
    <td>1行目の左</td>
    <td>1行目の右</td>
</tr>
<tr>
   <td>2行目の左</td>
   <td>2行目の右</td>
</tr>
</table>

テーブルの見出しを作る(thタグ)

　テーブルの中身を作成しましたが、行と列で見出しを付けたい場合はthタグを使用します。

左上を空白にしたい場合はthタグだけを入力します。thタグで囲んだ箇所は太字で中央ぞろえになります。

html

<table>
<tr>
    <th></th>
    <th>見出し1</th>
    <th>見出し2</th>
</tr>
<tr>
    <th>見出し1</th>
    <td>1行目の左</td>
    <td>1行目の右</td>
</tr>
<tr>
    <th>見出し2</th>
    <td>2行目の左</td>
    <td>2行目の右</td>
</tr>
</table>

見出しに行、列の情報を持たせる(thタグ、scope属性)

見出しを作成しましたが、thタグにscope属性を設定することで見出しがどの方向の見出しなのかがわかりやすくなります。

scope属性を設定することでアクセシビリティ向上とSEO対策になります。

html

<table>
<tr>
    <th></th>
    <th scope="col">列見出し1</th>
    <th scope="col">列出し2</th>
</tr>
<tr>
    <th scope="row">行見出し1</th>
    <td>1行目の左</td>
    <td>1行目の右</td>
</tr>
<tr>
    <th scope="row">行見出し2</th>
    <td>2行目の左</td>
    <td>2行目の右</td>
</tr>
</table>

テーブルヘッダーとテーブルのメインデータを定義する(theadタグ、tbodyタグ)

　テーブルの見た目は変わりませんが、theadタグとtbodyタグを使用することでテーブルの構造を正しく定義することができます。

theadタグはテーブルの一番上の見出し行を囲みます。そうすることでブラウザによっては長いテーブルを印刷する際に見出しを2ページ以降にも付与することができます。1テーブルで1回だけ使用できます。tobodyタグはテーブルのメイン部分を囲みます。テーブルデータをセクションごとに分けたい場合などにtobodyタグは1テーブルで複数回使用する場合があります。

theadタグとtbodyタグを使用することで見出しだけ装飾したり、JavaScriptでtbody範囲のみをソートしたりすることなどができ、処理を書きやすくなります。

html

<table>
    <thead>
    <tr>
        <th></th> 
        <th scope="col">列見出し1</th>
        <th scope="col">列見出し2</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">行見出し1</th>
            <td>1行目の左</td>
            <td>1行目の右</td>
        </tr>
        <tr>
            <th scope="row">行見出し2</th>
            <td>2行目の左</td>
            <td>2行目の右</td>
        </tr>
    </tbody>
</table>

セルの結合(colspan属性、rowspan属性)

　セルを結合したいときは結合したいセルのタグ(thタグ、tdタグのcolspan属性、rowspan属性を設定します。

行方向に結合したい場合はcolspan属性を設定します。設定する値は結合するセルの数です。

列方向に結合したい場合はrowspan属性を設定します。設定する値は同様に結合したいセルの数です。

html

<table>
    <thead>
        <tr>
            <th></th> 
            <th scope="col" colspan="2">列見出し1</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row" rowspan="2">行見出し1</th>
            <td>1行目の左</td>
            <td>1行目の右</td>
        </tr>
        <tr>
            <td>2行目の左</td>
            <td>2行目の右</td>
        </tr>
    </tbody>
</table>

テーブルタイトルやテーブルフッターを設定する(captionタグ、tfootタグ)

　テーブルにタイトルを設定したい場合はcaptionタグを使用します。

テーブルに各列の合計や注釈を設定したい場合はtfootタグを使用して設定します。注釈など1セルにしか値を設置しない場合はcolspan属性などでセルを結合することが多いです。

html

<table>
    <caption>テーブルのタイトル</caption>
    <thead>
        <tr>
            <th></th>
            <th scope="col">列見出し1</th>
            <th scope="col">列見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">行見出し1</th>
            <td>1行目の左</td>
            <td>1行目の右</td>
        </tr>
        <tr>
            <th scope="row">行見出し2</th>
            <td>2行目の左</td>
            <td>2行目の右</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">＊注釈</td>
        </tr>
    </tfoot>
</table>

<関連記事>

前回の記事　情報を整理するリスト系タグの使い方
次回の記事　HTMLでリンクを張る方法