• HOME > 
  • HTML > 
  • HTMLのtable(テーブル)タグの使い方

HTMLのtable(テーブル)タグの使い方

投稿日:

このページには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>18歳</td></tr>
        <tr><td>鈴木次郎</td><td>22歳</td></tr>
        <tr><td>佐藤三郎</td><td>36歳</td></tr>
    </table>
名前年齢
山田太郎18歳
鈴木次郎22歳
佐藤三郎36歳

・項目名のセルは<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>18歳</td></tr>
            <tr><td>鈴木次郎</td><td>22歳</td></tr>
            <tr><td>佐藤三郎</td><td>36歳</td></tr>
        </table>
    
名前年齢
山田太郎18歳
鈴木次郎22歳
佐藤三郎36歳

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

余白は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>18歳</td></tr>
            <tr><td>鈴木次郎</td><td>22歳</td></tr>
            <tr><td>佐藤三郎</td><td>36歳</td></tr>
        </table>
    
名前年齢
山田太郎18歳
鈴木次郎22歳
佐藤三郎36歳

セルを結合する

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

横のセルを結合する場合は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>18歳</td></tr>
            <tr><td>鈴木次郎</td><td>22歳</td></tr>
            <tr><td>佐藤三郎</td><td>36歳</td></tr>
            <tr><th rowspan="3">グループB</th><td>田中四郎</td><td>45歳</td></tr>
            <tr><td>太田五郎</td><td>51歳</td></tr>
            <tr><td>山本花子</td><td>60歳</td></tr>
        </table>
    
会員リスト
グループ名前年齢
グループA山田太郎18歳
鈴木次郎22歳
グループB田中四郎45歳
太田五郎51歳

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

列を交互に色分けする

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>18歳</td></tr>
            <tr><td>鈴木次郎</td><td>22歳</td></tr>
            <tr><td>佐藤三郎</td><td>36歳</td></tr>
            <tr><td>田中四郎</td><td>42歳</td></tr>
            <tr><td>太田五郎</td><td>51歳</td></tr>
            <tr><td>山本花子</td><td>60歳</td></tr>
        </table>
    
名前年齢
山田太郎18歳
鈴木次郎22歳
佐藤三郎36歳
田中四郎42歳
太田五郎51歳
山本花子60歳

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>18歳</td></tr>
            <tr><td>鈴木次郎</td><td>22歳</td></tr>
            <tr><td>佐藤三郎</td><td>36歳</td></tr>
        </table>
    
名前年齢
山田太郎18歳
鈴木次郎22歳
佐藤三郎36歳

<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>18歳</td></tr>
            <tr><th>鈴木次郎</th><td>22歳</td></tr>
            <tr><th>佐藤三郎</th><td>36歳</td></tr>
        </table> 
    
山田太郎18歳
鈴木次郎22歳
佐藤三郎36歳

行数や列数が多い場合には使いづらい方法です。

まとめ

<table>タグは表としての使い道はもちろん、横並びを実現できるのでレイアウトの組み立てにも活用できるので便利なタグの一つです。

広告
広告

関連する記事

サムネイル

HTMLのテキストボックスにクリアボタンを実装【inputの……

2024年09月04日
inputのtype属性を「search」にすれば自動的にクリアボタンが表示されます。簡単ですがデザインはブラウザに依存しておりカスタマイズはできません。JSを使って処理を自作する方法は、HTML・CSS・JSに関するある程度の知識が必要ですが、自由にカスタマイズできます。
サムネイル

HTMLのinputのdateで日付の入力欄を作る【初期値や……

2023年10月01日
最終更新日:2023年09月28日
HTMLのinputタグのtype属性にdateを指定すると、フォームなどに日付の入力欄を設置することができます。
サムネイル

ブラウザキャッシュを回避するCache Bustingの方法……

2023年09月01日
Cache Busting(キャッシュバスティング)とはキャッシュを利用せずに読み込みするように指定することです。
サムネイル

HTMLのdatalistタグの使い方【文字入力とプルダウン……

2023年08月08日
HTMLのdatalistは、テキストボックスとセレクトボックスを組み合わせたような入力欄を作ることができるタグです。一見普通のテキストボックスですが、クリックすると用意した入力候補が表示されます。
サムネイル

HTMLでラジオボタンを作成する方法【初期値の設定・チェック……

2023年08月08日
HTMLのinputタグのtype属性にradioを指定すると、フォームなどにラジオボタンを設置することができます。複数の選択肢の中からどれかひとつをユーザーに選んでもらいたい時に使用します。
サムネイル

HTMLのselectタグの使い方【multiple属性で複……

2023年08月03日
HTMLのselectはフォームなどにセレクトボックスを設置することができるタグです。あらかじめ用意した選択肢をプルダウンの形で表示させます。
サムネイル

HTMLのtextareaタグの使い方【inputとの違いや……

2023年07月10日
HTMLのtextareaはフォームなどに改行可能な入力ボックスを作成することができるタグです。属性値を設定することで幅や行数などを変更することが可能です。