HTMLで枠線付きの表を作成する方法7選

はじめに
●HTML表作成の基本
- ○HTMLの表（table）タグの基礎
- ○枠線を追加するためのCSSスタイルの基本
●枠線付き表の作成手順
●HTML表のカスタマイズ方法
- ○サンプルコード4：色とフォントスタイルをカスタマイズする
- ○サンプルコード5：レスポンシブな表の作成
●HTMLで表を使った応用例
- ○サンプルコード6：データのソート機能を持つ表
- ○サンプルコード7：インタラクティブなフィルタリング機能を持つ表
●よくある問題とその解決策
○問題1：枠線が表示されない
- ○問題2：表がページに収まらない
まとめ

はじめに

この記事では、HTMLを使用して枠線付きの表を作成する方法について、初心者にも分かりやすく詳しく解説します。

ウェブページで情報を整理して表示する際に非常に便利な表ですが、枠線を付けることでさらに視認性を高めることができます。

特に、データが多く含まれる場合や、ユーザーにとって重要な情報を強調したいときに効果的です。

ここでは基本的な表の作り方から、CSSを使って枠線をデザインする方法まで、ステップバイステップで学んでいきましょう。

●HTML表作成の基本

HTMLで表を作成する基本は、<table> タグを使用することから始まります。

このタグ内に <tr>（table rowの略）を用いて行を追加し、さらに <td>（table dataの略）タグで各セルを作成します。

シンプルな表を作るにはこれだけで十分ですが、表にはさまざまな属性を加えることで、より複雑で機能的なものにすることが可能です。

例えば、<th>（table headerの略）タグを使って見出し行を作ることができますし、rowspan や colspan 属性を使用して、セルを横や縦に拡張することもできます。

○HTMLの表（table）タグの基礎

表の基本構造を理解したところで、具体的なコード例を見てみましょう。

このHTMLコードは、3行3列のシンプルな表を作成しています。

<table>
  <tr>
    <th>項目</th>
    <th>価格</th>
    <th>数量</th>
  </tr>
  <tr>
    <td>商品A</td>
    <td>¥1000</td>
    <td>1</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>¥2000</td>
    <td>2</td>
  </tr>
</table>

この例では、最初の行に見出しを設定しています。

<th> タグを使用することで、セルの内容が太字で中央揃えになり、表の見出しとして機能します。

○枠線を追加するためのCSSスタイルの基本

HTMLで表を作成した後は、CSSを使用してスタイルを適用することが一般的です。

表に枠線を加えるには、CSSの border プロパティを用います。

このCSSコードは、表全体に薄い灰色の枠線を追加し、各セル間にも同様の線を表示します。

table, th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}

border-collapse: collapse; は、セル間の境界線を一つにまとめるための重要なスタイルです。

これを指定しないと、隣接するセルの境界線が重なり、予想よりも太い線ができてしまうことがあります。

また、表の見栄えを整えるために、padding プロパティを使ってセルの内部に余白を設けるとより読みやすくなります。

●枠線付き表の作成手順

枠線付きの表を作成する過程は、HTMLとCSSの知識を組み合わせることで、より洗練されたデザインが実現できます。

初めに、基本的なHTMLの表を作成し、その後にCSSを使用して枠線を適用する手順を見ていきます。

このプロセスを通じて、あなたのウェブサイトに合ったカスタマイズが可能になります。

○サンプルコード1：単純な枠線付き表

最初のサンプルでは、HTMLとCSSを使って基本的な枠線付きの表を作成します。

サンプルコードを見てみましょう。

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black;">項目</th>
    <th style="border: 1px solid black;">価格</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">商品A</td>
    <td style="border: 1px solid black;">¥1000</td>
  </tr>
</table>

このコードでは、各セルに直接 border スタイルを適用しています。

border-collapse: collapse; を <table> タグに指定することで、隣接するセルの境界線が重なり、きれいに見えるようにしています。

○サンプルコード2：セルごとに枠線のスタイルを変更する

次に、セルごとに異なる枠線のスタイルを適用する方法を見てみましょう。

