HTMLテーブルとCSSスタイル基本ガイド：table、th、tdを自在に装飾する方法

table・th・td に適用するスタイルの基本

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

生徒

「Webサイトを作っているのですが、データを表形式で見やすく並べるにはどうすればよいですか？」

先生

「それならHTMLのテーブルタグを使います。table、th、tdといったタグを使って表の骨組みを作り、CSSで見た目を整えるのが基本ですよ。」

生徒

「tableやth、tdとは何でしょうか？プログラミング未経験なので、分かりやすく教えてもらえると助かります！」

先生

「もちろんです！表の構造から装飾の基本まで、一緒に楽しく学んでいきましょう！」

1. HTMLテーブルとは：表を作るための基本構造

Webサイトで表を作成する際、もっとも基本的なのがtableタグです。tableは「表そのもの」を囲む箱、trは「テーブルの行（横の並び）」、thは「見出しのセル（一番上のタイトルなど）」、そしてtdは「データのセル（中身）」を表します。この組み合わせが、Excelのような表の土台になります。

最初は少し複雑に感じるかもしれませんが、たとえるなら「本棚」のようなものです。大きな箱（table）の中に棚の段（tr）があり、その中に本を入れる場所（thやtd）がある。そう考えると分かりやすいでしょう。まずは、この箱を作る練習から始めてみましょう。

2. 表の見た目を整えるCSSスタイルの基本

HTMLで作っただけの表は、線がなく文字が並んでいるだけですので、CSSを使って線を引いたり、色を付けたりします。CSS（Cascading Style Sheets）は、Webサイトの見た目を飾るための言葉です。特に、表の枠線を一本につなげる「border-collapse」という指定は、プロも必ず使う必須のテクニックです。


<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #333;
    padding: 10px;
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>点数</th>
  </tr>
  <tr>
    <td>田中さん</td>
    <td>90</td>
  </tr>
</table>

ブラウザ表示

3. thタグで見出しを強調する装飾術

thタグは「Table Header」の略で、表の項目名を表示するための場所です。ユーザーにとって、どの列が何を示しているのかをすぐ理解してもらうために、thの文字を太字にしたり、背景色を変えたりして目立たせるのが一般的です。これによって、表全体の分かりやすさが格段に上がります。


<style>
  th {
    background-color: #0d6efd;
    color: white;
  }
</style>

<table>
  <tr>
    <th>品目</th>
    <th>在庫数</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>20</td>
  </tr>
</table>

ブラウザ表示

4. tdタグを活用してセル内の余白を調整する

tdタグは「Table Data」の略で、実際のデータが入る場所です。文字が枠の端ギリギリにあると非常に読みにくいので、CSSの「padding（パディング）」という機能を使って、枠の内側に余白を作ります。このたった一行の指定が、表を「読み物」として美しく変身させます。


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

<table>
  <tr>
    <td>商品A</td>
    <td>500円</td>
  </tr>
</table>

ブラウザ表示

5. 奇数行と偶数行の色を変えるストライプデザイン

行数が多い表では、どこを見ているのか分からなくなることがあります。そこで、CSSの「nth-child」という機能を使用して、1行おきに色を変えるのがおすすめです。これをストライプテーブルと呼びます。デザイン性が高まるだけでなく、データの視認性も高まる、一石二鳥のテクニックです。


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

<table>
  <tr><th>月</th><th>売上</th></tr>
  <tr><td>4月</td><td>100万</td></tr>
  <tr><td>5月</td><td>120万</td></tr>
</table>

ブラウザ表示

6. レスポンシブ対応でスマホでもきれいに

今のWebサイトは、パソコンだけでなくスマートフォンから見られることが大半です。テーブルタグは横幅が広くなりがちなので、CSSで「overflow-x: auto」と指定して、スマホの狭い画面では横にスライドできるようにしましょう。これをするだけで、ユーザーは快適に情報を確認できるようになります。

レスポンシブデザインとは、画面の大きさに合わせて表示を自動的に変える技術のことです。最初は難しく感じるかもしれませんが、まずは「スマホで見たときにはみ出さないようにする」ことだけを意識してみてください。小さな改善が、Webサイトの品質を大きく高めます。

7. 文字揃えを工夫して読みやすくする

表の中の文字を、左寄せにするか中央寄せにするかで、印象は大きく変わります。数値は「右寄せ」に、文字列は「左寄せ」にするのが一般的です。CSSの「text-align」というプロパティを使えば、簡単に指定できます。数値が右に揃っていると、金額などの比較がしやすくなるため、ぜひ意識して設定してみてください。

こうした細かい装飾の積み重ねが、読者にとって親切な表を作る鍵となります。プログラミング未経験でも、まずは一つずつ、背景色を変えてみたり、枠線を太くしてみたりすることから始めてみてください。ブラウザで画面を見ながら、「あ、こうすると見やすくなるんだ！」という発見が、成長への一番の近道です。

8. アクセシビリティを意識した親切なテーブル

最後にもう一点、重要なことがあります。それは、誰にとっても読みやすい表を作ることです。例えば、色が区別しにくい人でも分かるように、枠線や背景の濃さには十分なコントラストを持たせましょう。コントラスト比とは、文字色と背景色の明るさの差のことです。

また、行や列のタイトルが何を示しているのかを明確にするために、thタグに「scope」という属性を付け加えると、視覚障がい者が使う音声読み上げソフトが、表の構造を正しく理解しやすくなります。誰にでも優しいWebサイト作りを目指すことは、Web制作者として非常に尊いことです。これからもぜひ、その優しい心遣いを忘れずに学習を続けてください。

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