Skip to content

8. テーブルの作成

テーブルは、データを行と列で整理して表示するための非常に重要な要素です。ここでは、HTML を使用してテーブルを作成する基本的な方法と、スタイルのカスタマイズ方法について学びます。

8.1 テーブルの基本構造

HTML では、<table>タグを使用してテーブルを作成します。テーブルは行（<tr>タグ）とセル（<td>タグ）で構成されます。以下は基本的なテーブルの構造です。

8.1.1 サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>基本的なテーブル</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>セル1</td>
        <td>セル2</td>
      </tr>
      <tr>
        <td>セル3</td>
        <td>セル4</td>
      </tr>
    </table>
  </body>
</html>

8.1.2 解説

上記のコードでは、<table>タグでテーブルを作成し、<tr>タグで行を、<td>タグでセルを定義しています。border="1"属性を使用して、セルの境界線を表示しています。

8.2 見出しセル

テーブルには見出しセル（ヘッダセル）を追加することができます。これには<th>タグを使用します。

8.2.1 サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>見出し付きテーブル</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>見出し1</th>
        <th>見出し2</th>
      </tr>
      <tr>
        <td>セル1</td>
        <td>セル2</td>
      </tr>
      <tr>
        <td>セル3</td>
        <td>セル4</td>
      </tr>
    </table>
  </body>
</html>

8.2.2 解説

<th>タグを使用することで、テーブルの見出しセルを作成し、そのセルの内容が中央揃えかつ太字になります。

8.3 複数行・複数列の結合

テーブルでは、セルを結合して複数の行または列にまたがるセルを作成することができます。これには、rowspanおよびcolspan属性を使用します。

8.3.1 サンプルコード：行の結合

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>行の結合</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th rowspan="2">見出し1</th>
        <th>見出し2</th>
      </tr>
      <tr>
        <td>セル2</td>
      </tr>
      <tr>
        <td>セル3</td>
        <td>セル4</td>
      </tr>
    </table>
  </body>
</html>

8.3.2 サンプルコード：列の結合

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>列の結合</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>見出し1</th>
        <th colspan="2">見出し2-3</th>
      </tr>
      <tr>
        <td>セル1</td>
        <td>セル2</td>
        <td>セル3</td>
      </tr>
      <tr>
        <td>セル4</td>
        <td>セル5</td>
        <td>セル6</td>
      </tr>
    </table>
  </body>
</html>

8.3.3 解説

上記のように、rowspan属性を使用するとセルを縦方向に結合し、colspan属性を使用するとセルを横方向に結合することができます。

8.4 テーブルのスタイル

テーブルのスタイルをカスタマイズするために CSS を使用します。これにより、より見やすいテーブルを作成することができます。

8.4.1 サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>カスタムスタイルのテーブル</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>見出し1</th>
        <th>見出し2</th>
      </tr>
      <tr>
        <td>セル1</td>
        <td>セル2</td>
      </tr>
      <tr>
        <td>セル3</td>
        <td>セル4</td>
      </tr>
    </table>
  </body>
</html>

8.4.2 解説

上記の例では、CSS を使用してテーブル全体に幅を設定し、境界線をセル間で共有するようにし、各セルのパディングとテキストの配置を設定しています。ヘッダーセルには背景色も設定しました。

以上が、基本的な HTML のテーブル作成方法とスタイリングの基本です。実際にコードを試してみて、さまざまなテーブルを作成してみてください。