HTMLのテーブルを横に並べる方法

HTML CSS

HTMLのテーブルを横に並べる方法

HTMLのテーブルを横に並べることなんて、滅多にないとは思いますが記載してみました。
テーブル1つでも情報量がいいのにそれを横に並べるってどんなデザインでしょうね。。。

ここでは、HTMLとCSSを使用して、複数のテーブルを横に並べる方法について説明します。
具体的には、テーブルをdisplay: inline-blockやfloatプロパティを使って並べる方法を示します。
あまり特別なことはなく、よくあるブロック要素を横並びにする実装方法です。

1. display: inline-blockを使用する方法

display: inline-blockプロパティを使用すると、テーブルを横に並べることができます。
これは、各テーブルがブロック要素として扱われながら、インライン要素のように横に配置されるためです。

HTMLファイル (index.html)
<body>
  <div>
    <table class="test-table">
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
      </tr>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
      </tr>
    </table>
    <table class="test-table">
      <tr>
        <th>ヘッダー3</th>
        <th>ヘッダー4</th>
      </tr>
      <tr>
        <td>データ3</td>
        <td>データ4</td>
      </tr>
    </table>
  </div>
</body>
CSSファイル (styles.css)
.test-table {
  display: inline-block;
  border-collapse: collapse;
  margin: 10px;
}

この例では、test-tableクラスのdisplay: inline-blockプロパティにより、テーブルが横に並びます。
テーブルの間にmarginを設定して、間隔を調整しています。

2. floatを使用する方法

floatプロパティを使ってテーブルを横に並べることもできます。
float: leftを各テーブルに指定することで、テーブルが左に寄せられて横に並びます。

HTMLファイル (index.html)
<body>
  <div class="test-container">
    <table class="test-table">
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
      </tr>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
      </tr>
    </table>
    <table class="test-table">
      <tr>
        <th>ヘッダー3</th>
        <th>ヘッダー4</th>
      </tr>
      <tr>
        <td>データ3</td>
        <td>データ4</td>
      </tr>
    </table>
  </div>
</body>
CSSファイル (styles.css)
.test-container {
  overflow: hidden; /* クリアリングのために必要 */
}

.test-table {
  float: left;
  border-collapse: collapse;
  margin: 10px;
}

この方法では、test-containerクラスのoverflow: hiddenプロパティを使って浮動要素のクリアリング(後に続く要素に影響が出ないようにする)を行っています。
test-tableクラスのfloat: leftにより、テーブルが左に寄せられて横に並びます。
テーブルの間隔を調整するためにmarginを設定しています。

3. Flexboxを使用する方法

Flexboxを使用して、テーブルを簡単に横に並べることもできます。
Flexboxは、より柔軟なレイアウト管理を可能にします。

HTMLファイル (index.html)
<body>
  <div class="test-container">
    <table class="test-table">
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
      </tr>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
      </tr>
    </table>
    <table class="test-table">
      <tr>
        <th>ヘッダー3</th>
        <th>ヘッダー4</th>
      </tr>
      <tr>
        <td>データ3</td>
        <td>データ4</td>
      </tr>
    </table>
  </div>
</body>
CSSファイル (styles.css)
.test-container {
  display: flex;
  justify-content: center;
}

.test-table {
  border-collapse: collapse;
  margin: 10px;
}

Flexboxを使用する方法では、test-containerクラスにdisplay: flexとjustify-content: centerを指定して、テーブルを横に並べるとともに中央揃えにしています。
テーブルの間隔はmarginで調整しています。

これらの方法のいずれかを使用することで、HTMLのテーブルを横に並べることができます。
選択する方法は、レイアウトの要件やブラウザの互換性などに応じて決めると良いでしょう。