見出し行を作成するには<td>の代わり<th>にを使用して、セルを作成します。
<th>を使うとテキストが太字で表示され中央揃えになり、見出し書式へと自動的に変換されます。
<tr>
<th>見出し</th>
<th>見出し</th>
<tr>
それでは、先程の表に見出し行を追加してみましょう。
「時間」「教科」「担任」を入力します。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<table class="tableborder">
<tr>
<th>時間</th>
<th>教科</th>
<th>担任</th>
</tr>
<tr>
<td>一時間目</td>
<td>国語</td>
<td>西田</td>
</tr>
<tr>
<td>二時間目</td>
<td>数学</td>
<td>入部</td>
</tr>
<tr>
<td>三時間目</td>
<td>社会</td>
<td>野田</td>
</tr>
</table>
入力が完了したら、ブラウザで確認してみましょう。
[ブラウザでの表示例]
見出し行が追加されましたね！
自動的に太字で表示され、中央揃えされています。
このように、<th>を使うことによって見出し行を追加することができます。
なお、<th>はどこにでも使うことができます。
必ず一番上でなければならない事はありません。また、1つの表の中に何度でも使うことができます。
見出し行の罫線を表示する
追加した見出し行には罫線が表示されていません。
なので、この<th>にも罫線を表示するようCSSを記述しましょう。
CSSファイルに、以下のスタイルを追記します。
[追加するスタイル].tableborder th{
border:solid 1px #666;
}
.tableborder {
border:solid 1px #666;
}
.tableborder td{
border:solid 1px #666;
}
.tableborder th{ ← thの枠線を表示
border:solid 1px #666;
}
追加が完了したら、ブラウザで確認してみましょう。
[ブラウザでの表示例]
問題なく罫線が追加されていれば成功です。
覚えておきたいポイント
見出しを使ってわかりやすく
見出しを使えば表の内容をわかりやすく伝えることができます。
また、見出し行は1つの表に複数個作成することができます。特に上限などはありません。
