【HTML/CSS】tableタグ、表の作成方法をサンプルコード付きで解説|コピペで使用OK

ホームページやWebシステムでよく使われているテーブル要素、実際にどのようにコーディングすればいいのか、初学者には難しいですよね。

悩む男性
悩む男性
  • テーブル作成に使われている要素が多い
  • 要素をどの順番で配置すればいいか分からない
  • 思い描いていたテーブルのコーディングにならない

など、テーブル作成はなかなかに複雑です。
私も要素数の多いテーブルのコーディングは、なかなか覚えられず苦労しました。

この記事のポイント
  • テーブルのHTMLコーディングが理解できる
  • テーブル作成に使うタブ(<thead><tbody><tfood>など)について理解できる
  • テーブルのCSSデザインができるようになる

この記事では上記のことが分かります。
コーディング例を全てコピペすれば、最低限のテーブルは作成できるようになっているので、コピペして自由に装飾して使ってみてください。
参考にしてもらえれば幸いです。

目次

<table>要素とは何?なぜ必要なのか?

<table>要素は、HTMLにおいてデータを表形式で表示するために必要な要素です。表形式で表示されることで、データの整理や比較がしやすくなり、読み手にとって情報の把握がしやすくなります。

<table>要素を使用することで、データを行と列で構成される表形式にすることができます。また、<table>要素は、テーブルのヘッダーやフッターを定義するための要素を含めることができ、これらを使用することで、テーブルの構造を明確に示すことができます。

例えば、ウェブショップの商品ページで商品の価格と在庫を表形式で表示すると、ユーザーは容易に価格の比較や在庫の確認をすることができます。また、企業の売上データを表形式で表示することで、月ごとの売上や部門ごとの比較など、ビジネス上の重要な情報を把握しやすくなります。

<table>要素は、データを整理し、比較し、視覚的にわかりやすく表示するために必要な要素なので、ユーザーファーストなホームページを作成するためには必須な要素です。

HTML/CSSのコーディング例

テーブル作成に使用されるタグについて説明する前に、今回使用するコーディングの例を記載しておきます。
コーディング例を参考に、各タグの使い方について、理解を深めていきましょう。

See the Pen Untitled by toshihide (@hide338) on CodePen.

tableの基本構造【HTML解説】

コーディング例をみると、<table>タグの中身には、<thead><tbody><tfoot><tr><th><td>タグが入っているのが分かるかと思います。
それぞれのタグについては以下の通りです。

<thead>タグ

<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</thead>
  • <thead>要素は、表のヘッダー部分を定義するために使用されます。通常、表の最初の行に配置され、それに続く行は<tbody>要素に配置されます。表の構造を明確にするために使用されます。
  • <thead>要素内には<tr>要素を使用して、表の各列の見出し(ヘッダー)を定義するための<th>要素を配置します。

<tbody>タグ

<tbody>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</tbody>
  • <tbody>要素は、表の本体部分を定義するために使用されます。<thead>要素の後に配置され、<tfoot>要素の前に配置されることが一般的です。
  • <tbody>要素内には<tr>要素を使用して、表の各行を定義するための<td>要素を配置します。

<tfoot>タグ

<tfoot>
  <tr>
    <td>Footer 1</td>
    <td>Footer 2</td>
  </tr>
</tfoot>
  • <tfoot>要素は、表のフッター部分を定義するために使用されます。通常、表の最後の行に配置されます。
  • <tfoot>要素内には<tr>要素を使用して、表の各列の合計値などの情報を定義するための<td>要素を配置します。

<tr>タグ

<tr>
  <th>Header 1</th>
  <th>Header 2</th>
</tr>
<tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
</tr>
  • <tr>要素は、表の行を定義するために使用されます。<thead>要素、<tbody>要素、または<tfoot>要素のいずれかに配置されます。
  • <tr>要素内には、表の各列を定義するための<td>要素または<th>要素を配置します。

<th>タグ

<th>Header 1</th>
<th>Header 2</th>
  • <th>要素は、表の見出し(ヘッダー)を定義するために使用されます。通常、表の最初の行に配置されます。
  • <th>要素は、<td>要素と似ていますが、テキストが太字になっていることが多いです。また、<th>要素はスコープ属性を持っており、そのセルがどの行または列の見出しであるかを示します。

<td>タグ

<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
  • <td>要素は、表のセルを定義するために使用されます。<tr>要素内に配置されます。
  • <td>要素は、通常、表の各行で同じ数のセルがあることが望ましいですが、colspan属性を使用して、複数の列を単一のセルに結合することもできます。

CSSで表の装飾【CSS解説】

CSSの解説をコードごとに行います。

tableセレクタ

table {
  border-collapse: collapse;
  margin: 20px 0;
}

HTMLの<table>要素に対してスタイルが適用されます。
border-collapseプロパティは、テーブルのセル間の境界線を表示する方法を定義するもので、collapse値は、セルの境界線を表示せず、セル同士の境界線を結合して1本の線として表示することができます。
marginプロパティは、テーブルの周囲にマージンを追加します。
今回は、表の上下に20pxの余白を追加しています。

thead thセレクタ

thead th {
  background-color: #f2f2f2;
  font-size: 18px;
  border: 1px solid #ddd;
}

HTMLの<thead>要素内の<th>要素に適用されます。
background-colorプロパティで、背景色「#f2f2f2」に設定し、font-sizeプロパティで、フォントサイズを18pxに固定。
borderプロパティで、セルの境界線を定義しています。この場合は、1ピクセルの幅の灰色(#ddd)の実線が設定されます。

tfoot tdセレクタ

tfoot td {
  background-color: #f2f2f2;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ddd;
}

HTMLの<tfoot>要素内の<td>要素に適用されます。
background-color・font-size・borderプロパティは、上記の「thead thセレクタ」と同様です。

font-weightプロパティは、フォントの太さを設定します。tfootであることが分かりやすくなるよう太字「bold」に指定してあります。
tfoodには、表の合計などまとめた数値が入ることが多いので、太字にしておくと見る人も見やすくなると思いますので、設定しておくことをおすすめします。

tbody tr:nth-child(even)セレクタ

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

HTMLの<tbody>要素内の偶数行にある<tr>要素に適用されます。
淡いグレーの背景色を設定しています。

td, thセレクタ

td, th {
  padding: 10px;
}

<td><th>要素すべてに対してスタイルを適用します。
それぞれ10pxの余白を持たせるように設定しています。

まとめ

表を作成するためには、今回提示したコーディング例が基本です。
基本のコーディングができてしまえば、後はCSSで装飾するだけできれいな表を作成することができます。
今回のコードを基本として、CSSを自由に書き換えて、自分好みの表を作成してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

文系大学を卒業→病院事務として就職→病院専属のSE
として勤務(現在)
病院SEとして、院内専用システムの構築やネットワーク管理、セキュリティなどIT周りを全て1人で対応しています。
業務の分野が広く、知識も幅広く習得していますが、現在は、ひとつひとつの知識を深堀して、よりITに強い人材になれるよう学習に励んでいます。

目次