MENU

HTMLテーブルの下に余白を追加する方法｜CSS margin-bottom・br・空行挿入の完全ガイド

WordPress

表の直後に適切な余白を作るだけで、ページの読みやすさやコンバージョン率は驚くほど変わります。本記事では「HTML の <table> の下に空行（下余白）を追加する」ための実装を、最短手順からベストプラクティス、WordPressでの適用、運用設計やトラブル対応まで徹底解説します。すべてコピペで使えるコード付きです。

ITtripTOOLS
その「面倒」、無料で解決。 ITtripがつくる、6つの道具。 無料ツール一覧へ すべて無料・追加課金なし
先頭0を守るCSV編集こわさないCSV PDFに直接書き込みかけるPDF 写真＋説明をPDFに写レポ スマホ⇄PCで共有コピペ便 · 文章・写真 みんなの日程を調整日程Fit 匿名質問・投票を集めるKOEQ
目次

結論と全体像：最短は margin-bottom、場面で使い分ける

最も推奨されるのは CSS でテーブル自体に下マージン（margin-bottom）を指定する方法です。次善策として、すぐに空行を増やしたいだけなら <br> をテーブル直後に挿入します。行間を広げたいなどテーブル内部の見た目を整える場合は、空行専用の行（<tr>）を差し込むのが手軽です。

方法目的1行サンプル長所注意点おすすめ度
CSSで下マージン（推奨）表の「外側」に余白<table style="margin-bottom: 30pt">セマンティクスを損なわず再利用◎デザイン管理が必要★★★★★
<br>を直後に置く手早く空行を追加</table><br><br>即効性・学習コスト低乱用で可読性・保守性↓★★★☆☆
空行用の行を挿入表「内部」の行間調整<tr><td colspan="7"><br></td></tr>列幅を崩さず余白化構造に「飾り行」を増やす★★★☆☆

方法1：CSSでテーブル下に余白を追加（ベストプラクティス）

まずは最短の解決策から。テーブル要素に margin-bottom を与えるだけで、表の直後に任意の余白を作れます。単位は pt の他に px、em、rem など自由に選べます。

最小コード（インラインスタイル）

&lt;table style="margin-bottom: 30pt"&gt;
  ...
&lt;/table&gt;

提示のとおり、pt でも動作しますが、画面向けには px や rem を推奨します。例えば本文が拡大縮小されても余白スケールを維持したい場合は rem が便利です。

外部／内部スタイルにまとめる（推奨設計）

<style>
  .table--gap-m { margin-bottom: 1.5rem; }   /* 標準余白 */
  .table--gap-l { margin-bottom: 2.5rem; }   /* 大きめ余白 */
</style>

...
テーブルの次の本文...

...
別セクションの本文...

クラス化すると、複数のテーブルで一貫した余白を再利用できます。デザインシステム（余白スケール）を用意すると運用が安定します。

CSSカスタムプロパティで運用を楽に

<style>
  :root { --table-gap: 2rem; }
  table.is-spaced { margin-bottom: var(--table-gap); }
</style>

...

全体の間隔を見直したい時は --table-gap の値を1か所変えるだけ。キャンペーンや季節で余白を切り替える運用にも向きます。

「うまく余白が出ない」時のチェックリスト

症状原因になりがち対策コード例
余白が消える／詰まる隣接ブロックとのマージン相殺（margin collapse）.wrapper { padding-bottom: 1px; } または .wrapper { display: flow-root; }
表がフロートや画像に重なる前要素が float、次要素がクリアされていない.next-block { clear: both; }
印刷時だけ余白が大きい/小さいpt と px の混在、プリントCSS未定義@media print { table { margin-bottom: 12pt; } }

方法2：テーブル直後に改行タグを置く（手っ取り早い）

手早く空行を足したい時は、テーブルを閉じた直後に <br> を挿入します。2行分なら2つ続けて書くだけです。

&lt;/table&gt;
&lt;br&gt;&lt;br&gt;

この方法は即効性は高いものの、過剰に使うとマークアップが散らかりやすい点に注意してください。後から全ページの余白ポリシーを変更する場合、<br> の個数を全箇所で調整することになり、保守コストが跳ね上がります。
一方で、一時的・ローカルな微調整や、外部CSSを触れない環境（たとえば一部のエディタ権限）では実務的に有用です。

