HTMLのtable（テーブル）タグの使い方

投稿日:2020年12月15日（最終更新日:2022年01月27日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

<table>タグとは？

WEBサイトに表を表示させたい場合にHTMLの<table>（テーブル）タグを使用します。

単に表の作成に利用するだけでなく、サイトのレイアウトの構成に使用することも多く、使い方次第でさまざまな表示に応用できる便利なタグとなっています。

<table>タグの記述の仕方

<table>タグは、<table>タグの中でだけ使用することが出来る<thead>タグ、 <tbody>タグ、<tfoot>タグ、<tr>タグ、<th>タグ、<td>タグを合わせて記述することで表を作成します。

※<thead>タグ、<tbody>タグ、<tfoot>タグは省略可能です。

    <table border="1">
        <tr><th>名前</th><th>年齢</th></tr>
        <tr><td>山田太郎</td><td>１８歳</td></tr>
        <tr><td>鈴木次郎</td><td>２２歳</td></tr>
        <tr><td>佐藤三郎</td><td>３６歳</td></tr>
    </table>

名前	年齢
山田太郎	１８歳
鈴木次郎	２２歳
佐藤三郎	３６歳

・項目名のセルは<th>タグ、それ以外のセルには<td>タグを使用します。
<table>タグにborder="1"をしてすることで枠線を表示させることが出来ます。

<table>タグのカスタマイズ方法

テーブル要素のデザインはCSSで変更することが可能です。

セル同士の隙間を無くす

デフォルトの状態ではセル（枠）同士の間に隙間がありますが、これも無くすことが出来ます。

        <style>
            .table_sample{
                border-collapse: collapse;
            }
        </style>
        <table class="table_sample" border="1">
            <tr><th>名前</th><th>年齢</th></tr>
            <tr><td>山田太郎</td><td>１８歳</td></tr>
            <tr><td>鈴木次郎</td><td>２２歳</td></tr>
            <tr><td>佐藤三郎</td><td>３６歳</td></tr>
        </table>

名前	年齢
山田太郎	１８歳
鈴木次郎	２２歳
佐藤三郎	３６歳

余白や文字揃えを調整する

余白はpaddingプロパティ、左右の文字揃えはtext-alignプロパティで変更することが出来ます

        <style>
        .table_sample2{
            width:100%;
            border-collapse: collapse;
        }
        .table_sample2 th,.table_sample2 td{
            padding:10px;
            text-align:left;
        }
        .table_sample2 th{
            background: #e9e9e9;
        }
        </style>
        <table class="table_sample2" border="1">
            <tr><th>名前</th><th>年齢</th></tr>
            <tr><td>山田太郎</td><td>１８歳</td></tr>
            <tr><td>鈴木次郎</td><td>２２歳</td></tr>
            <tr><td>佐藤三郎</td><td>３６歳</td></tr>
        </table>

名前	年齢
山田太郎	１８歳
鈴木次郎	２２歳
佐藤三郎	３６歳

セルを結合する

２つ以上のセルを結合して大きな一つのセルにすることが出来ます。

横のセルを結合する場合はcolspan、縦のセルを結合する場合はrowspanで何個分のセルを結合するか指定します。

        <style>
            .table_sample3{
                width:100%;
                border-collapse: collapse;
            }
            .table_sample3 th,.table_sample3 td{
                padding:10px;
                text-align:left;
            }
            .table_sample3 th{
                background: #e9e9e9;
            }
        </style>
        <table class="table_sample3" border="1">
            <tr><th colspan="3" style="text-align:center;">会員リスト</th></tr>
            <tr><th>グループ</th><th>名前</th><th>年齢</th></tr>
            <tr><th rowspan="3">グループA</th><td>山田太郎</td><td>１８歳</td></tr>
            <tr><td>鈴木次郎</td><td>２２歳</td></tr>
            <tr><td>佐藤三郎</td><td>３６歳</td></tr>
            <tr><th rowspan="3">グループB</th><td>田中四郎</td><td>４５歳</td></tr>
            <tr><td>太田五郎</td><td>５１歳</td></tr>
            <tr><td>山本花子</td><td>６０歳</td></tr>
        </table>