異なる色や太さの枠線を使うことで、情報の重要度を視覚的に表現することができます。

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 2px solid red;">項目</th>
    <th style="border: 2px solid blue;">価格</th>
  </tr>
  <tr>
    <td style="border: 1px solid grey;">商品A</td>
    <td style="border: 1px solid green;">¥1000</td>
  </tr>
</table>

この例では、見出し行のセルには赤と青の太い枠線を使用し、内容セルにはより細い灰色と緑色の枠線を使用しています。

こんな形で色や太さを変えることで、表内の情報の階層構造を表現できます。

○サンプルコード3：表の幅と高さを調整する

表の見た目をさらにコントロールするには、幅と高さの調整が重要です。

CSSを用いて、表やセルのサイズを指定することができます。

このコードは、表全体と個々のセルの幅と高さを調整しています。

<table style="width: 50%; border-collapse: collapse;">
  <tr>
    <th style="width: 30%; height: 50px; border: 1px solid black;">項目</th>
    <th style="width: 70%; height: 50px; border: 1px solid black;">価格</th>
  </tr>
  <tr>
    <td style="height: 30px; border: 1px solid black;">商品A</td>
    <td style="height: 30px; border: 1px solid black;">¥1000</td>
  </tr>
</table>

このサンプルでは、width と height プロパティを使用しています。

表全体の幅をページの50%に設定し、各セルの高さも適切に設定することで、情報が読みやすいように調整しています。

●HTML表のカスタマイズ方法

HTML表をさらに使いやすく、視覚的に魅力的にするためには、カスタマイズが欠かせません。

色やフォント、さらにはレイアウトの調整を行うことで、情報をより効果的に伝えることができます。

特に、ウェブデザインにおいては、ユーザーの視覚的な興味を引くことが重要です。

ここでは、色とフォントスタイルを変更する方法と、レスポンシブなデザインを実現するための技術を見ていきましょう。

○サンプルコード4：色とフォントスタイルをカスタマイズする

表の見た目をカスタマイズする最も基本的な方法は、色とフォントスタイルの変更です。

CSSを活用して、表全体や特定のセルに対して、視覚的に魅力的なスタイルを適用することができます。

このサンプルでは、見出しセルに背景色とフォントスタイルを設定しています。

<style>
  .custom-table {
    width: 100%;
    border-collapse: collapse;
  }
  .custom-table th {
    background-color: navy;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 8px;
  }
  .custom-table td {
    border: 1px solid #ddd;
    padding: 8px;
  }
</style>

<table class="custom-table">
  <tr>
    <th>項目</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>商品A</td>
    <td>¥1,000</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>¥2,000</td>
  </tr>
</table>

この例では、見出し行に紺色の背景と白色のテキストを使用しています。

Arialフォントと16pxのフォントサイズを指定することで、表全体の読みやすさと一貫性を保ちながら、情報の重要性を際立たせています。

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

ウェブページを多様なデバイスで表示する際に、表が画面サイズに適応するよう設計することは極めて重要です。

レスポンシブなデザインを採用することで、どのデバイスからアクセスしても、内容が適切に表示され、ユーザー体験が向上します。

CSSとHTMLを使用して、レスポンシブな表を作成する方法をみてみましょう。

<style>
  @media screen and (max-width: 600px) {
    .responsive-table {
      width: 100%;
      border-collapse: collapse;
    }
    .responsive-table th,
    .responsive-table td {
      display: block;
    }
    .responsive-table th {
      background-color: #333;
      color: white;
    }
  }
</style>

<table class="responsive-table">
  <tr>
    <th>項目</th>
    <td>商品A</td>
  </tr>
  <tr>
    <th>価格</th>
    <td>¥1,000</td>
  </tr>
</table>

このコード例では、画面の幅が600px以下になると、各セルが縦に積み重なるようCSSメディアクエリを使用しています。

これで、狭い画面でも情報が見やすくなります。

また、見出しには暗い背景色を適用し、テキストは白色で表示されるため、視認性が保たれます。

●HTMLで表を使った応用例

HTMLの表を使用した応用例では、データの視覚的表示を超え、インタラクティブな機能を組み込むことで、ユーザーエクスペリエンスを向上させることができます。