<br>の健全な使い方とルール化例

  • 数は最小限（基本は2つまで）。大量の連打は避ける。
  • 意味のない空段落（<p>&nbsp;</p>）で代用しない。
  • 将来 CSS に置き換える前提なら、<!-- TODO: CSSに移行 --> のコメントを添えておく。

方法3：テーブル内に空行専用の行を挿入（行間をあけたい場合）

表の「外側」ではなく「内部の行間」を作りたいなら、空行専用の行を差し込むのが簡単です。すべての列幅を保ったまま余白行を作るため、colspan は列数に合わせます。

&lt;tr&gt;
  &lt;td colspan="7"&gt;&lt;br&gt;&lt;/td&gt;  &lt;!-- 列が 7 なら colspan="7" --&gt;
&lt;/tr&gt;

より厳密には、スタイルシートで高さを与える方法もあります。

<style>
  .row--spacer > td { padding: 0; height: 0.75rem; border: 0; }
</style>

アクセシビリティ的に意味を持たない行なので、読み上げ配慮として aria-hidden="true" を付ける運用もあります（ただし表の構造解釈に依存するため、プロジェクトのガイドラインに合わせて選択してください）。

追加テクニック：外側をコントロールして安定した余白を設計

セクションラッパーで余白を制御

<style>
  .section { padding-bottom: 2rem; }
  .section > table { margin-bottom: 1rem; }
</style>


...表の後の本文...

コンテナの padding-bottom は margin の相殺を回避でき、複数要素が混在する領域でも余白設計が安定します。

複数テーブルの間隔を一括で

&lt;style&gt;
  /* テーブルが連続する場合のみ間隔を広く */
  table + table { margin-top: 2rem; }
  /* テーブルの後の本文には標準余白 */
  table + p { margin-top: 1rem; }
&lt;/style&gt;

見出しやキャプションとの整合

<style>
  table { margin-bottom: 1.5rem; }
  caption { caption-side: top; margin-bottom: .5rem; font-weight: 600; }
</style>


...

売上推移（四半期）

単位の選び方：pt / px / em / rem の使い分け

単位特徴向いている場面例
pt印刷での寸法基準。画面でも使えるがデバイス差を受けやすい。プリントCSS、帳票の厳密な調整margin-bottom: 24pt;
px画面調整の定番。直感的で扱いやすい。固定グリッド、ピクセルパーフェクトが必要なUImargin-bottom: 24px;
em親要素のフォントサイズ基準。ローカルコンテキストに追従。本文サイズに比例させたい局所調整margin-bottom: 1.2em;
remルート（html）のフォントサイズ基準。全体スケーリングに強い。サイト全体の余白スケール統一margin-bottom: 1.5rem;

テーブル内部の余白を整えたいときの選択肢

  • セル内の余白： td, th { padding: 0.75rem; }
  • セル間の間隔： table { border-collapse: separate; border-spacing: 0 8px; }（行の間を空けたいときに有効）
  • 行の高さ： tr { height: 2.5rem; } は最後の手段。原則はセルの padding を使う。

WordPressでの適用ポイント（運用ベース）

  • ブロックエディター： テーブルブロックの「追加CSSクラス」に is-spaced などを指定し、テーマまたは追加CSSに table.is-spaced { margin-bottom: 1.5rem; } を定義。
  • クラシックエディター： HTMLタブでテーブルにクラスやスタイルを直接付与（例：<table class="table--gap-m">）。
  • プラグインやテーマ更新でCSSが変わる場合： ユーティリティクラス方式（mb-16 など）を用意し、本文からはそのクラスだけを呼び出すと影響範囲を局所化できます。

コピペ用テンプレート集（そのまま使える）

テンプレ1：すべてのテーブルに下余白を統一付与

&lt;style&gt;
  article .entry-content table { margin-bottom: 1.75rem; }
&lt;/style&gt;

テンプレ2：特定のテーブルだけ余白を増やす

<style>
  .table--important { margin-bottom: 2.5rem; }
</style>

...

テンプレ3：表の直後に2行分の空行（即効）

&lt;/table&gt;
&lt;br&gt;&lt;br&gt;

テンプレ4：行間を空けるためのスペーサー行

<style>
  .row--spacer > td { padding: 0; height: .75rem; border: 0; }
</style>

実践サンプル：説明テキストと表の間に「ちょうど良い」余白

