HTMLで表を作る方法 | 基本構造・tableタグの使い方・CSSデザインを解説

はじめに

Web ページで情報を整理して見せたいときに便利なのが 「表（table）」 です。

しかし、HTML の構文や CSS の設定を正しく理解していないと、表が崩れたり、思ったような見え方にならなかったりします。

本記事では、HTML の table タグの基本構造から、罫線・背景色・幅調整などCSS による装飾方法までを、初心者でも理解できるようにわかりやすく解説します。

table タグとは？

table の基本構造と役割

HTML の table タグ は、行（row）と列（column）を組み合わせて情報を整理するための要素です。
データを比較したり、数値を整列させたりする場面で頻繁に使われます。

基本構造は以下のようになります。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

このように、tr タグは行、th タグは見出しセル、td タグはデータセルを表します。 表全体の枠組みを定義するのが、table タグの役割です。

tr・th・td タグの意味と違い

タグのそれぞれの役割を理解することで、正しく構造化された表を作ることができます。

tr タグ

行（table row）を作るためのタグ。1 行単位で定義します。

th タグ

見出しセル（table header）。文字が太字・中央寄せになります。

td タグ

通常のデータセル（table data）。データを格納する標準的なセルです。

th タグ と td タグ の違いは「意味とスタイル」 です。
見出し行には th タグ、内容部分には td タグを使い分けることで、可読性とアクセシビリティが向上します。

HTML で表を作る基本構文

シンプルな table タグの書き方

最も基本的な HTML 表は、わずか数行で作成できます。

<table border="1">
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>80円</td>
  </tr>
</table>

このように、border=“1”を指定すると枠線が表示されます。
ただし、最近の HTML では見た目の指定は CSS で行うのが推奨です。

見出しセル（th）を使った表の作成

また、見出しを明示することで情報の意味がより明確になります。

<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>80円</td>
  </tr>
</table>

thタグを使用することで、ユーザーだけでなく検索エンジンにも表の構造を正しく伝えることができます。

CSS で表をデザインする方法

罫線・背景色・余白の設定方法

HTML だけではデザインの自由度が低いため、CSS を使って見た目を整えるのが一般的です。

table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f4f4f4;
}

上記の CSS を適用すると、次のような効果があります。

• border-collapse：罫線の重なりを 1 本にまとめる
• padding：セル内の余白を確保して読みやすくする
• background-color：背景の色を変え、見出し行を目立たせる

このように、CSS を使うことで情報を伝えやすく、美しい表を作ることができます。

幅・高さ・文字位置を調整する

表の見栄えをさらに整えるためには、text-alignやvertical-alignなどを活用します。

th,
td {
  text-align: center;
  vertical-align: middle;
}

• text-align：テキストの水平方向の位置を指定
• vertical-align：上下方向の位置を調整

整列が整った表は視認性が高まり、データの比較が容易になります。

きれいな表を作るためのポイントまとめ

可読性とデザインのバランスを意識する

デザインを凝りすぎると、情報の伝達性が損なわれることがあります。
次のポイントを意識しましょう。

• 背景色と文字色のコントラストを確保する
• 行間やセル余白を適切に取る
• 見出し行とデータ行の区別を明確にする

コードの再利用性を高める

CSS クラスを活用することで、再利用性が大幅に向上します。

<table class="table-basic">
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>80円</td>
  </tr>
</table>

.table-basic th {
  background: #f9f9f9;
  color: #333;
}
.table-basic td {
  padding: 10px;
}

これにより、複数のページや表で統一したデザインを維持できます。

まとめ

HTML のtableタグは、データを整理して見やすく伝えるための重要な要素です。
構造を正しく理解し、CSS でデザインを整えることで、整った美しい表を実装できるようになります。

本記事で紹介した手順を実践して、自分の Web サイトでも安定したレイアウトと自由なデザインを両立していきましょう。

Web 制作をより深く学びたい方は、WEBMASTERS をぜひチェックしてみてください。
HTML や CSS の基礎だけでなく、現場で使えるスキルが初歩から学べるカリキュラムが揃っています。

初心者でも段階的にステップアップできる内容なので、「手を動かしながら確実に身につけたい」方に特におすすめです。