具体的には、データのソート機能やインタラクティブなフィルタリングを表に追加することが考えられます。

この機能は、ユーザーが必要とする情報を迅速に見つけるのを助けるために特に有用です。

○サンプルコード6：データのソート機能を持つ表

データを簡単にソートできる機能は、ユーザーが表の中の情報をより効率的に解析できるようにするための重要なツールです。

下記のJavaScriptとHTMLを使用して、クリックするだけで列のデータを昇順または降順にソートする機能を追加します。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
th {
  cursor: pointer;
}
</style>
</head>
<body>

<p><strong>Click on the headers to sort the table:</strong></p>
<table>
  <tr>
    <th onclick="sortTable(0)">名前</th>
    <th onclick="sortTable(1)">年齢</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>25</td>
  </tr>
  <tr>
    <td>花子</td>
    <td>30</td>
  </tr>
</table>

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

</body>
</html>

このスクリプトは、ユーザーが表のヘッダーをクリックすると、対応する列に基づいて行をソートします。

sortTable 関数は指定された列インデックスに基づいて動作し、昇順または降順に切り替えることができます。

○サンプルコード7：インタラクティブなフィルタリング機能を持つ表

表にフィルタリング機能を追加することで、ユーザーは特定のデータを瞬時に見つけることができます。

下記のHTMLとJavaScriptを使って、ユーザーが入力したテキストに基づいて表の行を動的にフィルタリングする方法を表しています。

<!DOCTYPE html>
<html>
<head>
<style>
input {
  margin: 10px;
  padding: 8px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
}
</style>
</head>
<body>

<input type="text" id="myInput" onkeyup="filterTable()" placeholder="検索...">
<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>25</td>
  </tr>
  <tr>
    <td>花子</td>
    <td>30</td>
  </tr>
</table>

<script>
function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

</body>
</html>

このコードは、入力フィールドにキーワードを入力するとリアルタイムで表の行をフィルタリングします。

特定の列でフィルタリングを行うことも可能で、それによりユーザーは目的の情報を素早く見つけることができます。

●よくある問題とその解決策

HTMLで表を作成する際には、問題が発生することがあります。

これらの問題に対して効果的な解決策を提供することで、より洗練されたウェブページを作成する手助けをします。

○問題1：枠線が表示されない

多くの場合、HTMLで表を作成した際に枠線が表示されないのは、CSSでの枠線のスタイル設定が適切でないか、適用されていないためです。

枠線が表示されない問題を解決するためには、このCSSプロパティを確認してください。

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

このCSSルールは、table、th、tdタグに対して、1ピクセルの黒い枠線を適用します。

また、border-collapse プロパティを collapse に設定することで、隣接するセルの枠線が重なり合って1本の線として表示されるようになります。

これにより、枠線がはっきりと表示されるようになり、表がより整った見た目になります。

○問題2：表がページに収まらない

表がページの幅に収まらない問題は、特にレスポンシブなデザインを意識したウェブページ作成において重要です。

この問題を解決するための一つの方法は、CSSの overflow プロパティを使用してスクロールバーを追加することです。

.container {
  width: 100%;
  overflow-x: auto;
}

そして、HTMLでは、表をこのコンテナで囲むことで、表の幅がコンテナの幅を超えた場合に水平方向のスクロールバーが表示されるようになります。

<div class="container">
  <table>
    <!-- 表の内容 -->
  </table>
</div>

この方法では、表がどんなに幅広であっても、ページのレイアウトを崩すことなく、ユーザーがスクロールして全てのデータを閲覧できるようになります。

さらに、CSSメディアクエリを使用して、異なる画面サイズに基づいて表の表示方法を柔軟に調整することも可能です。

まとめ

この記事では、HTMLを使用して表を作成する基本的な方法から、CSSを駆使したスタイリング、さらにJavaScriptを用いたインタラクティブな機能追加まで、多岐にわたるテクニックを詳しく解説しました。

初心者にも分かりやすいように、具体的なサンプルコードとその解説を通じて、誰でも簡単にプロフェッショナルな表を作成できるようになることでしょう。

実践的なスキルを身に付けたい方にとって、このガイドが役立つリソースとなれば嬉しいです。