HTML/CSS入門編｜15章：テーブルを作成しよう

INDEX

前の章に戻る次の章に進む

HTML/CSS入門編 15章テーブルを作成しよう

本章では、HTMLのテーブル（表組）の作成方法とスタイリング方法を学びます。

【15-1】HTMLのテーブルとは

テーブルとは、HTMLタグでマークアップされた表組のことです。
表形式のデータを効果的に整理するために、Webページ上でよく使われます。
例えば、右のような場面で利用されます。

Webサイトのこんなところでテーブルは使われている

「会社概要」のような企業の基本情報
カレンダーや時刻表
料金表
その他　スタッフ一覧・ランキング表・在庫リストなど

テーブルで整理するとわかりやすくなると効果的な情報は、項目名と内容が対になって並ぶ情報です。

テーブルの使用例

以下は実際にWebサイト内でテーブルが使用されている例です。

■ 会社概要

株式会社東京国際フォーラム
https://www.t-i-forum.co.jp/company/

■ カレンダー

JR東京総合病院
 https://www.jreast.co.jp/hospital/outpatient/calendar.html/

■ 診療時間表

さいたま市
https://www.city.saitama.lg.jp/002/001/017/006/p019179.html

■ 料金表

森美術館
 https://art-view.roppongihills.com/jp/info/

【15-2】基本的なテーブルのマークアップを覚えよう

それでは、実際にHTMLのテーブルを作成してみたいと思います。

演習素材について
本章では、「15章テーブルを作成しよう」フォルダ内の演習データを使用します。
「15章テーブルを作成しよう」フォルダの中には、「start」「fin」フォルダが入っています。

「15章テーブルを作成しよう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

※「HTML/CSS入門編はじめに - Webページのことを知ろう」の「【0-4】HTML/CSS 入門編演習素材のダウンロード」節で、本教材の演習で使用するデータをまとめてダウンロードすることができます。

演習の準備として、「start」フォルダ内のindex.htmlとstyle.cssをエディターで開いておきましょう。

テーブルをマークアップする基本のタグを覚えよう

テーブル用語を覚えよう

表組の１つ１つのマス目のことをセルといいます。
横方向のセルの並びを行といいます。
縦方向のセルの並びを列といいます。

下の例、料金表のような表組を2行4列のテーブルといいます。
このテーブルのHTMLマークアップは、料金表のHTML構造図のようになります。

テーブルを作成するタグ

テーブルをマークアップするための基本のタグは次の4種類です。
これらのタグを入れ子状に組み合わせてテーブルを作成します。

タグ	意味
<table></table>	表組のエリア全体をマークアップする table
<tr></tr>	行をマークアップする table row
<td></td>	セルをマークアップする table data cell
<th></th>	見出しセルをマークアップする table header cell

応用・豆知識

テーブルの構造をより明確にするため、以下のタグで各部分を囲むことができます。

<thead>：テーブルのヘッダー部分（項目名などが入る行）を囲みます。
<tbody>：テーブルのボディ部分（主要なデータが入る行）を囲みます。
<tfoot>：テーブルのフッター部分（合計値や注釈などが入る行）を囲みます。

これらのタグを使うとHTMLの構造がより意味的になり、スクリーンリーダーなどが内容を解釈しやすくなるなど、アクセシビリティ上のメリットがあります。

■ 例. 料金表

■ 料金表のHTML構造図

2行4列のテーブルを作成しよう

右の例. 料金表を作成します。
ここからは、index.htmlの各見出しの下にHTMLタグを入力し、実際にテーブルを作成する練習をしてください。
テーブルのHTMLマークアップは、複数種類のタグを複雑に組み合わせて行いますので、少し難しく感じるかもしれませんが、以下の手順に沿って作成すればスムーズです。

テーブルの作成手順

tableタグで表組のエリア全体をマークアップする。
trタグで行をマークアップする。
tdタグでセルをマークアップする。（見出しセルはthタグでマークアップする）
結合する行・列がある場合はその指定をする。

■ 例. 料金表（再掲）

1. tableタグで表組のエリア全体をマークアップする

上記の作成手順に沿ってテーブルをマークアップしていきます。

