初心者でも簡単！HTMLの表を中央揃えにする方法｜セルやテキストもきれいに配置

html

「表全体をページの中央に置きたい」
「セルの文字を中央に揃えたい」
「きれいで見やすい表を作りたい」

ホームページやブログでデータを表にまとめるとき、こんなふうに思ったことはありませんか？

表（テーブル）は情報を整理して見せるのにとても便利ですが、そのままだとページの左端に寄ってしまい、見た目がイマイチということがよくあります。

この記事では、HTMLで表（テーブル）を中央揃えにする方法を、初心者の方にもわかりやすく詳しく解説します。CSSを使った簡単なやり方から、セル内の文字やコンテンツを中央にする方法、さらに実際のWebサイトで使える応用テクニックまで紹介します。

スポンサーリンク

表全体を中央に配置する方法

margin: auto を使った基本的な中央配置

CSSを使って一番シンプルに中央にする方法がこれです。

基本的な使い方

<table style="margin: auto;">
  <tr>
    <th>商品</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>◯</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>120円</td>
    <td>△</td>
  </tr>
</table>

この style="margin: auto;" を付けるだけで、ブラウザの中央に表が配置されます。

より詳しい指定方法

<table style="margin: 0 auto;">
  <tr>
    <th>項目</th>
    <th>詳細</th>
  </tr>
  <tr>
    <td>商品名</td>
    <td>スマートフォン</td>
  </tr>
  <tr>
    <td>価格</td>
    <td>50,000円</td>
  </tr>
</table>

margin: 0 auto; は「上下のマージンは0、左右のマージンは自動」という意味で、より明確な指定方法です。

表の幅を指定した中央配置

<table style="width: 60%; margin: 0 auto; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid #ddd; padding: 8px;">名前</th>
    <th style="border: 1px solid #ddd; padding: 8px;">年齢</th>
    <th style="border: 1px solid #ddd; padding: 8px;">職業</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">田中太郎</td>
    <td style="border: 1px solid #ddd; padding: 8px;">30歳</td>
    <td style="border: 1px solid #ddd; padding: 8px;">エンジニア</td>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">佐藤花子</td>
    <td style="border: 1px solid #ddd; padding: 8px;">25歳</td>
    <td style="border: 1px solid #ddd; padding: 8px;">デザイナー</td>
  </tr>
</table>

幅を指定することで、画面サイズに応じて表のサイズを調整できます。

CSSクラスを使った効率的な管理

<style>
.center-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 80%;
  max-width: 600px;
}

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

.center-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}
</style>

<table class="center-table">
  <tr>
    <th>商品カテゴリ</th>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>電子機器</td>
    <td>ノートパソコン</td>
    <td>80,000円</td>
  </tr>
  <tr>
    <td>家電</td>
    <td>冷蔵庫</td>
    <td>120,000円</td>
  </tr>
</table>

表の中の文字を中央揃えにする方法

text-align: center を使った基本的な中央揃え

表の中の文字を中央に揃えたいときは text-align: center; を使います。

個別のセルに指定

<table style="margin: 0 auto; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">商品</th>
    <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">価格</th>
    <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">評価</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px; text-align: center;">iPhone</td>
    <td style="border: 1px solid #ddd; padding: 8px; text-align: center;">100,000円</td>
    <td style="border: 1px solid #ddd; padding: 8px; text-align: center;">★★★★★</td>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px; text-align: center;">Android</td>
    <td style="border: 1px solid #ddd; padding: 8px; text-align: center;">80,000円</td>
    <td style="border: 1px solid #ddd; padding: 8px; text-align: center;">★★★★☆</td>
  </tr>
</table>

すべてのセルをまとめて中央に揃える

一つひとつ style を書くのが面倒な場合は、<table> 全体にCSSでまとめて指定します。

内部CSSを使った方法

<style>
.centered-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 70%;
}

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

.centered-table th {
  background-color: #f8f9fa;
  font-weight: bold;
}
</style>

<table class="centered-table">
  <tr>
    <th>年度</th>
    <th>売上</th>
    <th>利益</th>
    <th>成長率</th>
  </tr>
  <tr>
    <td>2023年</td>
    <td>1,000万円</td>
    <td>200万円</td>
    <td>+15%</td>
  </tr>
  <tr>
    <td>2024年</td>
    <td>1,150万円</td>
    <td>250万円</td>
    <td>+25%</td>
  </tr>
</table>

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

文字を縦方向にも中央に配置したい場合：

<style>
.vertical-center-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 80%;
}

.vertical-center-table th,
.vertical-center-table td {
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  height: 60px;
}

.vertical-center-table th {
  background-color: #e9ecef;
}
</style>

<table class="vertical-center-table">
  <tr>
    <th>項目</th>
    <th>詳細情報</th>
  </tr>
  <tr>
    <td>商品名</td>
    <td>高機能<br>スマートフォン</td>
  </tr>
  <tr>
    <td>特徴</td>
    <td>大画面<br>高性能カメラ<br>長時間バッテリー</td>
  </tr>