<style>
  :root { --gap-para-table: 1.25rem; }
  p + table { margin-top: var(--gap-para-table); }
  table { margin-bottom: 1.5rem; }
  h3 + table { margin-top: .75rem; } /* 見出し直後は詰め気味 */
</style>

以下の表は2025年の四半期データです。
...
表の補足説明が続きます。

品質を落とすアンチパターン（避けるべき例）

  • <p>&nbsp;</p> を空行の代用に使う： スクリーンリーダーや翻訳でゴミ化。CSSで余白を。
  • <br> の大量連打： 将来の一括調整が困難に。
  • 高さ指定で見た目だけ整える： tr { height: 40px; } はレスポンシブ破綻の温床。
  • テーマCSSに依存しすぎる： アップデートで意図しない崩れ。ユーティリティクラスで防御。

よくある質問（FAQ）

Q. margin-bottom が効かないときは？

多くはマージン相殺か、次要素のレイアウト（float/absolute）起因です。display: flow-root; をコンテナに与える、次要素に clear: both; を付ける、コンテナに padding-bottom を1pxだけ足すなどで解決します。

Q. 余白の単位は何を選べばいい？

画面ベースなら rem を基本値に、微調整で px を併用するのが実務的です。帳票や印刷中心なら pt も検討。

Q. 行間を広げたいのに、下余白ではダメ？

テーブルの外側を広げる margin-bottom では「行間」は変わりません。セルの padding、border-spacing、スペーサー行など内部調整を選びます。

Q. WordPressでCSSを触れない権限です。

やむを得ない場合はインラインスタイル（例：<table style="margin-bottom:1.5rem">）や、最小限の <br> を併用します。後で権限を得られたら、必ずクラス化してCSSに移行しましょう。

チェックリスト：実装前後に確認すべきこと

  • デザインシステムの余白スケール（例：4の倍数、8の倍数）と整合しているか。
  • モバイル・タブレット・デスクトップで余白が過不足ないか。
  • 最終要素（ページ末尾）の余白が大きすぎないか（フッターとのバランス）。
  • 印刷時（@media print）の余白も自然か。
  • 表が複数連続するケースで間隔ロジックが統一されているか（table + table など）。

提示要件を満たす具体コード（再掲・コピペ用）

CSS で下マージン（推奨）

&lt;table style="margin-bottom: 30pt"&gt;
  ...
&lt;/table&gt;

テーブル直後に改行タグを置く

&lt;/table&gt;
&lt;br&gt;&lt;br&gt;

テーブル内に空行専用の行を挿入する

&lt;tr&gt;
  &lt;td colspan="7"&gt;&lt;br&gt;&lt;/td&gt;  &lt;!-- 列が 7 なら colspan="7" --&gt;
&lt;/tr&gt;

最後に：可読性・保守性・アクセシビリティの三方よしを狙う

下余白は単なる見た目の問題に見えて、読みやすさ（可読性）、修正のしやすさ（保守性）、そして誰にとっても使いやすい（アクセシビリティ）という三要素に直結します。まずは CSS の margin-bottom でルール化し、必要に応じて <br> やスペーサー行を最小限で補助する。これが、長く運用できる最適解です。

付録：動作確認用の最小デモ

下記を丸ごと貼り付け、余白の挙動をすぐ確認できます。

<style>
  :root { --gap: 1.5rem; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ccc; padding: .5rem; text-align: left; }
  .is-spaced { margin-bottom: var(--gap); }
  .row--spacer > td { padding: 0; height: .75rem; border: 0; }
</style>

デモ1：CSSで下余白（推奨）

項目値
A100
B200

この段落はテーブルの下余白の後に表示されます。

デモ2：<br>で2行分の空行

項目値
C300




この段落は改行タグで空けた後に表示されます。

デモ3：スペーサー行で行間を作る

製品価格
X1,000

Y2,000

表内部の行間が広がったのが分かります。
WordPress
WordPress HTML CSS

この記事を書いた人

佐藤健司のアバター 佐藤健司

実務の現場で詰まりがちなポイントを地図にするITブログ「IT trip」を運営。Windows／Office（Teams・Excel）からSQL、サーバ運用、ガジェットまで、再現性のある手順と“なぜそうなるか”を丁寧に解説します。読んだらすぐ試せること、そして迷った人の次の一歩が見えることを大切にしています。

関連記事

コメント

コメントする

目次