HTMLのテーブルの横並び表示方法

HTML CSS

HTMLのテーブルの横並び表示方法

HTMLのテーブルを横並びに表示する方法はいくつかありますが、最も一般的な方法は、flexboxやCSS Gridを使用してテーブルを並べることです。
ここでは、flexboxを使った方法とCSS Gridを使った方法の両方を紹介します。
これらの方法を使用すると、レスポンシブなデザインも簡単に実装できます。

1. Flexboxを使用した横並び表示

Flexboxを使うと、複数のテーブルを柔軟に横並びに配置することができます。
以下に、flexboxを使ってテーブルを横並びに表示する方法を説明します。

HTMLファイル (tables.html)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルの横並び表示</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="test-tables-container">
    <table class="test-table">
      <caption>テーブル1</caption>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
      </tr>
      <tr>
        <td>データ1-1</td>
        <td>データ1-2</td>
      </tr>
    </table>

    <table class="test-table">
      <caption>テーブル2</caption>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
      </tr>
      <tr>
        <td>データ2-1</td>
        <td>データ2-2</td>
      </tr>
    </table>

    <table class="test-table">
      <caption>テーブル3</caption>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
      </tr>
      <tr>
        <td>データ3-1</td>
        <td>データ3-2</td>
      </tr>
    </table>
  </div>
</body>
</html>
CSSファイル (styles.css)
.test-tables-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* テーブル間のスペース */
  padding: 20px;
}

.test-table {
  border-collapse: collapse;
  width: 200px; /* テーブルの幅を固定 */
}

.test-table caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: 10px;
}

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

上記のコードでは、div要素のdisplayプロパティにflexを設定し、子要素であるテーブルを横に並べています。
justify-contentプロパティをspace-betweenに設定することで、テーブル間のスペースが均等に配置されるようにしています。
また、gapプロパティを使って、テーブル間に20pxのスペースを設けています。

2. CSS Gridを使用した横並び表示

CSS Gridは、もっと柔軟で高度なレイアウトを実現できる方法です。
テーブルの横並びに加え、より複雑なレイアウトも簡単に作成できます。

HTMLファイル (tables-grid.html)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルの横並び表示 - CSS Grid</title>
  <link rel="stylesheet" href="styles-grid.css">
</head>
<body>
  <div class="test-grid-container">
    <table class="test-grid-table">
      <caption>テーブル1</caption>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
      </tr>
      <tr>
        <td>データ1-1</td>
        <td>データ1-2</td>
      </tr>
    </table>

    <table class="test-grid-table">
      <caption>テーブル2</caption>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
      </tr>
      <tr>
        <td>データ2-1</td>
        <td>データ2-2</td>
      </tr>
    </table>

    <table class="test-grid-table">
      <caption>テーブル3</caption>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
      </tr>
      <tr>
        <td>データ3-1</td>
        <td>データ3-2</td>
      </tr>
    </table>
  </div>
</body>
</html>
CSSファイル (styles-grid.css)
.test-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* テーブル間のスペース */
  padding: 20px;
}

.test-grid-table {
  border-collapse: collapse;
  width: 100%; /* グリッド内で自動的に調整 */
}

.test-grid-table caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: 10px;
}

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

CSS Gridを使用することで、より高度なレイアウトが可能になります。
例えば、grid-template-columnsプロパティを使って、各列の幅を均等に設定し、repeat関数で列の数を指定しています。
この例では3つのテーブルを横に並べていますが、必要に応じて列の数を変更することができます。

結論

このように、flexboxとCSS Gridの両方を使用することで、複数のHTMLテーブルを横に並べることができます。
flexboxは単純な横並びに適していますが、CSS Gridはより複雑なレイアウトに対応できます。
デザインやレイアウトの要件に応じて、これらの方法を使い分けることが重要です。

どちらの方法も、HTMLとCSSを別ファイルに分けて管理することで、コードの可読性と保守性が向上します。
また、クラス名やID名を適切に設定することで、スタイルの適用範囲を明確にし、将来的な変更にも対応しやすくなります。