【HTML】テーブル(表)の基本_Webの基礎知識

Webページの基礎、HTMLのテーブル要素についてです。

はじめに

大量のデータや情報を読みやすく、視覚的にも分かりやすく表示には、テーブル(表)で表示する方法が非常に便利です。この記事ではHTMLで表を作成する方法について学びます。

HTMLで表を作るには、タグが必要です。テーブル <table> タグで表の開始位置と終了位置を明示して表のコンテナを作成します。

スポンサーリンク

Amazonセールで上手に買い物する【必須情報】

Amazonセールで上手に買い物するための「必須情報」です。プライムデーやブラックフライデーなどのビッグセールのほかタイムセールなどをお得に利用できるようにするための情報が満載です。記事内にはAmazonの該当ページへのリンクを豊富に設置

www.kurumico.com

テーブル(表)を構成する要素

テーブル(表)を構成するには次の各要素を使います。

• <table> …【必須】テーブル(表)全体を <table> タグで囲み表コンテナで表します
• <tr> … テーブル内の行を表します(table row)
  • <td> … データセルを作成します(table data)　<tr>の子要素です
  • <th> … ヘッダーセルを表します(table header)　<tr>の子要素です
• <caption> … テーブルのキャプションを表します
• <colgroup> … テーブル内の列グループを表します(column group)
  • <col> … 列グループ内の列を表します。 <colgroup>の子要素です
• <thead> … テーブルのヘッダー(列見出し)となる行ブロックです(table header)
• <tbody> … テーブルのデータ本体となる行ブロックを表します(table body)
• <tfoot> … テーブルのフッターとなる行ブロックを表します(table footer)

テーブルを設定する基本の基本

<table>タグで表を作成することができますが、<table>タグ単独では表になりません。表形式のデータとするには、行と列の組み合わせによる二次元の表現を設定する必要があります。

<tr>と<td>タグで行とセルを指定します

テーブル(表)を作成するには、<table>～</table>タグで表全体を囲み、<tr>タグで行を指定し、<td>タグで列のセルを指定します。

<table>
  <tr>
    <td>セル1A</td>
    <td>セル1B</td>
    <td>セル1C</td>
  </tr>
  <tr>
    <td>セル2A</td>
    <td>セル2B</td>
    <td>セル2C</td>
  </tr>
</table>

HTMLをプレビューさせてみたテーブルの画像がこちらです。

<th>タグでヘッダーセルを追加します

<th>タグは、<td>タグと同じく列のセル指定ですが、ヘッダーの見出し部分を設定します。

<table>
  <tr>
    <th>見出しA</th>
    <th>見出しB</th>
    <th>見出しC</th>
  </tr>
  <tr>
    <td>セル1A</td>
    <td>セル1B</td>
    <td>セル1C</td>
  </tr>
  <tr>
    <td>セル2A</td>
    <td>セル2B</td>
    <td>セル2C</td>
  </tr>
</table>

<th>タグを追加したテーブルの表示が次のとおりです。

<th>タグで指定した部分は文字列が強調表示されています。<th>タグは、列見出しだけでなく行見出しにも設定できます。

テーブル(表)作成の基本の基本は、<table>～</table>タグで表全体を囲み、<tr>タグで行を指定し、<th>タグでヘッダーに見出しを、<td>タグでデータのセルを指定します。

基本のテーブルに要素を追加します

<caption> <colgroup> <col> <tbody> <thead> <tfoot> それぞれの要素についてどのような機能なのか見ていきます。

<caption> 表のキャプション要素

<caption>タグで表にキャプション（表について説明のために付け加えられた見出し）を任意で設定することができます。キャプションは表の上部に配置されます。キャプションを表の下部に配置したい場合や文字列の表示位置設定などは CSS で行います。

<table>
  <caption>「表のキャプション」</caption>
  <tr>
    <th>見出しA</th><th>見出しB</th><th>見出しC</th>
  </tr>
  <tr>
    <td>セル1A</td><td>セル1B</td><td>セル1C</td>
  </tr>
  <tr>
    <td>セル2A</td><td>セル2B</td><td>セル2C</td>
  </tr>
</table>

<caption>を付けるかどうかは任意です。

<colgroup> と <col> 列グループ要素

<colgroup>タグでテーブル(表)内の列グループを表します。列グループに class属性名を指定することができます。

<col>タグは、テーブル(表)内の列(個別または複数)を表します。列の属性を個別に指定することができます。<col>タグは、<colgroup>タグの子要素ですが単独でも機能します。

使用できる属性

属性の設定例：<colgroup 属性="属性値">～</colgroup>
<col 属性="属性値">～</col>

span

span属性は、<colgroup>がグループとしてまとめる列数を指定します。（初期値は 1 です）ただし、1 つ以上の <col> 要素が <colgroup> の中にある場合は指定は許可されません。

span属性は、<col>要素でもグループ内の並んでいる個別列をまとめる場合にも使用できます。