まずは、tableタグで表組全体のエリアを指定します。
このとき、テスト用にborder="1"という属性を追加することをオススメします。
- tableタグにborder属性を指定すると、セルに枠線が表示されます。
- デザイン的にはあまり洗練されていない見た目ですが、このボーダーを表示させておくことで、表組の構造を視覚的に確認しやすくなります。
- 後にテーブルをCSSで装飾する際には、このborder属性は削除し、枠線の表示はCSSのborderプロパティを使いスタイリングを行うべきですが、現時点では入れておきましょう。

注意

border="1"という属性は、現在のWeb標準であるHTML5では廃止（非推奨）とされています。
本来、罫線のような見た目に関する指定はすべてCSSで行うべきです。
ここでは、マークアップの構造を視覚的に確認するための一時的な措置として使用します。
後のCSSでのスタイリングの際には、この属性は必ず削除しましょう。

<h1>テーブルを作成しよう</h1>
<h2>例.料金表</h2>

<table border="1"></table>

HTML/CSS入門編サンプルコード15-1

2. trタグで行をマークアップする

続いて、trタグで行をマークアップします。

テーブルを作成するときに間違いのない方法は、これから作成するテーブルが何行何列のテーブルなのかを最初に確認しておく（行数と列数を数えておく）ことです。
例えば以下のテーブルはそれぞれ何行何列でしょうか？

正解は①が1行5列、②が3行4列です。

1行の場合は<table></table>の間に<tr></tr>を1回、3行の場合は<tr></tr>を3回繰り返し記述します。

今回作成するテーブルは2行4列ですので、<tr></tr>を2回繰り返し記述します。

<h1>テーブルを作成しよう</h1>
<h2>例.料金表</h2>

<table border="1">
  <tr></tr>
  <tr></tr>
</table>

HTML/CSS入門編サンプルコード15-2

3. tdタグでセルをマークアップする

行のマークアップができたら、tdタグでセルをマークアップします。

tdタグ1つでセルが1つ作成されます。
1行あたりに入っているセルの数だけ<td></td>を<tr></tr>の間に記述します。
項目名を表示するセルは見出しセルとして扱い、<th></th>でマークアップします。
<td></td>、<th></th>の内容がセルの中身としてブラウザに表示されますので、表示するテキストを入力しながら作成しましょう。

今回作成する2行4列のテーブルは、1行目の4つのセルに項目名が入りますので、見出しセルとして扱い、<th></th>でマークアップします。
2行目のセルに入るデータは、項目に対する内容ですので、4つとも<td></td>でマークアップします。

<h1>テーブルを作成しよう</h1>
<h2>例.料金表</h2>

<table border="1">
  <tr>
    <th>一般</th>
    <th>学生</th>
    <th>子供</th>
    <th>シニア</th>
  </tr>
  <tr>
    <td>1,800円</td>
    <td>1,200円</td>
    <td>無料</td>
    <td>1,400円</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-3

ここまで入力できましたら、ブラウザプレビューをしてみましょう。
2行4列のテーブルが完成しているはずです。
今回は結合する行や列はありませんので、手順4は省略します。
※テーブルのセル幅と高さは、コンテンツが収まる最小限のサイズに自動で調整されます。セルのサイズ指定を行う際は、CSSのwidth、heightやpaddingなどのプロパティを使います。

ブラウザプレビュー

【15-3】セルの結合を学ぼう

複数のセルを結合して1つにまとめることにより、複雑な形の表組を作成することができます。

次の例のような複雑なテーブルは、複数のセルを縦方向や横方向に結合することで作成します。
まずは、複雑な形の基本形となるテーブルを作成して、仕組みを理解しましょう。
- 以下に解説する縦方向と横方向の結合の方法を学習してください。

セルを縦方向に結合しよう

右の例は、縦方向にセルを結合したテーブルの最もシンプルな基本形です。
このテーブルを作成します。

■ 縦方向にセルを結合したテーブル例

縦方向のセルの結合の考え方

複雑な形のテーブルは、複数のセルを結合してひとつのセルにまとめるという方法で作成します。
このとき、右の図解のように、セルを結合する前の元の形から考えると、スムーズに作成することができます。

【図解】縦方向にセルを結合する

1. tableタグで表組のエリア全体をマークアップする

