【HTML】tableタグで表のつくり方｜セル幅・余白の調整からテーブルの装飾までわかりやすく解説

HTML tableタグで表を作成する基本

HTMLのtableタグを使うことで、ウェブページ上に表を簡単に作成することができます。表はデータを整理して表示するのに便利であり、情報を視覚的にわかりやすく伝えることができます。まずは、tableタグの基本から学びましょう。

tableタグとは

tableタグは、HTMLで表を作成するためのタグです。このタグを使うことで、行と列からなる表を定義し、その中にデータを配置することができます。基本的な構造としては、tableタグの中にtr（行）タグを使い、さらにその中にtd（セル）タグを使ってデータを配置します。

<table>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

このように記述することで、2行2列の表を作成することができます。次に、tableタグの基本要素について詳しく見ていきましょう。

tableタグの基本要素

tableタグを使って表を作成する際に重要な基本要素には、主に以下の3つがあります。それぞれの役割を理解することで、より複雑で機能的な表を作成することができます。

th

thタグは、表のヘッダーセルを定義するためのタグです。通常、表の最初の行や列に配置され、見出しとして使用されます。thタグで囲まれたテキストはデフォルトで太字になり、中央揃えになります。例えば、以下のコードでは、表の最初の行に「見出し1」と「見出し2」というヘッダーを作成しています。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
</table>

[出力イメージ]

このようにすることで、見出しが強調され、データの内容が分かりやすくなります。

tr

trタグは、表の行を定義するためのタグです。tableタグの中に複数のtrタグを配置することで、複数の行を作成することができます。各trタグの中には、セルを定義するthタグやtdタグを配置します。

以下の例では、2行の表を作成しています。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

[出力イメージ]

各trタグは新しい行を作成し、その中にセルを配置することで、表の行と列が構成されます。

td

tdタグは、表のセルを定義するためのタグです。trタグの中に配置され、実際のデータを表示します。tdタグで囲まれたテキストは、デフォルトで左揃えになります。

以下の例では、3行2列の表を作成しています。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

[出力イメージ]

このように、各行の中に複数のtdタグを配置することで、表の各セルにデータを挿入することができます。

これらの基本要素を理解することで、HTMLでの表作成が容易になります。次に、表のセルの幅や余白の調整方法について詳しく学びましょう。

tableタグの表のセルの幅・余白を調整する方法

HTMLのtableタグを使用して表を作成した後、セルの幅や高さ、余白を調整することで、より見やすく、使いやすい表を作成することができます。ここでは、それぞれの調整方法について詳しく解説します。

ピクセルとパーセントの設定

セルや表全体の幅や高さを設定する際、単位としてピクセル（px）やパーセント（%）を使用することができます。ピクセルは絶対的な値で、パーセントは親要素に対する相対的な値です。ピクセルを使用するときは具体的なサイズを設定でき、パーセントを使用するときはレスポンシブデザインに適しています。

<table style="width: 100%;">
  <tr>
    <td style="width: 50%;">セル1</td>
    <td style="width: 50%;">セル2</td>
  </tr>
</table>

[出力イメージ]

width属性：幅を変える

幅を調整する一般的な方法は、width属性の使用です。以下では、width属性を使用して表全体やセルの幅を変える方法を紹介します。

表全体の幅を変える

表全体の幅を変えるためには、tableタグにwidth属性を設定します。以下の例では、表の幅を500ピクセルに設定しています。

<table width="500">
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

[出力イメージ]

セルの幅を変える

セルの幅を変えるためには、tdタグやthタグに対してwidth属性を設定します。以下の例では、各セルの幅を50%に設定しています。

<table>
  <tr>
    <td width="50%">データ1</td>
    <td width="50%">データ2</td>
  </tr>
</table>

[出力イメージ]

height属性：高さを変える

次に、セルや表全体の高さを調整するための方法について説明します。

表全体の高さを変える

表全体の高さを変えるためには、tableタグにheight属性を設定します。以下の例では、表の高さを300ピクセルに設定しています。

<table height="300">
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

[出力イメージ]

セルの高さを変える

セルの高さを変えるためには、tdタグやthタグに対してheight属性を設定します。以下の例では、各セルの高さを100ピクセルに設定しています。

<table>
  <tr>
    <td height="100">データ1</td>
    <td height="100">データ2</td>
  </tr>
</table>

[出力イメージ]

cellpadding属性：余白を調整する

cellpadding属性は、セルの内側の余白を調整するために使用します。以下の例では、セルの内側の余白を10ピクセルに設定しています。

<table cellpadding="10">
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

[出力イメージ]

rowspan属性：縦方向にセルを結合する

rowspan属性を使用すると、縦方向にセルを結合することができます。以下の例では、1つのセルが2行にまたがっています。

<table>
  <tr>
    <td rowspan="2">データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
  </tr>
</table>

[出力イメージ]

