【HTML＆CSS】表（tableタグ）の使用について

HTMLの<table>タグは、データや情報を表形式で整理して表示するために使用されます。初心者の方でも理解しやすいように、基本的な使い方から応用的な使い方までをサンプルコードとともに説明します。

基本的な`<table>`タグの構成

<table>タグの中には、複数の要素を含めて表を構成します。基本的な要素は以下の通りです：

<table>: 表全体を定義します。
<tr>: 行を定義します（table row）。
<th>: 表のヘッダーセル（通常は太字）を定義します（table header）。
<td>: 表の通常のデータセルを定義します（table data）。

これらを使って、基本的な表を作成することができます。

基本の表の例

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>山田 太郎</td>
    <td>28</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>田中 花子</td>
    <td>34</td>
    <td>デザイナー</td>
  </tr>
</table>

上記の例では、border="1"でセルに枠線を付けています。<th>タグは各列のヘッダー部分を定義し、<td>タグはデータを格納しています。結果として、以下のような表が表示されます：

名前	年齢	職業
山田太郎	28	エンジニア
田中花子	34	デザイナー

※サンプル

詳細な`<table>`タグのオプション

<table>タグには、さまざまなオプションや属性があります。これにより、表のレイアウトや表示方法を柔軟にコントロールすることができます。

1. `border`属性

上記の例で使用したborder属性は、表の枠線を表示するために使われます。数値を指定することで、枠線の太さを設定できます。border="0"にすると、枠線がなくなります。

2. `colspan`属性

colspan属性は、1つのセルが複数の列にまたがる場合に使用します。例えば、表のヘッダーを1つのセルで広く表示したい場合に便利です。

<table border="1">
  <tr>
    <th colspan="3">従業員情報</th>
  </tr>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>山田 太郎</td>
    <td>28</td>
    <td>エンジニア</td>
  </tr>
</table>

上記の例では、最初のヘッダーセルが3つの列にまたがっています。結果として、表の最上部に「従業員情報」という1行のヘッダーが表示されます。

3. `rowspan`属性

rowspan属性は、1つのセルが複数の行にまたがる場合に使用します。例えば、関連するデータを1つのセルにまとめたいときに便利です。

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td rowspan="2">山田 太郎</td>
    <td>28</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>29</td>
    <td>マネージャー</td>
  </tr>
</table>

この例では、「山田太郎」という名前が2行にまたがって表示されます。

4. セル内の配置

セル内の内容を中央や右に揃えたい場合、text-align属性を使います。CSSを使って、テキストの位置を簡単に変更できます。

<table border="1">
  <tr>
    <th style="text-align: center;">名前</th>
    <th style="text-align: right;">年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>山田 太郎</td>
    <td style="text-align: right;">28</td>
    <td>エンジニア</td>
  </tr>
</table>

このように、style属性を使ってセル内の文字を中央揃え（text-align: center;）や右揃え（text-align: right;）にすることが可能です。

複雑な表の作成

<table>タグは、複雑なデータや大規模な表でも柔軟に対応できます。例えば、スポーツの試合結果や株価のデータなど、複数の行と列で構成される大規模なデータ表に向いています。

複雑な表の例

<table border="1">
  <caption>2024年 スポーツ大会結果</caption>
  <tr>
    <th>チーム名</th>
    <th>試合数</th>
    <th>勝ち</th>
    <th>負け</th>
    <th>引き分け</th>
  </tr>
  <tr>
    <td>チームA</td>
    <td>10</td>
    <td>8</td>
    <td>2</td>
    <td>0</td>
  </tr>
  <tr>
    <td>チームB</td>
    <td>10</td>
    <td>6</td>
    <td>3</td>
    <td>1</td>
  </tr>
  <tr>
    <td>チームC</td>
    <td>10</td>
    <td>5</td>
    <td>4</td>
    <td>1</td>
  </tr>
</table>

この例では、スポーツ大会の結果を表で整理しています。<caption>タグを使用して表のタイトルを追加しており、データが見やすくなっています。

CSSを使ったテーブルのスタイリング

<table>タグは、CSSを使ってより魅力的にスタイリングすることも可能です。以下は、CSSで表にスタイルを追加した例です。

スタイリングされた表の例

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

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

  th {
    background-color: #f2f2f2;
  }

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

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

この例では、CSSを使って表の幅を100％に設定し、セルにパディングを追加しました。行の背景色も交互に変えており、データが読みやすくなっています。

まとめ

<table>タグは、データを整理して表示するのに非常に便利なHTML要素です。基本的な構成から応用的な使い方まで、さまざまな方法でテーブルを作成できます。colspanやrowspanを使ってセルをまたがせたり、CSSを使って見た目を整えたりすることで、より機能的で魅力的な表を作成することができます。

基本的な<table>タグの構成

基本の表の例

詳細な<table>タグのオプション

1. border属性

2. colspan属性

3. rowspan属性