CSSでテーブルのセル内テキストを配置！中央・右寄せ・左寄せの整え方完全ガイド

セル内のテキストを中央・右寄せ・左寄せに整える方法

先生と生徒の会話形式で理解しよう

生徒

「ホームページで表を作ったのですが、文字が左側に寄ってしまってバランスが悪いです。真ん中や右側に動かすことはできますか？」

先生

「はい、CSSという技術を使えば、セル内の文字の配置は簡単に整えることができますよ。文字の並び方を指定する命令を使うのです。」

生徒

「具体的に、どんな言葉をCSSに書けばいいのか教えてください！」

先生

「それでは、CSSで文字を中央や右側に寄せるための基本ルールを一緒に学んでいきましょう！」

1. text-alignプロパティとは

文字の配置をコントロールするために、CSSでは「text-align（テキストアライン）」というプロパティを使います。プロパティというのは、パソコンに「こうしてほしい」という命令を出すための項目の名前です。このtext-alignを使うことで、文字を「左（left）」「中央（center）」「右（right）」の好きな場所に配置できます。ウェブサイトのデザインにおいて、表の中の情報を読みやすく整えることは、ユーザーに親切なサイトを作るための第一歩となります。

2. 表のセルで文字を中央揃えにする方法

まずは、表のセル（tdタグ）の中にある文字を中央に寄せてみましょう。これには「text-align: center;」という命令を使います。表の見出しや、数字を中央に並べたいときによく使われる設定です。


<style>
    .center-text {
        text-align: center;
    }
</style>

<table class="table table-bordered">
    <tr>
        <td class="center-text">ここが中央になります</td>
    </tr>
</table>

ブラウザ表示

3. 数値をきれいに見せる右寄せの方法

表の中に売上金額や個数といった数字を入力する場合、右側に寄せて並べると桁数が見やすくなります。この場合は「text-align: right;」という命令を使います。数字を右端で揃えることで、視覚的に大きい数字か小さい数字かが直感的に判断できるようになり、非常に使いやすい表になります。


<style>
    .right-text {
        text-align: right;
    }
</style>

<table class="table table-bordered">
    <tr>
        <td class="right-text">10,000円</td>
    </tr>
    <tr>
        <td class="right-text">500円</td>
    </tr>
</table>

ブラウザ表示

4. 基本となる左寄せの設定

何も指定していない場合、文字は通常「左寄せ（left）」になります。しかし、あえてCSSで指定しておくことで、他の設定に影響を受けずに確実に左側に寄せることができます。「text-align: left;」を使うことで、文章などが続く長い説明を左端からきれいに整列させることが可能です。


<style>
    .left-text {
        text-align: left;
    }
</style>

<table class="table table-bordered">
    <tr>
        <td class="left-text">文章はここから始まります</td>
    </tr>
</table>

ブラウザ表示

5. なぜCSSで配置を整える必要があるのか

昔のHTMLでは、タグの中に直接「中央揃え」などの設定を書いていましたが、今のWebデザインではCSSという別の場所で設定するのが常識です。これを分けることで、ウェブサイトのデザインを後から一括で変更しやすくなります。例えば、あとから「やっぱり全部の表を右寄せにしたい」と思ったとき、CSSの数行を書き換えるだけで、サイト内のすべての表の配置が自動的に修正されるからです。メンテナンスが非常に楽になるのがこの方法の最大のメリットです。

6. 読みやすい表のデザインのコツ

ただ文字を寄せるだけでなく、セルの中に余白（パディング）を入れると、よりプロっぽく見えます。CSSの「padding」という設定を使って、文字と枠の間に隙間を作ってみましょう。窮屈な印象が消え、ユーザーが情報を読み取りやすくなります。配置と余白の組み合わせが、美しいデザインの鍵となります。


<style>
    .clean-table td {
        text-align: center;
        padding: 15px;
    }
</style>

<table class="table table-bordered clean-table">
    <tr>
        <td>余白たっぷりで読みやすい</td>
    </tr>
</table>

ブラウザ表示

7. パソコン初心者でも失敗しないための注意点

CSSの設定をするとき、よくある失敗は「書き忘れ」や「閉じ忘れ」です。CSSを書くときは、必ず「 { 」で始まり、「 } 」で終わるようにしてください。また、命令の最後には「 ; （セミコロン）」を忘れずにつけましょう。もし、設定した通りに文字が動かない場合は、これらの記号が抜けていないかを確認してみてください。これさえ守れば、誰でも簡単に表の見た目をコントロールできるようになります。

8. 検索エンジンに好まれるサイト作り

検索エンジンは、人間が見やすいサイトを高く評価します。表の中の文字が整然と並んでいることは、そのサイトの情報が丁寧に作られているという証拠です。CSSを適切に使って文字の配置をコントロールすることは、ただ見た目を整えるだけでなく、検索結果での順位を上げることにもつながります。読者のことを考えたレイアウトで、多くの人に愛されるサイトを作っていきましょう。

9. まとめ：配置をマスターして表現を広げよう

text-alignを覚えるだけで、Webサイトの印象は劇的に変わります。まずは中央揃えや右寄せを試して、自分が思い描いた通りの場所に文字を置いてみてください。一度やり方を覚えてしまえば、どんなに長い表でも一瞬で美しく整えられるようになります。次は色や枠線など、他のCSS設定にも挑戦して、オリジナルの表デザインを作ってみてください。

2026年最新スキルアップ・実践セミナー