それでは、実際にHTMLでテーブルを作成していきます。

基本的な手順は、先ほど作成したノーマルなテーブルと同じですが、最後にセルの結合の指定を行う工程が追加されます。
最初にtableタグで表組全体のエリアを指定し、枠線を表示するために属性のborder="1"を追加しておきます。

<h2>セルの結合を学ぼう</h2>
<h3>セルを縦方向に結合しよう</h3>

<table border="1"></table>

HTML/CSS入門編サンプルコード15-4

2. trタグで行をマークアップする

続いて、trタグで行をマークアップします。

今回作成するテーブルの元の形は2行2列のテーブルです。
したがって、trタグを2回繰り返し記述します。

<h2>セルの結合を学ぼう</h2>
<h3>セルを縦方向に結合しよう</h3>

<table border="1">
  <tr></tr>
  <tr></tr>
</table>

HTML/CSS入門編サンプルコード15-5

3. tdタグでセルをマークアップする

tdタグ1つでセルは1つ作成されますので、今回必要なtdタグは3つです。
1行あたりに入っているセルの個数（結合後の個数）だけ<td></td>を<tr></tr>の間に記述します。
このとき、1行目と2行目は以下の図解のようになりますので、1行目のtrタグ内にtdタグを2つ、2行目のtrタグ内にはtdタグを1つ記述します。
- ここでは、tdタグの中には連番を入れておきましょう。

【図解】行の数え方

<h2>セルの結合を学ぼう</h2>
<h3>セルを縦方向に結合しよう</h3>

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-6

4. 縦方向に結合するセルを指定する（rowspan属性）

1のセル（最初のtdタグ）は縦方向に2つのセルにまたがっています。
縦方向にセルを結合するためには、rowspan属性を該当のtdタグに追加します。
- 属性値には結合するセルの数を記述します。
- 今回は縦方向に2つのセルを結合しますので、属性値は2です。

■ rowspan属性の記述方法

<td rowspan="結合するセルの数">セルの内容物</td>

rowspan属性の記述方法

<h2>セルの結合を学ぼう</h2>
<h3>セルを縦方向に結合しよう</h3>

<table border="1">
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-7

■ ブラウザプレビュー　完成

セルを横方向に結合しよう

右の例は、横方向にセルを結合したテーブルの最もシンプルな基本形です。
このテーブルを作成します。

■ 横方向にセルを結合したテーブル例

横方向のセルの結合の考え方

縦方向のセルの結合と同様に、横方向にセルを結合するときも、右の図解のように、セルを結合する前の元の形から考えると、スムーズに作成することができます。

【図解】横方向にセルを結合する

1. tableタグで表組のエリア全体をマークアップする

それでは、実際にHTMLでテーブルを作成していきます。

これまでの手順と同様に、最初にtableタグで表組全体のエリアを指定し、枠線を表示するために属性のborder="1"を追加しておきます。

<h3>セルを横方向に結合しよう</h3>

<table border="1"></table>

HTML/CSS入門編サンプルコード15-8

2. trタグで行をマークアップする

続いて、trタグで行をマークアップします。

今回作成するテーブルの元の形は2行2列のテーブルです。
したがって、trタグを2回繰り返し記述します。

<h3>セルを横方向に結合しよう</h3>

<table border="1">
  <tr></tr>
  <tr></tr>
</table>

HTML/CSS入門編サンプルコード15-9

3. tdタグでセルをマークアップする

tdタグ1つでセルは1つ作成されますので、今回必要なtdタグは3つです。
1行あたりに入っているセルの個数（結合後の個数）だけ <td></td> を <tr></tr> の間に記述します。
このとき、1行目と2行目は以下の図解のようになりますので、1行目のtrタグ内にtdタグを1つ、2行目のtrタグ内にはtdタグを2つ記述します。
- tdタグの中には連番を入れておきましょう。

【図解】行の数え方

<h3>セルを横方向に結合しよう</h3>

<table border="1">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-10

4. 横方向に結合するセルを指定する（colspan属性）

最後に、セルを結合する指定を行います。

1のセル（最初のtdタグ）は横方向に2つのセルにまたがっています。
横方向にセルを結合するためには、colspan属性を該当のtdタグに追加します。
- 属性値には結合するセルの数を記述します。
- 今回は横方向に2つのセルを結合しますので、属性値は2です。