・３列の表をグループ化する場合、<colgroup span="3"> と記述します。
・並んでいる２列を指定する場合、<col span="2"> と記述します。

グローバル属性

これらの要素には グローバル属性 を使うことができます。主に使われる属性は、class と style です。

class属性は、列グループの class名を設定することでセレクターとしてCSSの適用に利用できます。

style属性は、要素に適用する CSSスタイルを設定できます。なお、スタイルは別のファイルで定義することが推奨されます。style属性を設定するのは、例えばテストのためにスタイルを適用する必要があるなどの場合に利用します。

属性の設定例

<colgroup class="グループ名" span="列数"></colgroup>
<col class="グループ名" span="列数"></col>
　

<colgroup> だけ設定したコード例

テーブルの列グループを <colgroup> に class属性 と span属性 を付けて設定した例です。
わかりやすくするために、style属性に”background-color”で緑色を加えています。

<table>
  <caption>「表のキャプション」</caption>
  <colgroup class="table-colg" span="3" style="background-color: #0f0">
  </colgroup>
  <tr>
    <th>見出しA</th><th>見出しB</th><th>見出しC</th>
  </tr>
  <tr>
    <td>セル1A</td><td>セル1B</td><td>セル1C</td>
  </tr>
  <tr>
    <td>セル2A</td><td>セル2B</td><td>セル2C</td>
  </tr>
</table>

<colgroup> と <col> を設定した例

次は、<col> タグで列グループ内の個列に class要素 と span属性 を付けて設定を加えた例です。
<colgroup> 内に <col> がある設定の場合、<colgroup> の span属性は外しています。
わかりやすくするため、最初の<col>だけに style属性に”background-color”で緑色を加えています。

<table>
  <caption>「表のキャプション」</caption>
  <colgroup class="table-colg">
    <col class="col-01" span="1" style="background-color: #0f0">
    <col class="col-02" span="2">
  </colgroup>
  <tr>
    <th>見出しA</th><th>見出しB</th><th>見出しC</th>
  </tr>
  <tr>
    <td>セル1A</td><td>セル1B</td><td>セル1C</td>
  </tr>
  <tr>
    <td>セル2A</td><td>セル2B</td><td>セル2C</td>
  </tr>
</table>

最初の列だけ背景が緑色になっています。

<thead>、<tfoot>、<tbody> 要素とは

それぞれについて見ていきましょう。

<thead>

<thead> は、テーブルのヘッダー(列の見出し)を定義している行ブロックを定義します。

<thead>タグで 0 個以上の <tr> 要素を終了タグ </thead> で囲います。

開始タグ <thead> は必須ですが、終了タグ </thead> は直後に <tbody> タグまたは <tfoot> タグがある場合には省略可能です。

この要素は グローバル属性 を使えます。

<tbody>

<tbody> は、テーブルのデータ本体となる行ブロックを定義します。

<tbody>タグで 0 個以上の <tr> 要素を終了タグ </tbody> で囲います。

開始タグ <tbody> は必須ですが、終了タグ </tbody> は直後に <tfoot> タグが続く場合には省略できます。

この要素は グローバル属性 を使えます。

<tfooot>

<tfoot> …… テーブルのフッターとなる行ブロックを定義します。

<tfoot>タグで 0 個以上の <tr> 要素を終了タグ </thead> で囲います。

開始タグ <tfoot> は必須ですが、終了タグ </tfoot> は <table> 要素内に以降のコンテンツがない場合は省略可能です。

この要素は グローバル属性 を使えます。

<thead>、<tfoot>、<tbody> を加えた例

<thead>、<tfoot>、<tbody> の設定と最初の列を <th> タグに変更して「行の見出し」に設定を変更しています。

<table>
  <caption>「表のキャプション」</caption>
  <colgroup class="table-colg">
    <col class="col-01" span="1">
    <col class="col-02" span="2">
  </colgroup>
  <thead style="background-color: red">
    <tr>
      <th>見出しA</th><th>見出しB</th><th>見出しC</th>
    </tr>
  </thead>
  <tbody style="background-color: yellow">
    <tr>
      <td>セル1A</td><td>セル1B</td><td>セル1C</td>
    </tr>
  </tbody>
  <tfoot style="background-color: pink">
    <tr>
      <td>セル2A</td><td>セル2B</td><td>セル2C</td>
    </tr>
  </tfoot>
</table>

結果のプレビュー画像です。

・<thead> は「red」、<tfoot> は「yellow」、<tbody> は「pink」の背景色を付けています。

・最初の列を <th> タグに変更した結果「行の見出し」として強調表示されてるのが確認できます。

・閉じタグの省略はしていません。

おわりに

スポンサーリンク

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません！

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！

【Excel VBA】サンプルファイル_ダウンロードのページ

【Excel VBA】の記事内で使ったサンプルファイルを（Zipファイルで）ダウンロードできるようにしました。記事内では細かい部分の解説が不十分ですが、実際にファイルをダウンロードして実行することで使えるのかどうか見ていただけたら幸いです。

www.kurumico.com