</table>

実用的な表のレイアウトパターン

料金表のレイアウト

<style>
.pricing-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

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

.pricing-table td {
  border: 1px solid #dee2e6;
  padding: 12px;
  text-align: center;
}

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

.pricing-table .highlight {
  background-color: #fff3cd;
  font-weight: bold;
}
</style>

<table class="pricing-table">
  <tr>
    <th>プラン</th>
    <th>月額料金</th>
    <th>ストレージ</th>
    <th>サポート</th>
  </tr>
  <tr>
    <td>ベーシック</td>
    <td>¥1,000</td>
    <td>10GB</td>
    <td>メール</td>
  </tr>
  <tr>
    <td class="highlight">スタンダード</td>
    <td class="highlight">¥2,000</td>
    <td class="highlight">50GB</td>
    <td class="highlight">メール・チャット</td>
  </tr>
  <tr>
    <td>プレミアム</td>
    <td>¥3,000</td>
    <td>100GB</td>
    <td>24時間電話</td>
  </tr>
</table>

データ比較表

<style>
.comparison-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 85%;
}

.comparison-table th {
  background-color: #28a745;
  color: white;
  padding: 12px;
  text-align: center;
  font-size: 16px;
}

.comparison-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.comparison-table .category {
  background-color: #f8f9fa;
  font-weight: bold;
  text-align: left;
  padding-left: 15px;
}

.comparison-table .good {
  background-color: #d4edda;
  color: #155724;
}

.comparison-table .bad {
  background-color: #f8d7da;
  color: #721c24;
}
</style>

<table class="comparison-table">
  <tr>
    <th>機能</th>
    <th>製品A</th>
    <th>製品B</th>
    <th>製品C</th>
  </tr>
  <tr>
    <td class="category">価格</td>
    <td>¥10,000</td>
    <td>¥15,000</td>
    <td>¥8,000</td>
  </tr>
  <tr>
    <td class="category">性能</td>
    <td class="good">高性能</td>
    <td class="good">高性能</td>
    <td class="bad">標準</td>
  </tr>
  <tr>
    <td class="category">保証期間</td>
    <td>2年</td>
    <td>3年</td>
    <td>1年</td>
  </tr>
</table>

カレンダー風表

<style>
.calendar-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 70%;
}

.calendar-table th,
.calendar-table td {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  width: 14.28%;
  height: 50px;
  vertical-align: middle;
}

.calendar-table th {
  background-color: #6c757d;
  color: white;
  font-weight: bold;
}

.calendar-table .today {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

.calendar-table .weekend {
  background-color: #f8f9fa;
  color: #6c757d;
}

.calendar-table .event {
  background-color: #fff3cd;
  font-size: 12px;
}
</style>

<table class="calendar-table">
  <tr>
    <th>日</th>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
    <th>土</th>
  </tr>
  <tr>
    <td class="weekend">29</td>
    <td class="weekend">30</td>
    <td class="weekend">31</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td class="weekend">4</td>
  </tr>
  <tr>
    <td class="weekend">5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td class="event">10<br>会議</td>
    <td class="weekend">11</td>
  </tr>
  <tr>
    <td class="weekend">12</td>
    <td>13</td>
    <td>14</td>
    <td class="today">15</td>
    <td>16</td>
    <td>17</td>
    <td class="weekend">18</td>
  </tr>
</table>

レスポンシブ対応の表

スマートフォン対応の表

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

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

.responsive-table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  .responsive-table {
    width: 100%;
    font-size: 14px;
  }
  
  .responsive-table th,
  .responsive-table td {
    padding: 6px 4px;
  }
  
  .responsive-table th {
    font-size: 12px;
  }
}

/* より小さい画面用 */
@media screen and (max-width: 480px) {
  .responsive-table {
    font-size: 12px;
  }
  
  .responsive-table th,
  .responsive-table td {
    padding: 4px 2px;
  }
}
</style>

<table class="responsive-table">
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
    <th>評価</th>
  </tr>
  <tr>
    <td>商品A</td>
    <td>¥1,000</td>
    <td>◯</td>
    <td>★★★★☆</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>¥2,000</td>
    <td>△</td>
    <td>★★★☆☆</td>
  </tr>
  <tr>
    <td>商品C</td>
    <td>¥1,500</td>
    <td>×</td>
    <td>★★★★★</td>
  </tr>
</table>

横スクロール対応の表

<style>
.scroll-table-container {
  margin: 0 auto;
  width: 90%;
  max-width: 1000px;
  overflow-x: auto;
}

.scroll-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;
}

.scroll-table th,
.scroll-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
}