■ colspan属性の記述方法

<td colspan="結合するセルの数">セルの内容物</td>

colspan属性の記述方法

<h3>セルを横方向に結合しよう</h3>

<table border="1">
  <tr>
    <td colspan="2">1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-11

■ ブラウザプレビュー　完成

縦・横の結合を組み合わせてテーブルを作ろう

複雑な形のテーブルは、ここまでに学習したように、rowspan属性またはcolspan属性を使い、複数のセルを結合することにより作成します。
次は、その2つの属性を使って、右のテーブルを作成してみましょう。
これまでと同じく、セルを結合する前の元の形を考えるところからはじめましょう。

■ 縦・横の結合を組み合わせたテーブル

何行何列のテーブルが元になっているのかを確認しよう

今回作成するテーブルは、5行2列のテーブルが元になっています。
横方向に2つ結合されたセルが1つ、縦方向に3つ結合されたセルが1つあります。

以上が確認できたら、実際にHTMLタグを入力してテーブルを作成していきましょう。

【図解】縦・横の結合を組み合わせる

1. tableタグで表組のエリア全体をマークアップする

これまでと同様に、最初にtableタグで表組全体のエリアを指定し、枠線を表示するために属性のborder="1"を追加しておきます。

<h3>縦・横の結合を組み合わせてテーブルを作ろう</h3>

<table border="1"></table>

HTML/CSS入門編サンプルコード15-12

2. trタグで行をマークアップする

続いて、trタグで行をマークアップします。

今回作成するテーブルの元の形は5行2列のテーブルです。
したがって、trタグを5回繰り返し記述します。

<h3>縦・横の結合を組み合わせてテーブルを作ろう</h3>

<table border="1">
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

HTML/CSS入門編サンプルコード15-13

3. tdタグでセルをマークアップする

tdタグ1つでセルは1つ作成されますので、今回必要なtdタグは全部で7つです。
1行あたりに入っているセルの個数（結合後の個数）だけ <td></td>（見出しセルは<th></th>）を <tr></tr>の間に記述します。
このとき、行の数え方は以下の図解のようになります。

【図解】行の数え方

tdタグの中には以下のテキストを入れておきましょう。

コピー&ペースト用テキスト
宮沢賢治の代表作
小説
銀河鉄道の夜
風の又三郎
注文の多い料理店
詩
春と修羅

<h3>縦・横の結合を組み合わせてテーブルを作ろう</h3>

<table border="1">
  <tr>
    <th>宮沢賢治の代表作</th>
  </tr>
  <tr>
    <th>小説</th>
    <td>銀河鉄道の夜</td>
  </tr>
  <tr>
    <td>風の又三郎</td>
  </tr>
  <tr>
    <td>注文の多い料理店</td>
  </tr>
  <tr>
    <th>詩</th>
    <td>春と修羅</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-14

4. 縦・横方向に結合するセルを指定する（rowspan属性とcolspan属性）

最後に、セルを結合する指定を行います。

1行目の見出しセル（thタグ：宮沢賢治の代表作）は横方向に2つのセルが結合されたセルです。
→ colspan="2"を追加します。
2行目の見出しセル（thタグ：小説）は縦方向に3つのセルが結合されたセルです。
→ rowspan="3"を追加します。

以上で完成となります。

<h3>縦・横の結合を組み合わせてテーブルを作ろう</h3>

<table border="1">
  <tr>
    <th colspan="2">宮沢賢治の代表作</th>
  </tr>
  <tr>
    <th rowspan="3">小説</th>
    <td>銀河鉄道の夜</td>
  </tr>
  <tr>
    <td>風の又三郎</td>
  </tr>
  <tr>
    <td>注文の多い料理店</td>
  </tr>
  <tr>
    <th>詩</th>
    <td>春と修羅</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-15

■ ブラウザプレビュー　完成

【15-4】テーブルをCSSで装飾しよう

ここまでの演習で、テーブルのHTMLマークアップの基本を理解できたと思います。
続いて、CSSでテーブルのスタイリングを行います。

