HTMLスキル - 第5章 Lesson4

行をグループ化する3つのタグの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

テーブルタグを使って作った表組みを、グループ毎に分ける<thead>,<tfoot>,<tbody>タグの書き方について初心者向けに解説しています。



この動画で学べること

・テーブルの行をグループ化する方法



テーブルの行をグループ化する方法

今回は、テーブルのタイトルはヘッダーに、テーブルのデータの参照元やコピーライトはフッターに、といったような、行をグループ化する方法を見ていきましょう。
まず、ヘッダーになる部分を<thead>タグ囲みます。



<thead>
<tr>
<th scope="col">出来る事</th>
<th scope="col">詳細</th>
<th scope="col">価格</th>
</tr>
</thead>



一度保存してブラウザで見てみましょう。
<thead>タグで囲んだ部分が、違うデザインになりました。






次に、テーブルのボディになる部分を<tbody>タグ囲みます



<tbody>
<tr>
<th scope="row">Webデザイン</th>
<td>Photoshopを使用したWebサイトデザイン</td>
<td>50,000円〜</td>
</tr>
 <tr>
<th scope="row">Webサイトコーディング</th>
<td>HTML,CSS,javascriptを使用したWebサイトコーディング</td>
<td>50,000円〜</td>
</tr>
 <tr>
<th scope="row">ロゴ制作</th>
<td>企業やウェブサイトのロゴ製作</td>
<td>50,000円〜</td>
</tr>
</tbody>




一度保存してブラウザで見てみましょう。
デザインに変化はありませんが、<tbody>タグで囲んだ部分が、テーブルのボディとして定義されました。



最後に、フッター部分を見ていきます。
フッターになるところを<tfoot>で囲みます。
<tfoot>は、<thead>の次に書くことが、ルールとして決まっています。
つまり、テーブルをグループ化するときには、ヘッダー、フッター、ボディの順番になるということです。
では、<thead>タグの次に書いていきましょう。



 <tfoot>
<tr>
<td>2014年4月1日現在の情報です。</td>
<td></td>
<td></td>
</tr>
</tfoot><span></span>




ここまでできたら 、保存してブラウザで見てみましょう。
「2014年4月1日現在の情報です。」と表示されました。