アジェンダ
- 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>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部ファイル</title>
</head>
<body>
<h1>外部ファイルに関するタグと属性のまとめ</h1>
<hr>
<p>今後HTMLを書いていく際、どのタグにどの属性を書くのかわからなくなる予感がしたため、表でまとめた。
<table border="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>
<td colspan="5">以上。</td>
</tr>
</tfoot>
</table>
</p>
</body>
</html>
これをWebブラウザに表示させるとこんな感じ。
前回作った表を再現することができた。
しかし、thead,tbody,tfootの効果は確認できなかった。
おわりに
今回は表に関する内容だった。
うまくコメントをつけないと、表が大きくなった際にコードの可読性が低くなってしまいそうだ。
次回 >> ☆まだ☆