CSSで表を中央寄せする方法まとめ｜テーブル自体も文字もキレイに整えるコツ

CSS

Webサイトを作っていて、HTMLの<table>（表）を中央に寄せたい場面は意外と多いです。

でも「テーブル全体を中央寄せしたい」「中の文字を中央にしたい」「縦にも中央寄せしたい」など、どのケースかによってCSSの書き方が変わるので混乱しがち。

この記事では、CSSで表（テーブル）を中央に寄せる方法を、具体例付きでわかりやすく解説します。

読み終えるころには、あなたのページのテーブル配置がきれいに整っているはずです。

スポンサーリンク

まず整理しよう：テーブルの中央寄せには3つのパターンがある

表の中央寄せと一口に言っても、実は以下の3つのパターンがあります：

パターン1：テーブル全体をページ内で中央寄せ

こんなとき： 表をページの中央に配置したい

パターン2：テーブル内の文字を中央寄せ

こんなとき： セルの中の文字を見やすく整えたい

パターン3：テーブルを縦方向にも中央寄せ

こんなとき： 画面全体の真ん中に表を配置したい

それぞれ異なるCSSテクニックが必要なので、順番に見ていきましょう。

1. 表（テーブル）全体を中央寄せする方法

基本：margin autoを使った横中央寄せ

まずは、表全体をページの横方向で中央に寄せたい場合です。

一番よく使うのはmargin: autoを使った方法です。

HTML：

<table class="center-table">
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td>1,000円</td>
      <td>あり</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td>1,500円</td>
      <td>なし</td>
    </tr>
  </tbody>
</table>

CSS：

.center-table {
  margin-left: auto;
  margin-right: auto;
  /* またはまとめて */
  margin: 0 auto;
  
  /* 幅を必ず指定する */
  width: 60%;
  
  /* 見た目を整える */
  border-collapse: collapse;
  border: 1px solid #ddd;
}

.center-table th,
.center-table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.center-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

重要なポイント

widthを必ず指定する

問題： margin: auto は幅が決まっていないと効きません。 解決： 必ず width を指定してください。

/* ❌ 間違い：幅がないので中央寄せされない */
.table {
  margin: 0 auto;
}

/* ✅ 正解：幅を指定することで中央寄せされる */
.table {
  margin: 0 auto;
  width: 50%; /* または 600px など */
}

レスポンシブ対応の考慮

パーセント指定： 画面サイズに応じて自動調整

.center-table {
  margin: 0 auto;
  width: 80%; /* 画面の80%の幅 */
  max-width: 800px; /* 最大幅を制限 */
}

ピクセル指定： 固定幅にしたい場合

.center-table {
  margin: 0 auto;
  width: 600px;
}

その他の中央寄せ方法

flexboxを使った方法

説明： 親要素でflexboxを使用する方法です。

.table-container {
  display: flex;
  justify-content: center;
}

.table {
  /* widthの指定は不要 */
  border-collapse: collapse;
}

text-alignを使った方法

説明： 親要素で text-align: center を使用する方法です。

.table-container {
  text-align: center;
}

.table {
  display: inline-table; /* 重要：inline-tableにする */
  border-collapse: collapse;
}

テーブル全体を中央に置くにはmargin: autoが最も一般的で確実です。

次は、表の中の文字を中央に寄せる方法を見ていきましょう。

2. 表の中の文字を中央に寄せる方法

横方向の中央寄せ（text-align）

テーブルのセル内（<td>や<th>）のテキストを中央に寄せるにはtext-align: centerを使います。

CSS：

/* 全てのセルを中央寄せ */
.center-text td,
.center-text th {
  text-align: center;
}

/* 特定の列だけ中央寄せ */
.center-text .price-column {
  text-align: center;
}

/* ヘッダーだけ中央寄せ */
.center-text th {
  text-align: center;
}

/* データセルは左寄せ、ヘッダーは中央寄せ */
.center-text td {
  text-align: left;
}
.center-text th {
  text-align: center;
}

HTML：

<table class="center-text">
  <thead>
    <tr>
      <th>商品名</th>
      <th class="price-column">価格</th>
      <th>詳細</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td class="price-column">1,000円</td>
      <td>高品質な商品です</td>
    </tr>
  </tbody>
</table>

縦方向の中央寄せ（vertical-align）

セル内のテキストを縦方向（上下方向）で中央に揃えるにはvertical-align: middleを使います。

CSS：

.vertical-center td,
.vertical-center th {
  vertical-align: middle;
  height: 60px; /* 高さを指定して効果を分かりやすく */
}

HTML：

