【CSS/html】複数のtableを横並べする方法4選

tableは表をつくるhtmlタグです。

「tableが縦に並んじゃう！tableを2つ3つ横並べしたいんだけど！」

複数のtableを横並べする方法を4つ紹介します。

【htmlだけ】左のtableにalign="left"

左になるtableに「align="left"」を指定するとその次の要素が右に来ます。

セル	セル セル
セル セル	セル

セル	セル
セル	セル

下のpタグ

<table border align="left">
    <tr>
      <td>セル</td>
      <td>セル<br>セル</td>
    </tr>
    <tr>
      <td>セル<br>セル</td>
      <td>セル</td>
    </tr>
</table>
    
<table border>
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
</table>
<p>下のpタグ</p>

メリット

• カンタン

デメリット

• 他の要素も回り込む
• html5ではalignが廃止されている

注意点

横に並ぶ要素の幅の合計が親の幅を超えていると横並びしません。

「width="50%"」など指定して超えないようにしましょう。

ちなみにwidth属性も廃止です。

tableを3つ以上並べるときは、一番右以外のtableにalign="left"を指定しましょう。

【htmlだけ】間の縦列を結合

一つのtableの中の間となる列を結合することで2つに分かれているように見せる方法です。

セル セル	セル		セル	セル
セル	セル		セル	セル
セル	セル		セル セル セル	セル

<table border>
    <tr>
        <td>セル<br>セル</td>
        <td>セル</td>
        <td rowspan="3">&nbsp;</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル<br>セル<br>セル</td>
        <td>セル</td>
    </tr>
</table>

メリット

• 左右で行の高さがそろう
• 他の要素が回り込まない
• 廃止された属性を使っていない

デメリット

• 結合が複雑
• 上下の線がつながっている
  →完全に消すにはCSSを駆使すること

上下の線を消したい場合は下記記事を参考に消しましょう。

【htmlだけ】tableの中にtable

tableは要素を横に並べることができます。線がなく、1行2列のtableを用意し、その中にtableを入れる方法です。

セル セル セル セル

セル セル セル セル セル セル

<table>
    <tr>
        <td valign="top">
            <table border>
                <tr>
                  <td>セル</td>
                  <td>セル</td>
                </tr>
                <tr>
                  <td>セル</td>
                  <td>セル</td>
                </tr>
            </table>
        </td>
        <td valign="top">
            <table border>
                <tr>
                  <td>セル</td>
                  <td>セル<br>セル</td>
                </tr>
                <tr>
                  <td>セル<br>セル</td>
                  <td>セル</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

メリット

• 回り込まない
• widthを指定しなくても必ず横並びする
• きれいに横並びする

デメリット

• tableは表として使うべきでありレイアウト目的で使うべきではない
• ソースがtableだらけであり、ミスが起きやすい

【CSS】display:flex

CSS display:flexの子要素は横並びします。

<style>
.example{
    display: flex;
    align-items: flex-start;
}
</style>
<div class="example">
    <table border>
        <tr>
          <td>セル</td>
          <td>セル</td>
        </tr>
        <tr>
          <td>セル</td>
          <td>セル</td>
        </tr>
    </table>
    <table border>
        <tr>
          <td>セル</td>
          <td>セル<br>セル</td>
        </tr>
        <tr>
          <td>セル<br>セル</td>
          <td>セル</td>
        </tr>
    </table>
</div>

メリット

• きれいに理想の形にできる

デメリット

• なし
  （しいて言えばhtmlだけで完結しないこと）

注意点

「align-items: flex-start」を指定してtableを上寄せにしています。

左右のtableの高さをそろえたい場合「align-items: flex-start」を削除しましょう。

【まとめ】tableを横並べする方法

上のものほど簡単で、下のものほどオススメです。

方法	メリット	デメリット
左のtableにalign="left"	カンタン	他の要素も回り込む
間の縦列を結合	左右で行の高さがそろう	上下の線がつながっている
tableの中にtable	htmlだけできれいに横並びする	ソースがtableだらけであり、ミスが起きやすい
display:flex	きれいに理想の形にできる	htmlだけで完結しない

以上、tableを横並べする方法でした。