HTMLでテーブルを中央寄せする方法｜表自体・文字・セルの中央揃えまで徹底解説

html

ホームページやブログに表（テーブル）を入れたとき、「ページの真ん中にテーブルを置きたい」「表の中の文字を中央に揃えたい」と思ったことはありませんか？

HTMLとCSSを使えば、テーブル全体を中央に配置したり、セルの中の文字を中央揃えにしたり、自由に調整できます。

この記事では、以下の内容を初心者の方にもわかるように、例を使ってわかりやすく解説します：

スポンサーリンク

テーブルの中央寄せの基本概念

中央寄せの種類

テーブルの中央寄せには、大きく分けて2つの種類があります：

種類対象効果
水平方向の中央寄せテーブル全体ページの左右中央に配置
セル内の中央揃えセル内の文字・要素セル内で上下左右中央に配置

使用するCSSプロパティ

プロパティ用途例
marginテーブル全体の位置調整margin: auto;
text-align水平方向の文字揃えtext-align: center;
vertical-align垂直方向の文字揃えvertical-align: middle;

テーブル自体を中央寄せにする方法

推奨方法：marginを使った中央寄せ

最も一般的で推奨される方法は、テーブルに margin: auto; を指定する方法です。

基本的な書き方

<style>
  .center-table {
    margin: auto;
    border-collapse: collapse;
  }
  
  .center-table th,
  .center-table td {
    border: 1px solid #333;
    padding: 8px;
  }
</style>

<table class="center-table">
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>50個</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>80円</td>
    <td>30個</td>
  </tr>
</table>

marginの動作原理

margin: auto; は左右のマージンを自動調整して、要素を親要素の中央に配置します：

  • 左マージン：自動計算
  • 右マージン：自動計算
  • 結果：左右のスペースが均等になり中央配置

幅を指定した中央寄せ

テーブルの幅を固定して中央寄せする場合：

<style>
  .fixed-width-table {
    width: 60%;
    margin: auto;
    border-collapse: collapse;
  }
  
  .fixed-width-table th,
  .fixed-width-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  
  .fixed-width-table th {
    background-color: #f2f2f2;
  }
</style>

<table class="fixed-width-table">
  <tr>
    <th>項目</th>
    <th>詳細</th>
  </tr>
  <tr>
    <td>商品名</td>
    <td>ワイヤレスマウス</td>
  </tr>
  <tr>
    <td>価格</td>
    <td>2,500円</td>
  </tr>
  <tr>
    <td>メーカー</td>
    <td>テックカンパニー</td>
  </tr>
</table>

古い方法と現在の方法の比較

非推奨：align属性（HTML4以前）

<!-- この書き方は古く、HTML5では非推奨 -->
<table align="center">
  <tr>
    <td>古い方法</td>
  </tr>
</table>

推奨：CSSのmargin（現在の標準）

<!-- 現在の標準的な書き方 -->
<style>
  .modern-table {
    margin: auto;
  }
</style>

<table class="modern-table">
  <tr>
    <td>現在の方法</td>
  </tr>
</table>

現在の方法を使う理由：

  • HTML5では align 属性が廃止されている
  • CSSで見た目を管理することで保守性が向上
  • レスポンシブデザインに対応しやすい

セル内の文字・データを中央揃えにする方法

水平方向の中央揃え（text-align）

セル内の文字を水平方向に中央揃えするには text-align: center; を使用します。

全セルを中央揃え

<style>
  .text-center-table {
    margin: auto;
    border-collapse: collapse;
  }
  
  .text-center-table th,
  .text-center-table td {
    border: 1px solid #333;
    padding: 10px;
    text-align: center;
  }
  
  .text-center-table th {
    background-color: #4CAF50;
    color: white;
  }
</style>

<table class="text-center-table">
  <tr>
    <th>科目</th>
    <th>点数</th>
    <th>評価</th>
  </tr>
  <tr>
    <td>数学</td>
    <td>85点</td>
    <td>B</td>
  </tr>
  <tr>
    <td>英語</td>
    <td>92点</td>
    <td>A</td>
  </tr>
  <tr>
    <td>理科</td>
    <td>78点</td>
    <td>B</td>
  </tr>
