HTML　テーブルの作り方と活用法：表組みの基本から応用まで

HTMLを使用したテーブルは、ウェブページで情報を整理するために非常に有用なツールです。テーブルは、複数の列と行を持ち、表形式でデータを表示することができます。

本記事では、HTMLのテーブルを作成する方法、境界線の設定方法、データセルやヘッダーセルの記述方法、セルの結合方法など、テーブル作成に必要な基本的な情報から応用的な方法までを紹介します。

HTMLでテーブルを作成する方法って、難しくないですか？

そんなに難しくはありませんよ。HTMLでテーブルを作成するには、< table >、< tr >、< th >、< td >といった要素を使用するだけです。

それぞれの要素について詳しく解説しましょう。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

HTMLでのテーブルについて

HTMLのテーブルは、データを格子状のレイアウトで表示するためのマークアップ要素です。テーブルは、表形式でデータを表示するのに非常に適しています。HTMLテーブルを作成するには、<table>要素を使用します。この要素は、テーブル全体を囲みます。

テーブル内の行を定義するには、<tr>要素を使用します。各行は、テーブル内の新しい行を表します。行内には、1つまたは複数のセルを持つことができます。

各セルは、<td>要素を使用して定義されます。この要素は、テーブル内の新しいセルを作成します。セル内には、テキストや画像などのコンテンツを配置することができます。

また、テーブルのヘッダー行を定義するには、<th>要素を使用します。この要素は、<td>要素と似ていますが、ヘッダー行のセルには、テーブルの列の見出しを記述するための特別な意味があります。

さらに、<thead>、<tbody>、<tfoot>要素を使用することで、テーブルの要素をグループ化することができます。これらの要素を使用することで、テーブルの読みやすさを向上させることができます。

HTMLテーブルは、情報の整理や視覚的な表現のために非常に便利です。また、CSSを使用してスタイルをカスタマイズすることができます。これにより、テーブルの外観やレイアウトを変更することができます。

表組の境界線を表示：border属性

HTMLのテーブルで表組みの境界線を表示するには、CSSを使用してスタイルを変更する必要があります。以下の2つの方法で表組みの境界線を表示することができます。

border属性を使用する方法

border属性を使用して、テーブルの境界線を指定することができます。以下は、border属性を使用してテーブルの境界線を表示する例です。

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>国</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>25</td>
    <td>日本</td>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>アメリカ</td>
  </tr>
  <tr>
    <td>Marie</td>
    <td>28</td>
    <td>フランス</td>
  </tr>
</table>

この例では、border属性に値1を設定しています。これにより、テーブルの境界線が表示されます。

CSSを使用する方法

CSSを使用して、テーブルの境界線を指定することができます。以下は、CSSを使用してテーブルの境界線を表示する例です。

table {
  border-collapse: collapse;
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
}

表組のデータセル：td要素

HTMLのテーブルでデータセルを記述するには、<td>要素を使用します。この要素は、テーブル内の新しいセルを作成します。以下は、基本的なHTMLテーブルの例です。

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>国</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>25</td>
    <td>日本</td>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>アメリカ</td>
  </tr>
  <tr>
    <td>Marie</td>
    <td>28</td>
    <td>フランス</td>
  </tr>
</table>

この例では、<td>要素を使用して、各行内のデータセルを定義しています。最初の行は、<th>要素を使用して、テーブルの列の見出しを定義しています。

< td >要素には、テキストや画像などのコンテンツを挿入することができます。以下は、テキストを含むデータセルの例です。

<td>太郎</td>

この例では、<td>要素内に「太郎」というテキストが含まれています。テキスト以外のコンテンツを含める場合は、<img>要素や<a>要素などを使用することができます。

また、<td>要素には、colspan属性やrowspan属性を使用して、セルを複数の行または列に跨がるように設定することもできます。

以上のように、<td>要素を使用してHTMLのテーブルのデータセルを定義することができます。

表組のヘッダセル：th要素

HTMLのテーブルでヘッダーセルを定義するには、<th>要素を使用します。この要素は、<td>要素と似ていますが、ヘッダーセルには、テーブルの列の見出しを記述するための特別な意味があります。

以下は、基本的なHTMLテーブルの例で、最初の行はヘッダー行で、ヘッダーセルは< th >要素を使用して定義されています。

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>国</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>25</td>
    <td>日本</td>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>アメリカ</td>
  </tr>
  <tr>
    <td>Marie</td>
    <td>28</td>
    <td>フランス</td>
  </tr>
</table>

この例では、最初の行は< tr >要素で定義され、列の見出しには< th >要素を使用しています。

ヘッダーセルは、通常、テーブル内のセルとは異なるスタイルを持っていることが多いため、CSSを使用してスタイルをカスタマイズすることができます。例えば、ヘッダーセルには、テキストを太字にしたり、背景色を変更したりすることができます。

また、colspan属性やrowspan属性を使用して、ヘッダーセルを複数の行または列に跨がるように設定することもできます。

以上のように、< th >要素を使用してHTMLのテーブルのヘッダーセルを定義することができます。

表組のタイトル：caption要素

HTMLのテーブルには、表のタイトルを定義するための< caption >要素を使用することができます。この要素は、< table >要素の直前に配置されます。以下は、基本的なHTMLテーブルの例です。