テーブルの装飾は、幅・高さなどのサイズ指定、枠線、背景色、文字色などを設定し、見やすさと美しさを考慮して行います。
本章の最初の演習で作成した料金表を以下のようにスタイリングします。
スタイリング仕様は以下のとおりです。

スタイリング前の準備として、tableタグに追加したborder="1"は削除して枠線が表示されないようにしておきます。
また、tableタグにはclass名を追加します。

■ HTMLマークアップ

<table class="price-table">
  <tr>
    <th>一般</th>
    <th>学生</th>
    <th>子供</th>
    <th>シニア</th>
  </tr>
  <tr>
    <td>1,800円</td>
    <td>1,200円</td>
    <td>無料</td>
    <td>1,400円</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-16

■ 料金表　スタイリング前

■ 料金表　スタイリング後

ボーダーとパディングがどのように適用されるかを確認しよう

テーブルをCSSでスタイリングする際に、知識として特に重要なことは、ボーダー（罫線）とpaddingの扱い方です。
まずは、table、tr、th、tdの各要素にボーダーとパディングを指定したときの違いを知りましょう。

table要素に指定したとき

table要素にborderを指定すると、表組全体の外枠に罫線が表示されます。
paddingはその外枠の内側の余白として適用されますが、一般的にはth、tdに指定した方が思い通りの余白の設定がしやすいと考えてください。

.price-table {
  border: 1px solid #000000;
  padding: 20px;
}

HTML/CSS入門編サンプルコード15-17

■ ブラウザプレビュー

tr要素に指定したとき

tr要素にborderを指定しても罫線は表示されません。
paddingも適用されません。
※ただし、table要素にborder-collapse: collapse;を指定しておくと、tr要素の領域にborderを表示させることができます。

.price-table tr {
  border: 1px solid #000000;
  padding: 20px;
}

HTML/CSS入門編サンプルコード15-18

■ ブラウザプレビュー

thとtd要素に指定したとき

thとtd要素にborderを指定すると、セル1つ1つの外枠に罫線が表示されます。
paddingはセルとその内容物との間の余白として適用されます。

.price-table th,
.price-table td {
  border: 1px solid #000000;
  padding: 20px;
}

HTML/CSS入門編サンプルコード15-19

■ ブラウザプレビュー

セルとセルの間の罫線を1本にまとめよう（border-collapseプロパティ）

th、tdにボーダーを指定すると、上記のthとtd要素に指定したときの例のように、セル1つ1つが枠線で囲まれ、セル間に隙間が生じます。

これは表組として自然な見た目ではないため、通常はセルとセルの間のボーダーを1本にまとめて隙間をなくす指定を行います。

そのために、table要素にborder-collapseプロパティを指定します。

■ セル間のborderを1本にまとめて隙間をなくす

.price-table {
  border-collapse: collapse;
}

.price-table th,
.price-table td {
  border: 1px solid #000000;
  padding: 20px;
}

HTML/CSS入門編サンプルコード15-20

■ border-collapseプロパティの値

値	意味
separate	セルの線を別々に表示する（デフォルト）
collapse	セルの線を1本にまとめて表示する（隙間がなくなる）

■ ブラウザプレビュー

ここまでが、テーブルのスタイリングを行う際に知っておくべき重要事項です。
以上の知識を踏まえ、料金表を以下の仕様でスタイリングします。

テーブルをスタイリングしよう

■ スタイリング仕様

テーブル全体	幅 500px; 文字サイズ 14px 文字色 #111111（濃いグレー）ボーダーの表示形式：隣り合うセルの線を重ねる
1行目	左ボーダー太さ 1px　実線　色 #990021（赤系）右ボーダー太さ 1px　実線　色 #990021（赤系）
2行目	CSSの指定なし
見出しセル	文字色 #ffffff（白）背景色 #990021（赤系）パディング 8px 最後の見出しセル以外に右ボーダーを指定する太さ 1px　実線　色 #ffffff（白）
セル	左ボーダー 1px　実線　色 #111111（濃いグレー）右ボーダー 1px　実線　色 #111111（濃いグレー）下ボーダー 1px solid #111111（濃いグレー）背景色 #ffffff（白）パディング 8px テキストの行揃え中央揃え

■ CSS

.price-table {
  width: 500px;
  border-collapse: collapse;
  font-size: 14px;
  color: #111111;
}