</table>

特定の列のみ中央揃え

<style>
  .selective-center-table {
    margin: auto;
    border-collapse: collapse;
  }
  
  .selective-center-table th,
  .selective-center-table td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  .selective-center-table th {
    background-color: #f2f2f2;
    text-align: center;
  }
  
  /* 2列目と3列目のみ中央揃え */
  .selective-center-table td:nth-child(2),
  .selective-center-table td:nth-child(3) {
    text-align: center;
  }
</style>

<table class="selective-center-table">
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>評価</th>
  </tr>
  <tr>
    <td>ノートパソコン</td>
    <td>89,800円</td>
    <td>★★★★☆</td>
  </tr>
  <tr>
    <td>デスクトップPC</td>
    <td>125,000円</td>
    <td>★★★★★</td>
  </tr>
</table>

垂直方向の中央揃え（vertical-align）

セルの高さが大きい場合、垂直方向の中央揃えも重要です。

基本的な垂直中央揃え

<style>
  .vertical-center-table {
    margin: auto;
    border-collapse: collapse;
  }
  
  .vertical-center-table th,
  .vertical-center-table td {
    border: 1px solid #333;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    height: 60px;
  }
  
  .vertical-center-table th {
    background-color: #2196F3;
    color: white;
  }
</style>

<table class="vertical-center-table">
  <tr>
    <th>部署</th>
    <th>人数</th>
    <th>備考</th>
  </tr>
  <tr>
    <td>営業部</td>
    <td>25名</td>
    <td>関東エリア担当</td>
  </tr>
  <tr>
    <td>開発部</td>
    <td>18名</td>
    <td>アプリ・Web開発</td>
  </tr>
</table>

vertical-alignの値

値効果
topセルの上端に揃える
middleセルの中央に揃える
bottomセルの下端に揃える
baselineベースラインに揃える（デフォルト）

完全な中央揃え（水平＋垂直）

水平と垂直の両方向で中央揃えにする包括的な例：

<style>
  .complete-center-table {
    margin: auto;
    border-collapse: collapse;
    width: 70%;
  }
  
  .complete-center-table th,
  .complete-center-table td {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    height: 50px;
  }
  
  .complete-center-table th {
    background-color: #FF9800;
    color: white;
    font-weight: bold;
  }
  
  .complete-center-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  .complete-center-table tr:hover {
    background-color: #f5f5f5;
  }
</style>

<table class="complete-center-table">
  <tr>
    <th>月</th>
    <th>売上</th>
    <th>前年比</th>
    <th>達成率</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>1,200万円</td>
    <td>+15%</td>
    <td>102%</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>1,350万円</td>
    <td>+8%</td>
    <td>98%</td>
  </tr>
  <tr>
    <td>3月</td>
    <td>1,480万円</td>
    <td>+22%</td>
    <td>115%</td>
  </tr>
</table>

レスポンシブ対応とモバイル最適化

画面サイズに応じた調整

基本的なレスポンシブテーブル

<style>
  .responsive-table-container {
    width: 100%;
    overflow-x: auto;
    margin: auto;
  }
  
  .responsive-table {
    margin: auto;
    border-collapse: collapse;
    min-width: 300px;
    width: 100%;
    max-width: 800px;
  }
  
  .responsive-table th,
  .responsive-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
  }
  
  .responsive-table th {
    background-color: #4CAF50;
    color: white;
  }
  
  /* タブレット向け調整 */
  @media screen and (max-width: 768px) {
    .responsive-table {
      font-size: 14px;
    }
    
    .responsive-table th,
    .responsive-table td {
      padding: 6px;
    }
  }
  
  /* スマートフォン向け調整 */
  @media screen and (max-width: 480px) {
    .responsive-table {
      font-size: 12px;
    }
    
    .responsive-table th,
    .responsive-table td {
      padding: 4px;
    }
  }
</style>

