HTMLスキル - 第5章 Lesson3

テーブルに説明を加える3つのタグの書き方

   

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

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

テーブルタグを使って作った表組みに、クリックすると開ける説明文を表示する<caption>,<details>,<summary>タグの書き方について、初心者向けに解説しています。



この動画で学べること

・テーブルの説明を加える方法



テーブルの説明を加える方法

テーブルを表示させる場合、そのテーブルを簡潔に説明したキャプションが必要になります。
<table>開始タグのすぐ後に、<caption>タグを入れましょう。
今回は、キャプションの内容を「仕事メニュー一覧」としておきます。
また、<details>要素でテーブルの説明をすることもできます。
<summary>要素で、キャプションの下のクリックで説明を開けるようにし、<p>タグで説明文を書きます。
そうすることで、折りたたみでテーブルを説明することができるようになりました。



 <caption>仕事メニュー一覧
<details>
<summary>列の構成</summary>
<p>仕事メニューを一覧化した表。1列目が出来る事、2列目が詳細、3列目が価格</p>
</details>
</caption>




ここまでできたら 、保存してブラウザで見てみましょう。
キャプションの下にクリックで開くテーブルの説明文が作成できました。