HTMLのテーブルを2段組にする方法

HTML CSS

HTMLのテーブルを2段組にする方法

HTMLのテーブルを2段組にするには、CSSのフレックスボックスレイアウトやグリッドレイアウトを使用する方法が一般的です。
これにより、2つのテーブルを横に並べることができます。
また、レスポンシブデザインを考慮して、画面サイズに応じて1段組に変更することも可能です。

以下に、HTMLとCSSを別ファイルに分けたサンプルコードを示します。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2段組テーブルの例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="test-container">
    <table class="test-table">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
        </tr>
        <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
        </tr>
      </tbody>
    </table>
    <table class="test-table">
      <thead>
        <tr>
          <th>Header A</th>
          <th>Header B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row A, Cell 1</td>
          <td>Row A, Cell 2</td>
        </tr>
        <tr>
          <td>Row B, Cell 1</td>
          <td>Row B, Cell 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

CSSファイル (styles.css)

.test-container {
  display: flex;
  gap: 20px;
}

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

.test-table th, .test-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

@media (max-width: 768px) {
  .test-container {
    flex-direction: column;
  }
}

解説

1. フレックスボックスの利用:

  • test-containerクラスにdisplay: flex;を適用することで、内部の要素（この場合、2つのテーブル）を横並びにします。
  • gapプロパティで、テーブル間の間隔を指定しています。

この例では20pxの間隔を設定しています。

2. レスポンシブ対応:

  • メディアクエリを使用して、画面幅が768px以下の場合には、flex-directionをcolumnに変更し、テーブルを縦に並べるようにしています。

これにより、スマートフォンやタブレットなどの小さい画面でも適切に表示されるようになります。

3. テーブルのスタイリング:

  • test-tableクラスでは、width: 100%;を設定しているため、テーブルはコンテナ内で最大幅を取るようになります。
  • border-collapse: collapse;を設定することで、テーブルのセル間の境界線を一つに統一し、より見やすくしています。
  • thやtdに対して、borderやpaddingを設定し、見やすい表形式にしています。

このように、CSSを活用することで、HTMLのテーブルを2段組にすることができます。
また、メディアクエリを使用して、異なる画面サイズに対応した柔軟なレイアウトを実現することが可能です。
この方法を応用することで、さらに複雑なレイアウトやデザインにも対応できるようになります。