会員リスト
グループ	名前	年齢
グループA	山田太郎	１８歳
グループA	鈴木次郎	２２歳
グループB	田中四郎	４５歳
グループB	太田五郎	５１歳

・上記は「会員リスト」のセルを横に３つ分結合したいのでcolspanに３を、「グループA」と「グループB」のセルを縦に２つ結合したいのでrowspanに２をそれぞれ指定しています。
・セルの個数を合わせないと表示が崩れるので注意が必要です。

列を交互に色分けする

CSSで見やすいように交互に色分けすることも出来ます。

        <style>
            .table_sample4{
                width:100%;
                border-collapse: collapse;
            }
            .table_sample4 th,.table_sample4 td{
                padding:10px;
                text-align:left;
            }
            .table_sample4 th{
                background:#c9c9c9;
            }
            .table_sample4 tr:nth-child(odd) td{
                background: #e9e9e9;
            }
        </style>
        <table class="table_sample4" border="1">
            <tr><th>名前</th><th>年齢</th></tr>
            <tr><td>山田太郎</td><td>１８歳</td></tr>
            <tr><td>鈴木次郎</td><td>２２歳</td></tr>
            <tr><td>佐藤三郎</td><td>３６歳</td></tr>
            <tr><td>田中四郎</td><td>４２歳</td></tr>
            <tr><td>太田五郎</td><td>５１歳</td></tr>
            <tr><td>山本花子</td><td>６０歳</td></tr>
        </table>

名前	年齢
山田太郎	１８歳
鈴木次郎	２２歳
佐藤三郎	３６歳
田中四郎	４２歳
太田五郎	５１歳
山本花子	６０歳

nth-child()は複数あるセレクタに対し何番目か順番を指定することが出来ます。今回は数字ではなくodd＝奇数を指定することにより、奇数番目のtr=行の色を一括して変更しています。

テーブルのレスポンシブ対応

テーブルは性質上、横に長くなることが多くスマホなどで見るとつぶれて見づらくなってしまうので、画面サイズに合わせた表示方法の切替が必要です。

スクロールして見れるようにする

横幅や高さを固定して画面からはみ出した部分はスクロールして見てもらうようにする方法です。

        <style>
            .table_sample5{
                width:600px;
                border-collapse: collapse;
            }
            .table_sample5 th,.table_sample5 td{
                padding:10px;
                text-align:left;
            }
            .table_sample5 th{
                background: #e9e9e9;
            }
            .frame{
                width:400px;
                overflow-x: scroll;
            }
        </style>
        <div class="frame">
        <table class="table_sample5" border="1">
            <tr><th>名前</th><th>年齢</th></tr>
            <tr><td>山田太郎</td><td>１８歳</td></tr>
            <tr><td>鈴木次郎</td><td>２２歳</td></tr>
            <tr><td>佐藤三郎</td><td>３６歳</td></tr>
        </table>

名前	年齢
山田太郎	１８歳
鈴木次郎	２２歳
佐藤三郎	３６歳

<table>タグを幅を指定したdivで囲み、overflow:scrollを指定することでスクロールできるようになります。

テーブルを縦並びにする

テーブルを構成するタグには初期設定でdisplay:tableやdisplay:table-cellが指定されています。この値をblockに変更すればテーブルの機能が失われ他のタグ同様に縦に連なるようになります。

        <style>
            .table_sample,.table_sample6 th,.table_sample6 td{
                display: block;
            }
            .table_sample6{
                max-width:600px;
                border-collapse: collapse;
            }
            .table_sample6 th,.table_sample6 td{
                padding:10px;
                text-align:left;
            }
            .table_sample6 th{
                background: #e9e9e9;
            }
        </style>
        <table class="table_sample6" border="1">
            <tr><th>山田太郎</th><td>１８歳</td></tr>
            <tr><th>鈴木次郎</th><td>２２歳</td></tr>
            <tr><th>佐藤三郎</th><td>３６歳</td></tr>
        </table>