最終更新日: 2021年2月2日
複数のtableタグを横に並べる方法を解説！
複数のtable要素を横並びにする方法をサンプルコード付きで解説します。CSSを使った方法やtableタグを入れ子にした方法など複数のやり方を紹介します。
複数のtableタグを横に並べたい
複数のtableを作成し、それを横に並べる方法について解説します。
tableでは中身のthやtdの要素を横に並べる事は出来ますが、今回はtable要素自体を横に並べる方法です。
やり方としてはいくつかありますので、順番に紹介していきたいと思います。
複数のtableタグを横に並べる方法
CSSで横に並べる
複数tableを横に並べるにはCSSを利用するのが一般的です。下記ではflexboxを利用して複数のtable要素を横にならべているサンプルコードです。
もちろん横並びの方法であればflexboxを利用しなくても可能です。下記では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を使った横に並べるやり方で行いましょう。