.price-table tr:first-child {
  border-left: 1px solid #990021;
  border-right: 1px solid #990021;
}

.price-table th {
  color: #ffffff;
  background-color: #990021;
  padding: 8px;
}

.price-table th:not(:last-child) {
  border-right: 1px solid #ffffff;
}

.price-table td {
  border-right: 1px solid #111111;
  border-left: 1px solid #111111;
  border-bottom: 1px solid #111111;
  background-color: #ffffff;
  padding: 8px;
  text-align: center;
}

HTML/CSS入門編サンプルコード15-21

料金表　完成

解説　スタイリングのポイント！

使用するセレクタやプロパティは、これまでに学習したものばかりですが、見出しセルの罫線と通常のセルの罫線に異なる色を使用しているため、セルにボーダーを個別指定することにより、このデザインを実現しています。
ポイントは、複数の擬似クラスを使い、同じ箇所に重複してボーダーが指定されないようにスタイリングしている点です。

【15-5】練習問題

最後に練習問題として、完成サンプルを参考に、以下の仕様でテーブルをスタイリングしてください。
必要であれば、各要素にclass名を追加してもOKです。
自分で考えて書いたコードと、解答のコードを比べてみましょう。

■ HTML

<h2>練習問題</h2>
<table class="kenji-works">
  <tr>
    <th colspan="2">宮沢賢治の代表作</th>
  </tr>
  <tr>
    <th rowspan="3">小説</th>
    <td>銀河鉄道の夜</td>
  </tr>
  <tr>
    <td>風の又三郎</td>
  </tr>
  <tr>
    <td>注文の多い料理店</td>
  </tr>
  <tr>
    <th>詩</th>
    <td>春と修羅</td>
  </tr>
</table>

HTML/CSS入門編サンプルコード15-22

■ スタイリング仕様

テーブル全体	幅 600px; 文字サイズ 16px 文字色 #111111（濃いグレー）ボーダーの表示形式：隣り合うセルの線を重ねる
1行目の見出しセル（宮沢賢治の代表作）	上ボーダー太さ 4px　実線　色 #666666（グレー）背景色 #eeeeee（薄いグレー）
カテゴリの見出しセル（小説、詩）	背景色 #ffeeee（薄いピンク）
見出しセルと通常のセル共通	ボーダー 1px　実線　色 #aaaaaa（濃いグレー）パディング 10px

■ 完成サンプル

解答

■ HTML

<h2>練習問題</h2>
  <table class="kenji-works">
    <tr>
      <th colspan="2">宮沢賢治の代表作</th>
    </tr>
    <tr>
      <th rowspan="3" class="category">小説</th>
      <td>銀河鉄道の夜</td>
    </tr>
    <tr>
      <td>風の又三郎</td>
    </tr>
    <tr>
      <td>注文の多い料理店</td>
    </tr>
    <tr>
      <th class="category">詩</th>
      <td>春と修羅</td>
    </tr>
  </table>

HTML/CSS入門編サンプルコード15-23

■ CSS

/* テーブル全体 */
.kenji-works {
  width: 600px;
  border-collapse: collapse;
  font-size: 16px;
  color: #111111;
}

/* 1行目の見出しセル（宮沢賢治の代表作） */
.kenji-works tr:first-child {
  border-top: 4px solid #666666;
  background-color: #eeeeee;
  color: #111111;
}

/* カテゴリの見出しセル（小説、詩） */
.category {
  background-color: #ffeeee;
}

/* 見出しセルと通常のセル共通 */
.kenji-works th,
.kenji-works td {
  border: 1px solid #aaaaaa;
  padding: 10px;
}

HTML/CSS入門編サンプルコード15-24

解説　スタイリングのポイント！

1行目の見出しセル（宮沢賢治の代表作）のスタイリングは、擬似クラスの:first-childを使い、最初に登場するtr要素（1行目）を指定することにより、実質的に1行目の見出しセルがスタイリングされるようにコードを記述します。
カテゴリの見出しセル（小説、詩）のスタイリングは、classセレクタ以外で行うのは難しいため、thタグに共通のclass名（category）をつけてCSSを記述します。

これで「HTML/CSS入門編 15章テーブルを作成しよう」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む