ホーム＞コース別ガイド一覧＞表に見出しセルを表示してみましょう！
表に見出しセルを表示してみましょう！〜表の１行目を見出しセルに〜（th要素） |
  
|
使用タグ <th>〜</th>
HTML一覧タグ辞典 … <th> タグ
<th>タグは表のセルを作成できます。<td>タグはデータ用セルですが、<th>タグは見出し用セルに使います。<th>タグには<p>タグなどのブロック要素や、画像、直接文章なども記述できます。<th>〜</th>タグの中に記述された文字列は、見出しセル部分を目立たせるために、自動的に太字になり、セルの中央に表示されます。
使用例
見出しセルを表の１行目に表示させます。前のページの「表を作成しましょう！」で表を作成している方は、１行目の td 要素を th 要素に変えてみましょう。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table border="1">
<tr>
<th>１つ目の見出しセル</th>
<th>２つ目の見出しセル</th>
<th>３つ目の見出しセル</th>
</tr>
<tr>
<td>２行目、１つ目のセル</td>
<td>２行目、２つ目のセル</td>
<td>２行目、３つ目のセル</td>
</tr>
<tr>
<td>３行目、１つ目のセル</td>
<td>３行目、２つ目のセル</td>
<td>３行目、３つ目のセル</td>
</tr>
</table>
</body>
</html> |
|
このように１行目を th 要素で見出しに指定します。
使用例の表示
[表の１行目をth要素で見出しセルにしたブラウザでの表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
２つ目の見出しセル |
３つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、１つ目のセル |
３行目、２つ目のセル |
３行目、３つ目のセル |
|
|
このようにして、表の見出しは作られます。入り組んでいるので、入力ミスに注意しましょう！次は１列目を見出しに設定してみましょう！
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
|
