thタグとは?|HTMLの表(テーブル)に見出しセルを作成しよう

thタグとは?|HTMLの表(テーブル)に見出しセルを作成しよう
博士
HTMLの表(テーブル)が作成できたら、行や列に見出しを付けてみよう。
リンゴ
見出しを付けることで、表がもっと見やすくなりますね!
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<th>タグとは

 

<th>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類
利用場所tr要素の子要素として
内容フロー・コンテンツ(ただし、header要素、footer要素、セクショニング・コンテンツ、ヘッディング・コンテンツを子要素とすることは不可)


 
 
<th>タグは、表の行や列の見出しを指定する際に使用するタグです。
見出しに指定されたテキストは、一般的には太字でセンタリングされて表示されます。

HTMLの表の基本的な構造は、<table>~</table>の中に、<tr>~</tr>で表の横行を定義して、さらにその中に<th>~</th>や<td>~</td>でセルを定義します。
 
 

博士
<th>は「table header」の略じゃ。
 
 

使用例

 
 

表示例

名前担当
ジョンボーカル・ギター
ポールボーカル・ベース
ジョージギター
リンゴドラム
 
 

rowspan属性

th要素、td要素にrowspan属性を指定すると、そのセルから指定された数だけ下方向のセルを連結し、1つのセルとして表示できるようになります。
 
 

使用例

 
 

表示例

順位タイトルメーカー
1位スーパーマリオブラザーズ任天堂
2位スーパーマリオブラザーズ3
3位ドラゴンクエストIII そして伝説へ…エニックス

 
 
また、rowspan属性の値に「0」を指定すると、そのセルから行グループの終わりのセルまでが連結されます。
グループ化が行われていない場合は、表の終わりのセルまでが連結されます。
 
 
博士
この指定に対応していないブラウザもあるぞ。
 
 

スポンサーリンク

colspan属性

th要素、td要素にcolspan属性を指定すると、そのセルから指定された数だけ横方向のセルを連結し、1つのセルとして表示できるようになります。
 
 

使用例

 
 

表示例

順位タイトル売上本数
1位スーパーマリオブラザーズ681万本
2位スーパーマリオブラザーズ3384万本
3位ドラゴンクエストIII そして伝説へ…380万本
2016年9月5日現在

 
 

まとめ

<th>タグは、表の見出しセルを作成する際に使用するタグです。
 
 

リンゴ
見出しを活用して、見やすく分かりやすい表を作成しよう!
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








thタグとは?|HTMLの表(テーブル)に見出しセルを作成しよう