【HTML】tableタグを使いこなす

2020年11月17日 2024年4月1日

こんにちは！Kです！

前回はtableタグの基本的な使い方を紹介しました。

今回はtableタグをより使いこなせるように知っておいたら便利な知識をご紹介したいと思います！

セルを結合する

エクセルなど使ったことがあれば分かると思いますが、隣同士のセルが同じ内容だったりするときに、結合して表を見やすくすることがあると思います。

tableタグでもセルを結合する場合は、tdタグやthタグに「colspan」属性や「rowspan」属性を指定することで実現できます。

・ colspan="_"
   → 水平方向に結合

・ rowspan="_"
   → 垂直方向に結合

※ "_"は結合するセルの数を指定する

水平方向の結合（colspan属性）

<body>
    <table>
            <tr>
                <th colspan="2">サンプル項目1</th>
                <th>サンプル項目2</th>
            </tr>
            <tr>
                <td>サンプル1-1</td>
                <td>サンプル2-1</td>
                <td>サンプル3-1</td>
            </tr>
    </table>
</body>

ブラウザでの表示結果

サンプル項目1		サンプル項目2
サンプル1-1	サンプル2-1	サンプル3-1

垂直方向の結合（rowspan属性）

<body>
    <table>
            <tr>
                <th>サンプル項目1</th>
                <th>サンプル項目2</th>
　　　　　　　　　　　　　　　<th>サンプル項目3</th>
            </tr>
            <tr>
                <td>サンプル1-1</td>
                <td>サンプル2-1</td>
                <td rowspan="2">サンプル3-1</td>
            </tr>
            <tr>
                <td>サンプル1-2</td>
                <td >サンプル2-2</td>
            </tr>
    </table>
</body>

ブラウザでの表示結果

サンプル項目1	サンプル項目2	サンプル項目3
サンプル1-1	サンプル2-1	サンプル3-1
サンプル1-2	サンプル2-2	サンプル3-1

テーブルに説明を表示する

tableタグで表を作成した場合、表の上に何の表か示したい場合があります。

そのとき使うのが、「captionタグ」です。

tableタグ内の一番先頭にcaptionタグを記述することで説明を付けられます。

表に説明を付与する

<body>
    <table>
        <caption>サンプルテーブル</caption>
            <tr>
                <th>サンプル項目1</th>
                <th>サンプル項目2</th>
                <th>サンプル項目3</th>
            </tr>
            <tr>
                <td>サンプル1-1</td>
                <td>サンプル2-1</td>
                <td>サンプル3-1</td>
            </tr>
    </table>
</body>

ブラウザでの表示結果

サンプルテーブル
サンプル項目1	サンプル項目2	サンプル項目3
サンプル1-1	サンプル2-1	サンプル3-1

表の行をグループ化する

表の行をグループ化する場合、三つの要素（ヘッダー部分、ボディ部分、フッター部分）に分けることができます。

以下にその要素の名前と役割をまとめました。

<thead>
「table header」の略で、表のヘッダー行（水平方向）をグループ化するタグです。

<tbody>
表の行（水平方向）をグループ化するタグです。複数使用できます。
theadタグとtfootタグの間で使用します。

<tfoot>
「table footer」の略で、表のフッター行（水平方向）をグループ化するタグです。

ヘッダー、ボディ、フッターを明示することでソースコードも見やすくなります。
また、プリンターなどに表のヘッダーやフッターなどの情報を伝えるサポートができます。

具体的な例で見てみましょう。

コード例

<table> 
 <caption>商品テーブル</caption>
  <thead style="background:#ff8843">
   <tr>
    <th>サンプル商品名</th>
    <th>金額</th>
   </tr>
  </thead>
 
  <tbody style="background:#f2ff2e">
   <tr>
    <td>商品A</td>
    <td>1,000円</td>
   </tr>
  </tbody>

  <tbody style="background:#8dff78">
   <tr>
    <td>商品B</td>
    <td>2,000円</td>
   </tr>
  </tbody>
 
  <tfoot style="background:#87e9ff">
   <tr>
    <td>合計</td>
    <td>3,000円</td>
   </tr>
  </tfoot>
</table>