colspan属性：横方向にセルを結合する

colspan属性を使用すると、横方向にセルを結合することができます。以下の例では、1つのセルが2列にまたがっています。

<table>
  <tr>
    <td colspan="2">データ1</td>
  </tr>
  <tr>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

[出力イメージ]

これらの属性を使用して、表の編集や機能の調整ができます。次に、表の装飾方法について学びましょう。

tableタグの表に装飾をする方法

HTMLのtableタグを使用して作成した表に装飾を施すことで、見た目が向上し、情報をよりわかりやすく伝えることができます。ここでは、表に枠線を追加したり、枠線や背景に色をつけたりする方法について詳しく説明します。

border属性：枠・罫線をつける

border属性を使用することで、表に枠線を追加することができます。以下の例では、表全体に1ピクセルの枠線をつけています。

<table border="1">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

[出力イメージ]

このように、border属性を設定するだけで簡単に枠線を追加することができます。

bordercolor属性：枠・罫線に色をつける

bordercolor属性を使用することで、枠線に色をつけることができます。以下の例では、枠線の色を青色に設定しています。

<table border="1" bordercolor="blue">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

[出力イメージ]

枠線に色をつけることで、表がより視覚的に際立ちます。強調させたいセルがある場合は、bordercolor属性をうまく活用しましょう。

bgcolor属性：背景に色をつける

bgcolor属性を使用することで、セルや行の背景に色をつけることができます。

td, thを使ってセルに色をつける

特定のセルに色をつけたい場合は、tdタグやthタグにbgcolor属性を設定します。以下の例では、特定のセルに背景色を設定しています。

<table border="1">
  <tr>
    <th bgcolor="lightgrey">見出し1</th>
    <th bgcolor="lightgrey">見出し2</th>
  </tr>
  <tr>
    <td bgcolor="yellow">データ1</td>
    <td>データ2</td>
  </tr>
</table>

[出力イメージ]

trを使って行に色をつける

特定の行全体に色をつけたい場合は、trタグにbgcolor属性を設定します。以下の例では、特定の行に背景色を設定しています。

<table border="1">
  <tr bgcolor="lightblue">
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr bgcolor="lightgreen">
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

[出力イメージ]

このように、背景色を設定することで、表がより見やすくなり、情報を強調することができます。これらの方法を駆使して、HTMLのtableタグを使用した表に視覚的な装飾を施し、引き付けるビジュアルにすることができます。

tableタグの表にヘッダー・フッターを追加する方法

HTMLのtableタグを使用して作成した表にヘッダーやフッターを追加することで、表の構造をより明確にし、情報を整理して表示することができます。本章では、thead、tbody、tfootタグを使ったヘッダーとフッターの追加方法について詳しく説明します。

thead：表のヘッダー箇所

theadタグは、表のヘッダー部分を定義するために使用します。通常、表の最初の行に配置され、見出しとして使用されます。以下の例では、theadタグを使って表のヘッダーを定義しています。

<table border="1">
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
    <tr>
      <td>データ3</td>
      <td>データ4</td>
    </tr>
  </tbody>
</table>

[出力イメージ]

このように、theadタグを使用することで、表のヘッダー部分を簡単に定義することができます。

tbody：表のコンテンツ箇所

tbodyタグは、表のコンテンツ部分を定義するために使用します。通常、表のデータが含まれる部分です。以下の例では、tbodyタグを使って表のコンテンツを定義しています。

<table border="1">
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
    <tr>
      <td>データ3</td>
      <td>データ4</td>
    </tr>
  </tbody>
</table>

[出力イメージ]

このように、tbodyタグを使用することで、表のデータ部分を明確に区別することができます。

tfoot：表のフッター箇所

tfootタグは、表のフッター部分を定義するために使用します。通常、表の最後の行に配置され、合計や注釈などを表示するために使用されます。以下の例では、tfootタグを使って表のフッターを定義しています。

<table border="1">
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
    <tr>
      <td>データ3</td>
      <td>データ4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>フッター1</td>
      <td>フッター2</td>
    </tr>
  </tfoot>
</table>

[出力イメージ]

このように、tfootタグを使用することで、表のフッター部分を簡単に定義することができます。

これらのタグを組み合わせることで、HTMLのtableタグを使用した表にヘッダーやフッターを追加し、より構造的で見やすい表を作成することができます。次に、これらの要素を正しく理解し、実際の表作成に活かしましょう。

tableタグの要素を正しく理解し、テーブル作成をしよう

HTMLではtableタグを活用することで、表を作成することができます。

本記事では、HTMLのtableタグを使って表を作成する基本から、セルの幅や高さの調整、表の装飾方法までを詳しく解説しました。

これらの知識を身に付けることで、見やすく機能的な表を簡単に作成することができます。基本を押さえて、HTMLのtableタグを活用し、効果的な表を作成してみてください。