<div class="responsive-table-container">
  <table class="responsive-table">
    <tr>
      <th>商品コード</th>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫数</th>
      <th>カテゴリ</th>
    </tr>
    <tr>
      <td>A001</td>
      <td>ワイヤレスマウス</td>
      <td>2,500円</td>
      <td>25個</td>
      <td>PC周辺機器</td>
    </tr>
    <tr>
      <td>A002</td>
      <td>USBキーボード</td>
      <td>4,200円</td>
      <td>18個</td>
      <td>PC周辺機器</td>
    </tr>
  </table>
</div>

モバイルファーストアプローチ

<style>
  .mobile-first-table {
    width: 100%;
    margin: auto;
    border-collapse: collapse;
  }
  
  .mobile-first-table th,
  .mobile-first-table td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
  }
  
  .mobile-first-table th {
    background-color: #2196F3;
    color: white;
  }
  
  /* デスクトップ向けの拡張 */
  @media screen and (min-width: 768px) {
    .mobile-first-table {
      width: 80%;
      max-width: 1000px;
    }
    
    .mobile-first-table th,
    .mobile-first-table td {
      padding: 12px;
      font-size: 14px;
    }
  }
</style>

<table class="mobile-first-table">
  <tr>
    <th>日付</th>
    <th>訪問者数</th>
    <th>PV数</th>
    <th>CV率</th>
  </tr>
  <tr>
    <td>2024/1/1</td>
    <td>1,250</td>
    <td>3,800</td>
    <td>2.4%</td>
  </tr>
  <tr>
    <td>2024/1/2</td>
    <td>1,180</td>
    <td>3,650</td>
    <td>2.1%</td>
  </tr>
</table>

高度なテーブルスタイリング

ホバーエフェクト付きテーブル

<style>
  .hover-effect-table {
    margin: auto;
    border-collapse: collapse;
    width: 80%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .hover-effect-table th,
  .hover-effect-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.3s ease;
  }
  
  .hover-effect-table th {
    background-color: #333;
    color: white;
  }
  
  .hover-effect-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  .hover-effect-table tr:hover {
    background-color: #e3f2fd;
    transform: scale(1.02);
    transition: all 0.3s ease;
  }
  
  .hover-effect-table td:hover {
    background-color: #bbdefb;
    font-weight: bold;
  }
</style>

<table class="hover-effect-table">
  <tr>
    <th>プラン名</th>
    <th>月額料金</th>
    <th>容量</th>
    <th>サポート</th>
  </tr>
  <tr>
    <td>ベーシック</td>
    <td>980円</td>
    <td>10GB</td>
    <td>メール</td>
  </tr>
  <tr>
    <td>スタンダード</td>
    <td>1,980円</td>
    <td>50GB</td>
    <td>メール・電話</td>
  </tr>
  <tr>
    <td>プレミアム</td>
    <td>3,980円</td>
    <td>無制限</td>
    <td>24時間サポート</td>
  </tr>
</table>

階層構造のあるテーブル

<style>
  .hierarchical-table {
    margin: auto;
    border-collapse: collapse;
    width: 90%;
  }
  
  .hierarchical-table th,
  .hierarchical-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
  }
  
  .hierarchical-table th {
    background-color: #4CAF50;
    color: white;
  }
  
  .category-header {
    background-color: #e8f5e8 !important;
    font-weight: bold;
    color: #2e7d32;
  }
  
  .subcategory {
    background-color: #f3f3f3;
    padding-left: 20px;
    text-align: left;
  }
</style>

<table class="hierarchical-table">
  <tr>
    <th>カテゴリ</th>
    <th>商品数</th>
    <th>売上</th>
  </tr>
  <tr>
    <td class="category-header">家電製品</td>
    <td>45</td>
    <td>2,300万円</td>
  </tr>
  <tr>
    <td class="subcategory">　├ テレビ・AV機器</td>
    <td>15</td>
    <td>800万円</td>
  </tr>
  <tr>
    <td class="subcategory">　├ 冷蔵庫・洗濯機</td>
    <td>20</td>
    <td>1,200万円</td>
  </tr>
  <tr>
    <td class="subcategory">　└ その他</td>
    <td>10</td>
    <td>300万円</td>
  </tr>
</table>

トラブルシューティングとよくある問題

よくある問題と解決法

問題1：テーブルが中央に配置されない

原因： 親要素の幅が不明確

