複数のtableタグを横に並べる方法を解説!

複数のtable要素を横並びにする方法をサンプルコード付きで解説します。CSSを使った方法やtableタグを入れ子にした方法など複数のやり方を紹介します。

コンテンツ [表示]

  1. 1複数のtableタグを横に並べたい
  2. 2複数のtableタグを横に並べる方法
  3. 2.1CSSで横に並べる
  4. 2.2table要素の入れ子
  5. 2.3【HTML5で廃止】align属性を利用する

複数のtableタグを横に並べたい

複数のtableを作成し、それを横に並べる方法について解説します。

tableでは中身のthtdの要素を横に並べる事は出来ますが、今回はtable要素自体を横に並べる方法です。

やり方としてはいくつかありますので、順番に紹介していきたいと思います。

Photo byvanmarciano

複数のtableタグを横に並べる方法

CSSで横に並べる

複数tableを横に並べるにはCSSを利用するのが一般的です。下記ではflexboxを利用して複数のtable要素を横にならべているサンプルコードです。

もちろん横並びの方法であればflexboxを利用しなくても可能です。下記ではfloatを使って横並びにしています。

あわせて読みたい
float
CSSのfloatプロパティは指定した要素をブロック内の左右のどちらに寄せるかを制御するプロパティです。floatプロパティの構文や使い方をサンプルコード付きで解説します。

table要素の入れ子

次にtable要素を入れ子にして横並びにする方法です。

こちらのやり方ではHTMLのみで2つのtable要素は横並びになります。ただしHTMLが複雑化するので、やはり特別な理由がない限りはCSSのやり方をおすすめします。

【HTML5で廃止】align属性を利用する

最後に以前は可能だった方法も一応紹介しておきます。

HTML5以前では、tableタグにはalign属性がありました。align属性をleftにしたtableともう一つのテーブルを連続で置くことで横並びが可能でした。

tableのalign属性(HTML5で廃止)

<table align="left">
  <tr>
    <td>1番目</td>
  </tr>
</table>
<table>
  <tr>
    <td>2番目</td>
  </tr>
</table>

今後WEB開発ではHTML5以前の書き方はするべきではなく、上記のやり方ではなくぜひCSSを使った横に並べるやり方で行いましょう。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次