.scroll-table th {
  background-color: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.scroll-table tr:nth-child(even) {
  background-color: #f8f9fa;
}
</style>

<div class="scroll-table-container">
  <table class="scroll-table">
    <tr>
      <th>商品ID</th>
      <th>商品名</th>
      <th>カテゴリ</th>
      <th>価格</th>
      <th>在庫数</th>
      <th>販売開始日</th>
      <th>最終更新</th>
    </tr>
    <tr>
      <td>001</td>
      <td>スマートフォン</td>
      <td>電子機器</td>
      <td>¥50,000</td>
      <td>25個</td>
      <td>2024-01-15</td>
      <td>2024-01-20</td>
    </tr>
    <tr>
      <td>002</td>
      <td>ノートパソコン</td>
      <td>コンピュータ</td>
      <td>¥80,000</td>
      <td>10個</td>
      <td>2024-01-10</td>
      <td>2024-01-18</td>
    </tr>
  </table>
</div>

よくある注意点とトラブルシューティング

古い書き方（非推奨）との違い

避けるべき古い書き方

<!-- 非推奨：align属性 -->
<table align="center">
  <tr>
    <td align="center">内容</td>
  </tr>
</table>

<!-- 非推奨：centerタグ -->
<center>
  <table>
    <tr>
      <td>内容</td>
    </tr>
  </table>
</center>

現在推奨される書き方

<!-- 推奨：CSSを使用 -->
<table style="margin: 0 auto;">
  <tr>
    <td style="text-align: center;">内容</td>
  </tr>
</table>

<!-- さらに推奨：外部CSSまたは内部CSS -->
<style>
.modern-table {
  margin: 0 auto;
}
.modern-table td {
  text-align: center;
}
</style>

<table class="modern-table">
  <tr>
    <td>内容</td>
  </tr>
</table>

よくある問題と解決法

表が中央に来ない場合

原因1: 表の幅が100%になっている

<!-- 問題のあるコード -->
<table style="width: 100%; margin: 0 auto;">
  <!-- 100%幅では中央配置の効果が見えない -->
</table>

<!-- 解決法 -->
<table style="width: 80%; margin: 0 auto;">
  <!-- 幅を制限することで中央配置が見える -->
</table>

原因2: 親要素の影響

<!-- 問題のあるコード -->
<div style="text-align: left;">
  <table style="margin: 0 auto;">
    <!-- 親要素の影響で左寄せになる場合 -->
  </table>
</div>

<!-- 解決法 -->
<div style="text-align: center;">
  <table style="margin: 0 auto; text-align: left;">
    <!-- 親要素でセンタリング、表内は左寄せ -->
  </table>
</div>

文字が中央に来ない場合

原因: text-alignの継承問題

<!-- 問題のあるコード -->
<table style="text-align: left;">
  <tr>
    <td style="text-align: center;">
      <!-- 親の設定が優先される場合 -->
    </td>
  </tr>
</table>

<!-- 解決法 -->
<table>
  <tr>
    <td style="text-align: center !important;">
      <!-- !important で確実に適用 -->
    </td>
  </tr>
</table>

高度な中央配置テクニック

Flexboxを使った中央配置

<style>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.flex-table {
  border-collapse: collapse;
}

.flex-table th,
.flex-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
</style>

<div class="flex-center">
  <table class="flex-table">
    <tr>
      <th>項目</th>
      <th>値</th>
    </tr>
    <tr>
      <td>商品A</td>
      <td>¥1,000</td>
    </tr>
  </table>
</div>

CSS Gridを使った中央配置

<style>
.grid-center {
  display: grid;
  place-items: center;
  min-height: 200px;
}

.grid-table {
  border-collapse: collapse;
}

.grid-table th,
.grid-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
</style>

<div class="grid-center">
  <table class="grid-table">
    <tr>
      <th>項目</th>
      <th>値</th>
    </tr>
    <tr>
      <td>商品A</td>
      <td>¥1,000</td>
    </tr>
  </table>
</div>

アクセシビリティを考慮した表の作成

適切な見出しとキャプション

<style>
.accessible-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 80%;
}

.accessible-table caption {
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}

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

.accessible-table th {
  background-color: #f8f9fa;
}
</style>

<table class="accessible-table">
  <caption>2024年度 四半期売上実績</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,000万円</td>
      <td>+10%</td>
    </tr>
    <tr>
      <th scope="row">第2四半期</th>
      <td>1,200万円</td>
      <td>+15%</td>
    </tr>
  </tbody>
</table>

まとめ

HTMLで表を中央揃えにするための重要なポイントをまとめます：

表全体の中央配置

  • margin: 0 auto; で水平方向の中央配置
  • 表の幅を適切に設定（100%以外）
  • CSSクラスを使った効率的な管理

セル内容の中央配置

  • text-align: center; で水平方向の中央揃え
  • vertical-align: middle; で垂直方向の中央揃え
  • すべてのセルに一括適用する方法

実用的なテクニック

  • レスポンシブデザイン対応
  • 料金表や比較表などの実用的なレイアウト
  • アクセシビリティを考慮した構造

注意点

  • 古い書き方（align属性）は使わない
  • 親要素の影響を考慮する
  • 適切な幅設定で中央配置を有効にする

Youtube

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

スポンサーリンク

コメント

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