<!-- 問題のある例 -->
<div style="display: inline-block;">
  <table style="margin: auto;">
    <tr><td>中央に来ない</td></tr>
  </table>
</div>

<!-- 解決法 -->
<div style="width: 100%; text-align: center;">
  <table style="margin: auto; display: inline-table;">
    <tr><td>中央に配置される</td></tr>
  </table>
</div>

問題2：セル内で縦方向中央揃えが効かない

原因： セルの高さが内容と同じ

<!-- 解決法：高さを明示的に指定 -->
<style>
  .fixed-height-cell {
    height: 60px;
    vertical-align: middle;
  }
</style>

<table>
  <tr>
    <td class="fixed-height-cell">縦方向中央揃え</td>
  </tr>
</table>

問題3：レスポンシブでテーブルが崩れる

解決法： オーバーフローとスクロールの設定

<style>
  .scroll-container {
    width: 100%;
    overflow-x: auto;
    margin: auto;
  }
  
  .scroll-table {
    min-width: 600px;
    margin: auto;
  }
</style>

<div class="scroll-container">
  <table class="scroll-table">
    <!-- テーブル内容 -->
  </table>
</div>

ブラウザ対応の注意点

古いブラウザでの代替案

<style>
  /* モダンブラウザ向け */
  .modern-center {
    margin: auto;
  }
  
  /* 古いブラウザ向け代替 */
  .fallback-center {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* さらに古いブラウザ向け */
  .legacy-center {
    margin: 0 auto;
  }
</style>

パフォーマンスとアクセシビリティ

アクセシブルなテーブル

<style>
  .accessible-table {
    margin: auto;
    border-collapse: collapse;
    width: 80%;
  }
  
  .accessible-table th,
  .accessible-table td {
    border: 1px solid #333;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
  }
  
  .accessible-table th {
    background-color: #4CAF50;
    color: white;
  }
  
  .accessible-table caption {
    caption-side: top;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
  }
</style>

<table class="accessible-table">
  <caption>月間売上実績（2024年第1四半期）</caption>
  <thead>
    <tr>
      <th scope="col">月</th>
      <th scope="col">売上金額</th>
      <th scope="col">前月比</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1月</th>
      <td>1,200万円</td>
      <td>+5%</td>
    </tr>
    <tr>
      <th scope="row">2月</th>
      <td>1,350万円</td>
      <td>+12.5%</td>
    </tr>
    <tr>
      <th scope="row">3月</th>
      <td>1,480万円</td>
      <td>+9.6%</td>
    </tr>
  </tbody>
</table>

パフォーマンス最適化

<style>
  /* GPU加速を活用した滑らかなアニメーション */
  .performance-table tr {
    will-change: transform;
    transition: transform 0.2s ease;
  }
  
  .performance-table tr:hover {
    transform: translateY(-2px);
  }
  
  /* 大きなテーブルでのスクロール最適化 */
  .large-table-container {
    height: 400px;
    overflow-y: auto;
    scroll-behavior: smooth;
  }
</style>

まとめ

HTMLでテーブルを中央寄せする方法について、基本から応用まで詳しく解説しました。重要なポイントをまとめると：

テーブル全体の中央寄せ

  • 推奨方法：margin: auto; を使用
  • 非推奨：HTML4の align="center" は使わない
  • 幅指定：必要に応じて width プロパティと組み合わせ

セル内の中央揃え

  • 水平方向：text-align: center; で文字を中央に
  • 垂直方向：vertical-align: middle; でセル内中央に
  • 両方向：両プロパティを組み合わせて完全中央揃え

レスポンシブ対応

  • オーバーフロー：横スクロール機能で小画面対応
  • メディアクエリ：画面サイズに応じたスタイル調整
  • モバイルファースト：小画面から大画面への設計

デザインの向上

  • ホバーエフェクト：ユーザビリティの向上
  • ストライプ表示：読みやすさの改善
  • シャドウ効果：立体感のある表現

注意すべきポイント

  • アクセシビリティ：適切なマークアップとコントラスト
  • パフォーマンス：大きなテーブルでの最適化
  • ブラウザ対応：古いブラウザでの代替手段

Youtube

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

スポンサーリンク

コメント

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