<table class="vertical-center">
  <tr>
    <td>この文字は<br>縦方向で<br>中央寄せされます</td>
    <td>通常の<br>テキスト</td>
  </tr>
</table>

横・縦両方の中央寄せ

最もよく使われるパターンは、横と縦の両方で中央寄せすることです。

CSS：

.fully-centered td,
.fully-centered th {
  text-align: center;     /* 横方向の中央寄せ */
  vertical-align: middle; /* 縦方向の中央寄せ */
  padding: 15px;
}

セルごとに個別設定

用途別のセル設定例：

/* 数値列：右寄せ */
.table .number {
  text-align: right;
  vertical-align: middle;
}

/* タイトル列：左寄せ、上寄せ */
.table .title {
  text-align: left;
  vertical-align: top;
}

/* アクション列：中央寄せ */
.table .action {
  text-align: center;
  vertical-align: middle;
}

vertical-alignの注意点

重要： vertical-alignはテーブルセルやインライン要素にしか効きません。

/* ✅ 正解：テーブルセルなので効く */
td {
  vertical-align: middle;
}

/* ❌ 間違い：divなどのブロック要素には効かない */
div {
  vertical-align: middle; /* 効果なし */
}

このように、テーブルの中の文字を中央に寄せるにはtext-alignとvertical-alignを組み合わせるのが基本です。

次は、テーブルそのものを上下方向に中央に寄せる方法を紹介します。

3. テーブルを縦方向にも中央寄せしたいとき

flexboxを使った完全中央寄せ

テーブル自体を、ページの上下の中央に配置したいケースもあります。

この場合、flexboxを使うのが最も簡単で確実です。

HTML：

<div class="full-center-wrapper">
  <table class="centered-table">
    <thead>
      <tr>
        <th>項目</th>
        <th>値</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>売上</td>
        <td>1,000万円</td>
      </tr>
      <tr>
        <td>利益</td>
        <td>200万円</td>
      </tr>
    </tbody>
  </table>
</div>

CSS：

.full-center-wrapper {
  display: flex;
  justify-content: center; /* 横方向の中央寄せ */
  align-items: center;     /* 縦方向の中央寄せ */
  
  /* 重要：親要素の高さを指定 */
  height: 100vh;           /* 画面の高さいっぱい */
  
  /* 背景色で分かりやすく */
  background-color: #f8f9fa;
}

.centered-table {
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.centered-table th,
.centered-table td {
  padding: 15px 20px;
  border: 1px solid #ddd;
  text-align: center;
}

.centered-table th {
  background-color: #007bff;
  color: white;
}

CSS Gridを使った方法

CSS Gridでも同様の効果が得られます。

CSS：

.grid-center-wrapper {
  display: grid;
  place-items: center; /* 縦横両方の中央寄せ */
  height: 100vh;
  background-color: #f8f9fa;
}

position absoluteを使った方法

従来の方法ですが、今でも使えます。

CSS：

.absolute-center-wrapper {
  position: relative;
  height: 100vh;
}

.absolute-centered-table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  border-collapse: collapse;
}

重要なポイント

親要素の高さ指定が必須

問題： 親要素の高さを指定しないと、縦中央寄せは効きません。

/* ❌ 高さがないので縦中央寄せされない */
.wrapper {
  display: flex;
  align-items: center;
}

/* ✅ 高さを指定することで縦中央寄せされる */
.wrapper {
  display: flex;
  align-items: center;
  height: 100vh; /* または具体的なpx値 */
}

高さの指定方法

/* 画面全体の高さ */
height: 100vh;

/* 固定の高さ */
height: 500px;

/* 親要素の100% */
height: 100%;

/* 最小の高さ */
min-height: 100vh;

これでテーブル全体を画面中央に、縦横ともに配置することができます。

最後に、よくある間違いと注意点を確認しておきましょう。

4. よくある間違いと注意点

間違い1：margin autoで上下中央寄せしようとする

問題： 多くの人が、テーブルを上下中央に置きたいときにmargin: autoだけでやろうとしますが、上下には効きません。

/* ❌ 間違い：上下の中央寄せはされない */
.table {
  margin: auto;
  width: 50%;
}

解決策： 上下中央寄せはflexやgridを使う必要があります。

/* ✅ 正解：flexで上下中央寄せ */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

間違い2：vertical-alignをブロック要素に使う

問題： vertical-alignはテーブルセルやインライン要素にしか効きません。

/* ❌ 間違い：divには効かない */
.container {
  vertical-align: middle;
}

解決策： ブロック要素の縦中央寄せにはflexやgridを使います。

/* ✅ 正解：flexで縦中央寄せ */
.container {
  display: flex;
  align-items: center;
}

