アジェンダ
- HTMLのタグ
- table
- tr
- td
- thead
- tbody
- tfoot
- HTMLの属性
- border
- colspan
- 実践
HTMLのタグ
table
テーブルであることを示すタグ。
tr
テーブルのうち、ひとつ分の行であることを示すタグ。
table recordのtr。
td
テーブルのうち、ひとつ分のセルであることを示すタグ。
table dataのtd。
thead
テーブルのヘッダーであることを示すタグ。
tbody
テーブルの内容であることを示すタグ。
tfoot
テーブルのフッターであることを示すタグ。
※thead,tbody,tfootを使用することで、"theadとtfootを固定し、tbodyの箇所だけスクロールする"のようなことができる。
htmlの属性
border
枠線の太さを指定するのに用いる属性。
HTML5では1のみ指定できる。
※HTML Living Standardによると、border属性は廃止された。
colspan
同じ行の、複数のセルを結合させるのに用いる属性。
値には結合させるセルの個数を記載する。
実践
上記のタグ・属性を用いて、以下のindex.htmlを作成した。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>外部ファイル</title></head><body><h1>外部ファイルに関するタグと属性のまとめ</h1><hr><p>今後HTMLを書いていく際、どのタグにどの属性を書くのかわからなくなる予感がしたため、表でまとめた。
<tableborder="1"><thead><!-- 一行目. --><tr><td></td><td>img</td><td>link</td><td>script</td><td>iframe</td></tr></thead><tbody><!-- 二行目. --><tr><td>type</td><td></td><td>〇</td><td>〇</td><td></td></tr><!-- 三行目. --><tr><td>title</td><td>〇</td><td></td><td></td><td></td></tr><!-- 四行目. --><tr><td>rel</td><td></td><td>〇</td><td></td><td></td></tr><!-- 五行目. --><tr><td>href</td><td></td><td>〇</td><td></td><td></td></tr><!-- 六行目. --><tr><td>src</td><td>〇</td><td></td><td>△</td><td>〇</td></tr><!-- 七行目. --><tr><td>alt</td><td>〇</td><td></td><td></td><td></td></tr></tbody><tfoot><!-- 八行目. --><tr><tdcolspan="5">以上。</td></tr></tfoot></table></p></body></html>これをWebブラウザに表示させるとこんな感じ。
前回作った表を再現することができた。
しかし、thead,tbody,tfootの効果は確認できなかった。
おわりに
今回は表に関する内容だった。
うまくコメントをつけないと、表が大きくなった際にコードの可読性が低くなってしまいそうだ。
次回 >> ☆まだ☆