【HTML】HTMLテーブルの基本構造とスタイリング方法

2024年9月12日

はじめに

こんにちは！TakeHawkです！

HTMLテーブルは、データを行と列に整理して表示するために使われます。例えば、価格表や統計データなど、情報を見やすく整えるのに最適です。この記事では、HTMLでテーブルを作成する基本構造と、CSSを使ったスタイリング方法について解説します。

HTMLテーブルの基本構造

テーブルは、<table>タグを使って作成します。基本的な構造は、テーブル全体を囲む<table>タグ、その中に行を作成する<tr>タグ、そして各セルを表す<td>タグです。

基本的なテーブルの例

HTML

<table>
  <tr>
    <td>商品名</td>
    <td>価格</td>
    <td>在庫</td>
  </tr>
  <tr>
    <td>リンゴ</td>
    <td>100円</td>
    <td>50個</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>80円</td>
    <td>30個</td>
  </tr>
</table>

この例では、3列×3行のテーブルが作成され、商品名、価格、在庫の情報を表示しています。

見出しセルの作成

テーブルの見出し部分には<th>タグを使います。<td>タグと同じように使いますが、テキストが太字で中央寄せされます。

HTML

<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>

この例では、1行目に見出しが追加され、表全体が見やすくなります。

テーブルの基本プロパティ

テーブルにはいくつかの便利な属性があります。例えば、border属性を使うと、テーブルに枠線を追加できます。

枠線付きテーブルの例

HTML

<table border="1">
  <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>

この例では、border="1"を指定することで、テーブルに1pxの枠線が追加されます。

テーブルのスタイリング

テーブルのデザインをカスタマイズするために、CSSを使ってスタイリングを行うことができます。背景色、余白、枠線のデザインなどを調整することで、より見やすいテーブルを作成できます。

背景色とパディングの追加

CSS

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

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
  text-align: left;
}

このCSSでは、テーブル全体に枠線を追加し、セル内に余白（パディング）を付け、ヘッダー行に背景色を設定しています。

ストライプ模様のテーブル

行ごとに色を変えるストライプ模様を適用すると、見やすくプロフェッショナルなデザインになります。

CSS

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

tr:nth-child(odd) {
  background-color: #ffffff;
}

このCSSでは、偶数行と奇数行に異なる背景色を設定し、テーブルにストライプ模様を追加しています。

ホバー効果の追加

ユーザーがマウスで行をホバーしたときに、行の背景色を変更して強調表示させることができます。

CSS

tr:hover {
  background-color: #ddd;
}

このスタイルを追加すると、ユーザーがマウスを乗せたときに行がハイライトされます。

テーブルの列幅と整列

テーブルの列幅を指定したり、テキストの整列を調整することもできます。

列幅の指定とテキスト整列

CSS

th, td {
  width: 150px;
  text-align: center;
}

この例では、すべての列の幅を150pxに指定し、テキストを中央に揃えています。

結合セル（`colspan`と`rowspan`）

テーブルのセルを横方向や縦方向に結合したい場合、colspanやrowspan属性を使います。

セルの結合例

HTML

<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
  <tr>
    <td>リンゴ</td>
    <td>100円</td>
    <td>50個</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td colspan="2">在庫切れ</td>
  </tr>
</table>