HTML Tables - サンプルコード付きの表作成チュートリアル

原文: HTML Tables – Table Tutorial with Example Code

もしあなたがデータを視覚的に表現する必要のあるプロジェクトを構築する場合、情報を読みやすく、分かりやすく表示する方法が必要になります。

HTML 要素を使って、データの種類に応じて異なる表示方法を選択することができます。

大抵の場合、大量のデータをうまく表示するのには表 (テーブル) が非常に便利です。そのため、この記事では HTML で表を使用する方法と、それをスタイルする方法について学びます。

まず初めに、HTML における表とはなんでしょうか？

HTML における表とは？

表とは、行と列にデータを配置して表示したものです。実際、表はスプレッドシートのようなものです。HTML では表を使用して、画像、テキスト、リンクなどのデータを行と列に配置できます。

ウェブにおける表の使用は、表の作成やデザインを簡単にしてくれる素晴らしい HTML table タグのおかげで、近年ますます人気になりました。

HTML で表を作るには、タグが必要です。最も重要なのは、表の主要なコンテナになる <table> タグです。これは、表の開始位置と終了位置を示します。

一般的な HTML Table タグ

その他のタグは、次の通りです。

• <tr> - 行を表す
• <td> - データセルの作成に使われる
• <th> - 表の見出しの追加に使われる
• <caption> - キャプションの追加に使われる
• <thead> - 表に別のヘッダーを追加する
• <tbody> - 表の本体を示す
• <tfoot> - 表に別のフッターを作成する

HTML Table 構文:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

HTML table の概要とその作成方法を理解したところで、これらのタグを使用してより多くの機能を備えた表の作成方法を見てみましょう。

HTML で表の見出しを追加する方法

<th> は、表に見出しを追加するために使用されます。基本的なデザインでは、表の見出しは常に一番上の行になります。つまり、表の最初の行で <th> が宣言され、その後に表内の実際のデータが続きます。デフォルトでは、見出しになるテキストは中央揃えで太字になります。

<th> の使用例

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>developer@mail.com</td>
  </tr>
</table>

上記の例を見ると、どの列にどの情報が含まれているかがわかります。これは、<th> タグを使っているおかげです。

表にキャプションを追加する方法

表にキャプションを追加する主な用途は、表に表示されるデータに関する説明を提供することです。キャプションは表の上部または下部に配置でき、デフォルトでは常に中央に配置されます。

表にキャプションを挿入するには、<caption> タグを使用します。

Caption 構文

<table>
  <caption></caption>
  <tr> </tr>
</table>

<caption> の使用例

<table>
  <caption>Free Coding Resources</caption>
  <tr>
    <th>Sites</th>
    <th>Youtube Channels</th>
    <th>Mobile Appss</th>
  </tr>
  <tr>
    <td>Freecode Camp</td>
    <td>Freecode Camp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>Solo learn</td>
  </tr>
</table>

HTML のテーブルにおける Scope 属性の使用方法

scope 属性は、特定のヘッダーが列、行、またはそのグループのどれを対象としているかを定義するために使用されます。定義を理解するのは難しいかもしれませんが、大丈夫です。例を見れば理解しやすくなります。

scope 要素の主な目的は、対象のデータを示すことにより、ユーザーが推測に頼る必要を無くすことです。属性はヘッダーセル <th> で宣言され、col、row、colgroup、rowgroup の値を取ります。

col と row の値は、ヘッダーセルがそれぞれ行または列の情報を提供していることを示します。

Scope 構文

<table>
 <tr>
   <th scope="value">
 </tr>
</table>

<scope> の使用例

<table>
  <tr>
    <th></th>
    <th scope="col">Semester</th>
    <th scope="col">Grade</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Jan - April</td>
    <td>Credit</td>
  </tr>

  <tr>
    <td>2</td>
    <td>May - August</td>
    <td>Pass</td>
  </tr>
    
  <tr>
    <td>2</td>
    <td>September - December</td>
    <td>Distinction</td>
  </tr>
</table>

ここで scope 属性は、ヘッダーセルが列、行、またはそのグループのどれに属しているかを示しました。

上の例では、コードに設定した通り、ヘッダーは列に属しています。属性を変更することで、さまざまな動作を確認できます。

HTML のテーブルにおけるセル結合の使用方法

表内の 2 つ以上の列、または行にまたがるセルを見たことがあるのではないでしょうか。これは、セル結合と呼ばれます。

MS Office や Excel などのプログラムで作業したことがあれば、セルを選択してコマンドをクリックすることで、セル結合の機能を使っていたことでしょう。

