HTMLでテーブルを作成する方法

HTMLでデータや情報を整理して表示する「テーブル」を作成する方法について、

基本的なHTMLタグだけを使ったやり方をご紹介します。

テーブルは情報を分かりやすく整理して見せるために便利で、シンプルな構造でも多くの場面で役立ちます。

ここでは、基本的なテーブル作成の方法といくつかの応用テクニックについて解説していきます。

基本のテーブル構造

HTMLでテーブルを作成するために使用するタグは以下のとおりです。

• <table>：テーブル全体を囲むタグ
• <tr>：行を表すタグ
• <th>：見出しセル（ヘッダー）を表すタグ
• <td>：データセルを表すタグ

これらのタグを組み合わせて、テーブルを作成していきます。

基本のテーブル例

まずは、基本的なテーブル構造を作成してみましょう。

例えば、「名前」「年齢」「職業」の情報を持つシンプルなテーブルです。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>25</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>30</td>
    <td>デザイナー</td>
  </tr>
</table>

上記の構造では、1行目（<tr>タグ）に見出しセル（<th>タグ）を配置し、2行目以降にはデータセル（<td>タグ）を使用してデータを入力しています。

テーブルの見出し行を作成する

表の内容をわかりやすくするため、1行目に見出し行（ヘッダー）を設けることが一般的です。

見出しセルには<th>タグを使い、セル内の内容が強調されるようになります。

見出し行を作成することで、どの列が何の情報を表しているかが一目でわかるようになります。

<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>100個</td>
  </tr>
</table>

この例では、「商品名」「価格」「在庫数」という見出しがついているため、各列の内容がより理解しやすくなります。

セルの結合（colspanとrowspan）

データが複雑になる場合、セルを横や縦に結合して見せるとよりわかりやすくなります。

そのためにcolspanとrowspanという属性を使います。

横にセルを結合する（colspan）

横に2つ以上のセルを結合したい場合には、colspan属性を使用します。

<table>
  <tr>
    <th colspan="2">社員情報</th>
  </tr>
  <tr>
    <th>名前</th>
    <th>部署</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>開発部</td>
  </tr>
</table>

この例では、<th colspan="2">社員情報</th>で見出しセルを横に2つ分結合しています。

縦にセルを結合する（rowspan）

縦にセルを結合したい場合には、rowspan属性を使用します。

<table>
  <tr>
    <th rowspan="2">チーム</th>
    <th>メンバー名</th>
  </tr>
  <tr>
    <td>山田太郎</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
  </tr>
</table>

この例では、<th rowspan="2">チーム</th>でセルを縦に2つ分結合しています。

おまけ：CSSでテーブルをスタイル調整する場合

HTMLだけで基本的なテーブル構造は作成できますが、

見やすさを向上させるためにCSSでスタイルを調整することがよくあります。

ここでは、簡単なスタイル調整の方法をご紹介します。

枠線をつける

テーブルに枠線をつけることで、各セルが区切られ、表全体が見やすくなります。

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>

このCSSを使用することで、セルごとに1pxの黒い枠線が表示され、見やすさが向上します。

見出しセルの強調

見出し部分を太字や背景色で強調することもできます。

<style>
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
</style>

この設定を追加することで、見出しセルが淡い背景色で強調され、さらに読みやすくなります。

行ごとの背景色変更

さらに、偶数行に異なる背景色をつけると、データが多いテーブルでも見やすくなります。

<style>
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

nth-child(even)を使うことで、偶数行にのみ背景色が適用され、データが見やすくなります。

HTMLだけでもテーブルは作成できますが、CSSでのスタイル調整により、より視覚的にわかりやすいテーブルが完成します。ぜひお試しください！