Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>表に見出しセルを表示してみましょう!

表に見出しセルを表示してみましょう!〜表の1行目を見出しセルに〜(th要素)

普通コースじっくりコースアイコンの説明 普通コースじっくりコースアイコンの説明

使用タグ <th>〜</th>

HTML一覧タグ辞典 … <th> タグ

<th>タグは表のセルを作成できます。<td>タグはデータ用セルですが、<th>タグは見出し用セルに使います。<th>タグには<p>タグなどのブロック要素や、画像、直接文章なども記述できます。<th>〜</th>タグの中に記述された文字列は、見出しセル部分を目立たせるために、自動的に太字になり、セルの中央に表示されます。

使用例

見出しセルを表の1行目に表示させます。前のページの「表を作成しましょう!」で表を作成している方は、1行目の td 要素を th 要素に変えてみましょう。

記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table border="1">
<tr>
<th>1つ目の見出しセル</th>
<th>2つ目の見出しセル</th>
<th>3つ目の見出しセル</th>
</tr>
<tr>
<td>2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、1つ目のセル</td>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>
</body>
</html>

このように1行目を th 要素で見出しに指定します。

使用例の表示

[表の1行目をth要素で見出しセルにしたブラウザでの表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 2つ目の見出しセル 3つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル

このようにして、表の見出しは作られます。入り組んでいるので、入力ミスに注意しましょう!次は1列目を見出しに設定してみましょう!

関連情報ページ

このタグによく使われるCSS

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system