ホームページやWebシステムでよく使われているテーブル要素、実際にどのようにコーディングすればいいのか、初学者には難しいですよね。
- テーブル作成に使われている要素が多い
- 要素をどの順番で配置すればいいか分からない
- 思い描いていたテーブルのコーディングにならない
など、テーブル作成はなかなかに複雑です。
私も要素数の多いテーブルのコーディングは、なかなか覚えられず苦労しました。
この記事では上記のことが分かります。
コーディング例を全てコピペすれば、最低限のテーブルは作成できるようになっているので、コピペして自由に装飾して使ってみてください。
参考にしてもらえれば幸いです。
<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を自由に書き換えて、自分好みの表を作成してみてください。