Webサイトで表（テーブル）を作成していると、「表全体を画面の真ん中に配置したい」「セルの中の文字を上下左右の中央に揃えたい」という場面が頻繁に訪れます。
しかし、HTMLの align="center" 属性はすでに廃止されており、現在はCSSを使って制御する必要があります。
ここを混同してしまうと、「CSSを書いたのに動かない！」というトラブルの原因になります。
この記事では、HTMLのテーブル（tableタグ）における中央寄せについて、全体の配置からセル内の文字揃え、さらには画面のど真ん中に配置する応用テクニックまで、現在のWeb標準に合わせて徹底解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
1. テーブル「全体」を画面の中央に寄せる方法
まずは、テーブルそのものを画面（または親要素）の左右中央に配置する方法です。
これには、ブロック要素の中央寄せで定番の margin: auto; を使用します。
margin: 0 auto; を使った基本の配置
テーブル（<table>）はデフォルトでは左寄せになっていますが、CSSで左右の余白（margin）を auto に設定することで、ブラウザが余白を均等に計算し、中央に配置してくれます。
<table class="center-table">
<tr>
<th>商品名</th>
<td>プレミアムプラン</td>
</tr>
<tr>
<th>価格</th>
<td>¥10,000</td>
</tr>
</table>
<style>
.center-table {
/* 左右の余白を自動にして中央寄せ */
margin-left: auto;
margin-right: auto;
/* 分かりやすく枠線と幅を指定 */
border: 1px solid #ccc;
width: 80%;
}
</style>
margin-left: auto; と margin-right: auto; を指定することで、テーブルの左右に均等な余白が生まれ、結果として中央に配置されます。
実務ではショートハンドである margin: 0 auto;（上下0、左右自動）と記述するのが一般的です。
注意点として、テーブルの幅が width: 100%; になっていると、そもそも動く余地（余白）がないため中央寄せの効果が見えません。
幅を指定するか、コンテンツに合わせて伸縮させましょう。
2. セル内の「文字」を左右中央に寄せる方法
次は、テーブルの中身である「文字」や「画像」を、セルの中心に配置する方法です。
これはテキストの配置を制御する text-align プロパティを使用します。
text-align: center; の使い方
<th> や <td> に対して指定します。
テーブル全体に適用したい場合は table タグに指定しても継承されます。
<table class="text-center-table">
<tr>
<th>見出し（中央）</th>
<td>データ（中央）</td>
</tr>
</table>
<style>
.text-center-table th,
.text-center-table td {
/* テキストを左右中央に配置 */
text-align: center;
border: 1px solid #ccc;
padding: 10px;
width: 200px;
}
</style>
text-align: center; を指定することで、セル内のテキストやインライン要素（画像など）が左右の中央に配置されます。
デフォルトでは、<th>（見出し）は最初から中央寄せ、<td>（データ）は左寄せになっているブラウザが多いため、<td> に明示的に指定することで見た目を統一できます。
3. セル内の「文字」を上下中央に寄せる方法
セルの高さがある場合、文字が上の方に寄ってしまうことがあります。
これを上下（垂直方向）の真ん中に配置するには、vertical-align プロパティを使用します。
vertical-align: middle; の使い方
<table class="vertical-center-table">
<tr>
<th>高さのある<br>見出し</th>
<td>
ここの文字を<br>
上下中央に<br>
したい
</td>
</tr>
</table>
<style>
.vertical-center-table th,
.vertical-center-table td {
height: 150px; /* 高さを指定して検証 */
border: 1px solid #ccc;
/* テキストを上下中央に配置 */
vertical-align: middle;
}
</style>
vertical-align: middle; を指定すると、セルの高さに対して文字が垂直方向の中央に来るように調整されます。
テーブルセル（table-cell）においては、このプロパティが非常に有効に機能します。
逆に「上揃えにしたい」場合は top、「下揃え」なら bottom を指定します。
4. 【応用】画面のど真ん中にテーブルを配置する
「ログイン画面のように、ページ全体の上下左右ど真ん中にテーブルをポンと置きたい」というケースもあります。
この場合は、margin ではなく、現代のレイアウト手法である Flexbox を親要素に使うのが最も簡単で確実です。
Flexboxを使った完全な中央寄せ
<div class="flex-container">
<table class="login-table">
<tr>
<td>ID</td>
<td><input type="text"></td>
</tr>
<tr>
<td>PASS</td>
<td><input type="password"></td>
</tr>
</table>
</div>
<style>
/* 親要素（画面全体） */
.flex-container {
display: flex;
justify-content: center; /* 左右中央 */
align-items: center; /* 上下中央 */
height: 100vh; /* 画面の高さいっぱいに広げる */
background-color: #f0f0f0;
}
.login-table {
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
}
</style>
テーブルを囲む親要素（.flex-container）に対し、display: flex; を指定してFlexboxを有効化します。
続けて justify-content: center; で水平方向の中央寄せ、align-items: center; で垂直方向の中央寄せを行います。
最後に height: 100vh; で親要素の高さを画面いっぱい（ビューポートの高さ）に設定することで、画面のど真ん中にテーブルが配置されます。
中央寄せができない時のチェックリスト
「コード通り書いたはずなのに動かない……」という場合、以下のポイントを確認してみてください。
1. インライン要素になっていないか？
margin: 0 auto; は、要素が ブロックレベル要素（display: block / table） でなければ効きません。
もし display: inline; や inline-block になっている場合は、display: table; や block に変更するか、親要素に text-align: center; を指定する必要があります。
2. width（幅）が指定されているか？
テーブル全体を margin で中央寄せする場合、幅が 100%（画面いっぱい）だと動くスペースがありません。
width: 80%; や max-width: 600px; のように、親要素より小さい幅を指定しているか確認しましょう。
3. float や position が効いていないか？
float: left; や position: absolute; が指定されていると、通常の文書の流れから外れるため、margin: auto; は無効になります。
この場合は float を解除するか、position に合わせた中央寄せのテクニック（left: 50%; transform: translate(-50%, 0); など）を使う必要があります。
HTML/CSSのスキルを活かして年収を上げる方法
以上、HTML/CSSでテーブルを中央寄せする方法について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