同じ機能を HTML table に適用するには、2 つのセル属性 (水平結合用の colspan と垂直結合用の rowspan) を使用します。2 つの属性には、結合するセルの数を示す 0 より大きい数値が割り当てられます。

span の使用例

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td rowspan = "2">Hillary</td>
    <td>Advanced Web</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Operating Syatem</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">Lary</td>
    <td>Advanced Web</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Operating Syatem</td>
    <td>75</td>
  </tr>
  <tr>
    <td colspan="3">Total Average: 72.5</td>
  </tr>
</table>

上記の例では、コードに記述した通り、複数行の 2 つのセル、複数列の 3 つのセルにまたがるセルがあります。結合を垂直方向と水平方向の両方に適用することができました。

属性 colspan および rowspan を使用する場合は、セルが重複しないように、正しい値が割り当てられていることを確認してください。

HTML のテーブルに表ヘッダー、本体、フッターを追加する方法

Web サイトやその他のドキュメントに 3 つの主要なセクション (ヘッダー、本文、フッター) があるように、表にも同じものがあります。

表では、次の属性によって分割されます。

• <thead> - 表に別のヘッダーを提供する
• <tbody> - 表の主要なコンテンツを含む
• <tfoot> - 表に別のフッターを作成する

<thead>、<tbody>、<tfoot> の使用例

<table>
  <thead>
    <tr>
      <th colspan="2">October</th>
      <th colspan="2">November</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Sales</td>
      <td>Profit</td>
      <td>Sales</td>
      <td>Profit</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th colspan= "4">November was more produstive</th>
    </tr>
  </tfoot>
</table>

上記の例では、月の名前がヘッダー、売上高と利益の両方の数値を持つ部分が表本体、最後に説明文の部分が表のフッターにあたります。

注意すべきもう 1 つの重要な点は、表には複数の本体部分 (tbody) を含めることができるということです。このような場合、各本体は関連する行をグループ化します。

CSS を使用して HTML のテーブルをスタイルする方法

表は現在広く使用されていますが、スタイルが設定されていない表を見つけることは非常に稀です。ほとんどの表には、色、フォント、重要な値の強調表示など、さまざまな形式のスタイルが使われています。

スタイリングは、表をプロフェッショナルで魅力的に見せるのに役立ちます。結局のところ、1 本の線だけで区切られたデータを読み手に見せたくはないですよね。

他の言語やツールでのスタイリングとは異なり、HTML では、.css 拡張子を持つ追加のファイルを使う必要があります。このファイルにスタイルを追加して、HTML ファイルにリンクします。

以下に、スタイル付き表の例を含むコードプレイグラウンドが添付されています。さまざまなスタイルが表示にどのように影響するか、自由に試してみてください。

上記のコードプレイグラウンドでは、表を作成し、この記事で説明したいくつかの属性を使用してスタイルを設定しました。

CSS ファイルを使用してスタイルを設定し、表に色と境界線を追加して、読みやすく美しくしました。表には固定ヘッダーもあるため、大量のデータをスクロールしても特定の列のヘッダーを表示できます。

ここまで、表とは何かを学び、表をいくつか作成し、さらに一歩先を行ってスタイリングを適用しました。

しかし、知識があってもそれを適用する方法を知らなければ、何の役にも立ちません。では、デザインのどこで、またはいつ表を利用するべきでしょうか？

Table を使用すべきとき

プロジェクトを開発する際に表が役立つ状況は数多くあります。

• A チームとB チームの差、X チームの得点とY チームの得点など、共通の特徴を持つデータを比較対照したい場合に、表を使用できます。
• 数値データの概要を知らせたい場合にも使用できます。学生の成績や、EPL テーブル (サッカーの大会結果の表) のようにチームの得点を表示したい場合が良い例です。
• また、表は、整頓された特定の情報を読み手がすばやく見つけるのに役立ちます。例えば、たくさんの名前のリストを調べる場合、表を使用してリストを細分化し、読みやすくできます。

まとめ

テーブルは、表形式のデータを表す優れた方法であり、<table>、<tr>、<td> などの基本的な HTML 要素を使用して作成できます。

また、スタイルを追加して見栄えを良くし、CSS ファイルを使用してデータを明確に表示することもできます。

最後に、もう 1 つタスクを実行しましょう。

今日の記事で取り上げたことを要約するために、学んだことを使用して表を作成しましょう。その後、以下のピン留めされたコードプレイグラウンドとあなたのデザインを比較してみてください。