ホームへ

【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の中にtablehtmlだけできれいに横並びするソースがtableだらけであり、ミスが起きやすい
display:flexきれいに理想の形にできるhtmlだけで完結しない

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

マンガで読める関連記事