間違い3：widthを指定せずにmargin autoを使う

問題： 幅が指定されていないとmargin: autoは効きません。

/* ❌ 間違い：幅がないので中央寄せされない */
.table {
  margin: 0 auto;
}

解決策： 必ず幅を指定します。

/* ✅ 正解：幅を指定する */
.table {
  margin: 0 auto;
  width: 80%;
}

間違い4：レスポンシブ対応を忘れる

問題： 固定幅だけ指定すると、スマホで表示が崩れます。

/* ❌ 問題：スマホで横スクロールが発生 */
.table {
  margin: 0 auto;
  width: 800px;
}

解決策： max-widthと組み合わせます。

/* ✅ 改善：レスポンシブ対応 */
.table {
  margin: 0 auto;
  width: 90%;
  max-width: 800px;
}

/* さらにスマホ対応 */
@media (max-width: 768px) {
  .table {
    width: 95%;
    font-size: 14px;
  }
  
  .table th,
  .table td {
    padding: 8px 4px;
  }
}

5. 実用的なテーブルスタイル例

パターン1：シンプルなデータテーブル

HTML：

<div class="table-container">
  <table class="data-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>田中太郎</td>
        <td>28</td>
        <td>エンジニア</td>
      </tr>
      <tr>
        <td>002</td>
        <td>佐藤花子</td>
        <td>32</td>
        <td>デザイナー</td>
      </tr>
    </tbody>
  </table>
</div>

CSS：

.table-container {
  padding: 20px;
}

.data-table {
  margin: 0 auto;
  width: 80%;
  max-width: 600px;
  border-collapse: collapse;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.data-table th {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.data-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.data-table tr:hover {
  background-color: #f5f5f5;
}

パターン2：価格表テーブル

HTML：

<div class="pricing-container">
  <table class="pricing-table">
    <thead>
      <tr>
        <th>プラン</th>
        <th>月額料金</th>
        <th>機能</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ベーシック</td>
        <td class="price">¥1,000</td>
        <td>基本機能</td>
      </tr>
      <tr class="featured">
        <td>プレミアム</td>
        <td class="price">¥2,000</td>
        <td>全機能</td>
      </tr>
    </tbody>
  </table>
</div>

CSS：

.pricing-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.pricing-table {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 500px;
}

.pricing-table th {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 18px;
}

.pricing-table td {
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #eee;
}

.pricing-table .price {
  font-size: 24px;
  font-weight: bold;
  color: #e74c3c;
}

.pricing-table .featured {
  background-color: #fff3cd;
}

.pricing-table .featured .price {
  color: #d39e00;
}

パターン3：レスポンシブ対応テーブル

CSS：

.responsive-table {
  margin: 0 auto;
  width: 95%;
  max-width: 800px;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #ddd;
}

/* タブレット対応 */
@media (max-width: 768px) {
  .responsive-table {
    width: 100%;
    font-size: 14px;
  }
  
  .responsive-table th,
  .responsive-table td {
    padding: 8px 4px;
  }
}

/* スマホ対応：縦積み表示 */
@media (max-width: 480px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }
  
  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .responsive-table tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
  }
  
  .responsive-table td {
    border: none;
    position: relative;
    padding-left: 50%;
    text-align: left;
  }
  
  .responsive-table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
  }
}

まとめ：用途に応じてCSSを使い分けよう

CSSでテーブル（表）を中央に寄せる方法は、目的に応じて複数のパターンがあります。

基本パターンのまとめ

テーブル全体の横中央寄せ：

.table {
  margin: 0 auto;
  width: 80%; /* 必須 */
}

セル内テキストの中央寄せ：

.table td,
.table th {
  text-align: center;     /* 横方向 */
  vertical-align: middle; /* 縦方向 */
}

テーブル全体の完全中央寄せ：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

使い分けのポイント

  • 横方向の中央寄せ：margin: auto + width が最も確実
  • テキストの中央寄せ：text-align: center + vertical-align: middle
  • 完全な中央寄せ：flexbox が最も簡単で強力
  • レスポンシブ対応：max-width と メディアクエリを組み合わせる

よくある用途別のおすすめ

データ表示テーブル：

  • テーブル全体は margin: auto で中央寄せ
  • ヘッダーは text-align: center
  • データ列は内容に応じて左寄せ・右寄せ・中央寄せを使い分け

価格表・比較表：

  • flexbox で画面中央に配置
  • セル内容は text-align: center + vertical-align: middle

フォーム内のテーブル：

  • 親要素内で margin: auto による中央寄せ
  • ラベルは左寄せ、入力欄は適切な幅設定

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました