HTMLで表を作成する方法7選！tableタグを使った実践的なコーディングガイド

はじめに

今回はHTMLを用いて、ウェブページ上でよく使用される表を作成する方法について詳しく解説します。

この記事を読むことで、HTMLの基本的な表の作成から、少し応用的な表のデザインまで、一連のプロセスを習得できるようになります。

特に初心者の方が最初につまずきやすいポイントをクリアにしながら、中級者向けの内容も紹介していくので、一歩一歩着実にスキルアップしていくことができるでしょう。

●HTMLで表を作成する基本

ウェブページで情報を整理して表示する際に非常に役立つのが、HTMLの表（tableタグ）を使用した構造です。

まずは最も基本的な表の作成方法から見ていきましょう。

○表の基本構造を理解する

HTMLで表を作成するには、<table>タグを使用します。

この<table>タグの内部には、<tr>タグ（table rowの略）を用いて行を作成し、その行の中に<td>タグ（table dataの略）または<th>タグ（table headerの略）を使用して、セルまたは見出しセルを作成します。

基本的な表はこのようにして行と列を組み合わせて作られます。

例えば、下記のコードは簡単な3行3列の表を作成するものです。

<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫数</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>50個</td>
  </tr>
  <tr>
    <td>ばなな</td>
    <td>80円</td>
    <td>30個</td>
  </tr>
</table>

この例では、まず表の見出しとして商品名、価格、在庫数というカテゴリを<th>タグで定義しています。

次に、各商品に対応するデータを<td>タグを使って行に追加しています。

○基本的な表の作成方法

HTMLの表を作成する基本は、前述の通り<table>、<tr>、<td>タグを組み合わせることですが、これに加えて、表全体にスタイルを適用することで視覚的にも魅力的な表を作成することが可能です。

たとえば、CSSを用いて表の枠線やセルのパディングを調整することができます。

下記のCSSは、表に枠線を加え、セルの間隔を設定しています。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

このCSSをHTMLと組み合わせることで、情報がはっきりと区切られ、読みやすい表を作成することができます。

今度はこのスタイルを適用してみましょう。

●表の属性とカスタマイズ方法

表を作成する際には、ただデータを並べるだけでなく、その見た目をカスタマイズすることが重要です。

HTMLとCSSを利用して、表の見た目を自由自在に変更できます。

特にウェブデザインにおいては、情報の視認性を高めるために、表のスタイルを適切に調整することが求められます。

○rowspanとcolspanを使用してセルを結合する方法

表の中で情報をまとめたい場合、行や列を跨いでセルを結合することができます。

これにはrowspanとcolspan属性を使用します。

rowspanは縦方向にセルを結合させ、colspanは横方向に結合させる属性です。

例えば、下記のHTMLコードは、最初のセルを横に2列分結合し、次のセルを縦に2行分結合しています。

<table>
  <tr>
    <th colspan="2">商品カテゴリ</th>
    <th rowspan="2">価格</th>
  </tr>
  <tr>
    <td>フルーツ</td>
    <td>野菜</td>
  </tr>
  <tr>
    <td>りんご</td>
    <td>キャベツ</td>
    <td>200円</td>
  </tr>
</table>

このコードにより、商品カテゴリは「フルーツ」と「野菜」が1行目に並び、「価格」が縦に2行に渡って表示されるように設定されています。

○表のスタイルをカスタマイズするCSSの活用

表の視覚的な魅力を高めるためには、CSSを駆使することが効果的です。

表の枠線、背景色、テキストの配置など、多岐にわたるスタイルをカスタマイズできます。

たとえば、次のCSSは表の各セルにパディングを追加し、枠線を設定し、背景色を交互に変えることで読みやすさを向上させています。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

このスタイルを適用することで、各行が交互に異なる背景色で表示され、情報が見やすく整理されます。

特に情報量が多い表では、このような視覚的工夫が非常に有効です。

●実用的なサンプルコード

ウェブサイトで表を使う際には、ただデータを表示するだけでなく、訪問者にとって使いやすく、また視覚的にも魅力的であることが重要です。

ここでは、HTMLとCSSを活用して、さまざまな機能を持つ表を作成するためのサンプルコードを紹介します。

○サンプルコード1：シンプルな表を作成

最初に、基本的な表の作成方法を見ていきましょう。

HTMLの<table>タグを使用して、シンプルながらも機能的な表を作ります。

下記のコードは、商品リストを表示するための基本的な表です。

<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>リンゴ</td>
    <td>¥100</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>¥80</td>
  </tr>
</table>

この表では、<th>タグを使用して列のヘッダーを定義し、<td>タグでデータを入力しています。

○サンプルコード2：セルを結合した複雑な表

次に、セルを結合することで情報を効果的に整理し、見た目を改善する方法を紹介します。

rowspanやcolspanを使用して、必要に応じてセルを横または縦に結合します。

<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫数</th>
  </tr>
  <tr>
    <td rowspan="2">リンゴ</td>
    <td>¥100</td>
    <td>50個</td>
  </tr>
  <tr>
    <td>¥90</td>
    <td>30個</td>
  </tr>
  <tr>
    <td colspan="3">合計在庫数: 80個</td>
  </tr>
</table>

この例では、リンゴの行でrowspanを使って商品名のセルを2行に渡って結合し、最後の行ではcolspanを使用して合計在庫数を1つのセルに表示しています。

○サンプルコード3：表にヘッダーとフッターを設定

表にヘッダーとフッターを追加することで、データの説明を明確にし、合計や結論を強調することができます。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>リンゴ</td>
      <td>¥100</td>
      <td>50個</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>¥80</td>
      <td>30個</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">合計</td>
      <td>80個</td>
    </tr>
  </tfoot>
</table>

このコードでは、<thead>、<tbody>、<tfoot>タグを使用して、表の構造を明確にしています。

○サンプルコード4：表にインタラクティブな機能を追加

JavaScriptとCSSを使用して、表にインタラクティブな機能を追加する例を紹介します。

例えば、行をクリックすると詳細が表示されるような機能です。

<table id="interactiveTable">
  <tr onclick="alert('リンゴの価格: ¥100')">
    <td>リンゴ</td>
    <td>¥100</td>
  </tr>
  <tr onclick="alert('バナナの価格: ¥80')">
    <td>バナナ</td>
    <td>¥80</td>
  </tr>
</table>

このコードでは、各行にonclickイベントを設定しており、行をクリックすると価格情報がポップアップで表示されます。

○サンプルコード5：レスポンシブな表の作成

最後に、スクリーンサイズに応じて表の表示を最適化する方法を見ていきます。

CSSのメディアクエリを使用して、異なるデバイスでの視認性を保ちます。

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }
  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label);
  }
}

このCSSを適用すると、600px以下の画面幅で表がブロック表示に変わり、各セルにラベルを表示することで情報を失わずにコンパクトに表示することが可能になります。

●HTML表作成時のよくあるエラーと対処法

HTMLで表を作成する過程でしばしば遭遇する問題には様々なものがありますが、ここでは特に頻繁に発生する問題とその解決策を詳細に解説します。

これにより、表作成の技術を向上させ、一般的なトラブルシューティングの能力を高めることができます。

○エラーとその解決策1：表が表示されない

表がウェブページに表示されない場合、いくつかの一般的な原因が考えられます。

まず、HTMLタグが正しく閉じられていない可能性があります。

全ての<table>, <tr>, <td>, <th>タグが適切に開始タグと終了タグで囲まれていることを確認してください。

次に、CSSでdisplay: none;が設定されていないか、またはJavaScriptが何らかの理由で表を非表示にしていないかを確認します。

例えば、下記のようなコードでは、<table>タグが適切に閉じられていないために表が表示されません。

<table>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  <!-- <table>の閉じタグがない -->

この問題を解決するには、<table>タグを適切に閉じる必要があります。

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

この修正により、表は正しく表示されるようになります。

○エラーとその解決策2：スタイルが適用されない

表にスタイルが適用されない場合、CSSの選択子が間違っているか、スタイルの指定に誤りがある可能性があります。

また、CSSファイルの読み込みが正しく行われていないか、スタイルが他のCSSによって上書きされている場合も考えられます。

スタイルが適用されない一般的なケースとして、下記のような状況が挙げられます。

/* CSSファイル */
.table-style {
  color: red;
}

<!-- HTMLファイル -->
<table class="tableStyle">
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

この例では、CSSのクラス名が.table-styleと定義されているのに対し、HTMLではclass="tableStyle"となっており、大文字小文字が一致していません。

CSSは大文字と小文字を区別するため、この違いが原因でスタイルが適用されていません。

解決策としては、HTMLのクラス名を正確にCSSと一致させることです。

<table class="table-style">
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

この修正を行うことで、指定したスタイルが正しく適用されるようになります。

●表作成の応用例

表を作成する技術は多岐にわたる応用が可能です。

特に動的なデータの取り扱いや、ユーザーの操作に応じて内容が変化するインタラクティブな表の作成は、多くのウェブアプリケーションで求められています。

ここでは、特に実用的な応用例を二つ紹介します。

○サンプルコード6：ソート可能な表の作成

ユーザーが表のヘッダーをクリックすることで列に基づいてデータをソートできる機能は、情報を迅速に整理しやすくするために非常に役立ちます。

JavaScriptを利用して、クライアントサイドでこの処理を行う方法を見ていきましょう。

まず、HTMLで基本的な表を作成します。

<table id="sortableTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">名前</th>
      <th onclick="sortTable(1)">年齢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中</td>
      <td>25</td>
    </tr>
    <tr>
      <td>鈴木</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

その後、JavaScriptでソート機能を実装します。

function sortTable(column) {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("sortableTable");
  switching = true;
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[column];
      y = rows[i + 1].getElementsByTagName("TD")[column];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

このコードにより、指定された列を基に表がソートされ、ユーザーは直感的に情報を整理できます。

○サンプルコード7：データを動的に読み込む表

ウェブアプリケーションにおいて、サーバーからデータを取得し、表に動的に表示する機能は必須です。

ここでは、Fetch APIを使用してサーバーからJSON形式のデータを取得し、表に表示する方法を説明します。

HTMLで表を準備します。

<table id="dynamicTable">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

次に、JavaScriptでデータを読み込み、表に追加します。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    let table = document.getElementById('dynamicTable').getElementsByTagName('tbody')[0];
    data.forEach(item => {
      let row = table.insertRow();
      let cell1 = row.insertCell(0);
      let cell2 = row.insertCell(1);
      cell1.innerHTML = item.name;
      cell2.innerHTML = item.age;
    });
  })
  .catch(error => console.error('Error loading the data: ', error));

このスクリプトは外部APIからデータを取得し、それぞれのデータ項目を表の行として追加します。

エラーハンドリングも実装しており、データの読み込みに失敗した場合にはコンソールにエラーが表示されます。

●エンジニアが知るべきHTML表作成の豆知識

HTML表作成においては、ただ表を作成するだけでなく、その使用性やアクセスしやすさを考えることが重要です。

ここでは、特にエンジニアが知っておくべき重要なポイントをいくつか紹介します。

○HTML表作成におけるアクセシビリティの重要性

Webアクセシビリティは、障害を持つユーザーも含めて、すべての人が情報にアクセスしやすいようにするための重要な要素です。

表を作成する際には、スクリーンリーダーが内容を適切に読み取れるように、<th>タグを使って列見出しをマークアップすることが推奨されます。

また、scope属性を列または行に適切に設定することで、スクリーンリーダーのユーザーがデータの関係性を理解しやすくなります。

例えば、下記のようにマークアップすることで、各セルがどのヘッダーに関連しているかが明確になります。

<table>
  <tr>
    <th scope="col">名前</th>
    <th scope="col">年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30</td>
  </tr>
  <tr>
    <td>鈴木花子</td>
    <td>25</td>
  </tr>
</table>

この構造では、<th>タグにscope="col"を設定して、これらが列のヘッダーであることを示しています。

○表デザインのためのベストプラクティス

表のデザインにおいては、視覚的なクリアさと情報の整理が重要です。

表の読みやすさを向上させるためには、適切なボーダー、ストライピング（交互の色）、そして十分なパディングを使用することが効果的です。

CSSを用いてこれらのスタイリングを施すことで、ユーザーがデータを迅速に解釈しやすくなります。

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}

このCSSスタイルでは、border-collapseを使用してボーダーを整理し、nth-child擬似クラスを使用して行の色を交互に変え、視認性を高めています。

まとめ

この記事を通じて、HTMLを使用した表作成の基本から応用技術までを解説しました。

アクセシビリティの重要性や表のデザインのベストプラクティスを含め、エンジニアとして知っておくべき豆知識も紹介しました。

HTMLとCSS、JavaScriptを駆使して、より機能的で見た目も美しい表を作成する方法をマスターすることができれば、あらゆるウェブプロジェクトにおいてそのスキルが活かされるでしょう。

これらの知識を活用することで、ユーザーフレンドリーなウェブサイトを設計し、実装することが期待されます。