HTMLスキル - 第5章 Lesson2

テーブルに項目名を設定する<th>タグの書き方

   

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

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

テーブルタグを使って作った表組みに、項目名を設定するための<th>タグの書き方について、初心者向けに解説しています。



この動画で学べること

・テーブルに項目名をつける方法



テーブルに項目名をつける方法


前回の続きで、テーブルのマークアップ仕方を見ていきましょう。
テーブルのそれぞれの列が、どんな属性を示しているかを示すのは<th>タグです。
表の項目の部分(表の1行目)を、<td>タグから<th>タグに置き換えましょう。



また、テーブルのアクセシビリティを上げるためのscope属性を追加していきましょう。
これは、縦方向の項目名です。値にはcolを入れます。
<tr>タグの1つめの<td>タグを<th>タグに置き換え、scope属性を追加すると、縦の項目ができました。



<table>
<tr>
<th scope="col">出来る事</th>
<th scope="col">詳細</th>
<th scope="col">価格</th>
</tr>
<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>
</table>




ここまでできたら 、保存してブラウザで見てみましょう。
テーブルの横1行目と縦の左側の列が項目になりました。