<table border="1">
  <caption>人口統計</caption>
  <tr>
    <th>都道府県</th>
    <th>人口</th>
    <th>増減率</th>
  </tr>
  <tr>
    <td>東京</td>
    <td>13515271</td>
    <td>0.9%</td>
  </tr>
  <tr>
    <td>大阪</td>
    <td>8839469</td>
    <td>-0.3%</td>
  </tr>
  <tr>
    <td>名古屋</td>
    <td>2316244</td>
    <td>1.1%</td>
  </tr>
</table>

この例では、< caption >要素を使用して、テーブルのタイトルを「人口統計」と定義しています。このタイトルは、テーブルの上部に表示されます。

テーブルのタイトルを定義することで、ユーザーがテーブルの内容をより簡単に理解することができます。また、タイトルは、視覚障害を持つユーザーやスクリーンリーダーを使用するユーザーにとっても重要です。

< caption >要素は、テーブル内の他の要素と同様に、スタイルをカスタマイズすることができます。例えば、文字色や背景色を変更したり、タイトルの位置を変更することができます。

以上のように、< caption >要素を使用してHTMLのテーブルのタイトルを定義することができます。

表組の結合（縦方向、横方向、グループ、縦列）

HTMLのテーブルでセルの結合を行うには、以下のように< td >要素や< th >要素にcolspan属性やrowspan属性を使用します。

横方向のセルの結合

横方向のセルの結合は、colspan属性を使用して行うことができます。以下は、2列分のセルを結合する例です。

<table border="1">
  <tr>
    <th>商品名</th>
    <th colspan="2">価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>80円</td>
    <td>120円</td>
  </tr>
</table>

この例では、2列分のセルを結合するために、< th >要素にcolspan属性を設定しています。この場合、2つのセルが1つに結合されます。

縦方向のセルの結合

縦方向のセルの結合は、rowspan属性を使用して行うことができます。以下は、2行分のセルを結合する例です。

<table border="1">
  <tr>
    <th>商品名</th>
    <td>りんご</td>
    <td>100円</td>
  </tr>
  <tr>
    <th rowspan="2">セット商品</th>
    <td>バナナ</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>オレンジ</td>
    <td>200円</td>
  </tr>
</table>

この例では、2行分のセルを結合するために、< th >要素にrowspan属性を設定しています。この場合、1つのセルが2行に跨がって表示されます。

グループ化されたセルの結合

HTMLのテーブルでグループ化されたセルの結合を行うには、< td >要素や< th >要素をグループ化するために< tbody >、< thead >、または< tfoot >要素を使用することができます。以下は、グループ化されたセルを結合する例です。

<table border="1">
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2">果物</th>
      <td>100円</td>
    </tr>
    <tr>
      <td>150円</td>
    </tr>
    <tr>
      <th rowspan="2">野菜</th>
      <td>80円</td>
    </tr>
    <tr>
      <td>120円</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <td>530円</td>
    </tr>
  </tfoot>
</table>

この例では、< tbody >要素と< tfoot >要素を使用して、グループ化されたセルの結合を行っています。< tbody >要素は、< td >要素のグループを定義し、< tfoot >要素は、テーブルのフッターのセルを定義します。

< th >要素には、rowspan属性を使用して、果物と野菜のセルを2つの行に跨がるように設定しています。そして、< td >要素は、セルの値を定義します。

以上のように、HTMLのテーブルでグループ化されたセルの結合を行うことができます。これにより、テーブルのデータをより効果的に表示することができます。

縦方向に連続する列の結合

縦方向に連続する列の結合は、colgroup要素を使用して、縦方向に連続する列を結合することができます。
以下は、colgroup要素を使用して縦方向に連続する列を結合する例です。

<table border="1">
  <colgroup>
    <col>
    <col span="3">
  </colgroup>
  <tr>
    <th>商品名</th>
    <th>価格1</th>
    <th>価格2</th>
    <th>価格3</th>
  </tr>
  <tr>
    <td rowspan="2">りんご</td>
    <td>100円</td>
    <td>150円</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>90円</td>
    <td>140円</td>
    <td>190円</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>80円</td>
    <td>120円</td>
    <td>160円</td>
  </tr>
</table>

この例では、< colgroup >要素を使用して、最初の列を単独の列とし、2列目から4列目までを1つのグループとして定義しています。そして、< col >要素には、< colgroup >要素で定義されたグループの中での位置を示すspan属性を設定しています。

< td >要素には、前回の回答と同じく、rowspan属性を設定して、りんごのセルを2つの行に跨がるように設定しています。

以上のように、colgroup要素を使用してHTMLのテーブルで縦方向に連続する列を結合することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

テーブル作成に必要な基本的な情報から応用的な方法までを解説しました。

とてもわかりやすい説明でした。特に、テーブルのセルの結合について、colspan属性やrowspan属性を使用する方法が参考になりました。

HTMLのテーブルを作成する方法は、基本的な要素を組み合わせることで簡単に実現できます。境界線の設定やセルの結合により、テーブルをより見やすくすることができます。

ただし、あまりに複雑なテーブルを作成する場合は、CSSを使用してデザインすることも考慮しましょう。テーブルを作成する際には、データを分かりやすく整理することが大切です。