HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

HTMLのtableについての勉強

今回は、HTMLのtableについて勉強しましょう!

以前もtableについては、お伝えしたことがありましたが、見づらい部分が多かったので、改めてお伝えします。

それでは、HTMLのtableについて勉強を始めましょう!

 

scope属性(スコープ)

・th要素やtd要素に scope="" を追加すると、見出しの対象範囲を指定することができる
・この属性で示された情報は、音声ブラウザなどで役立てられることになります

属性説明
scope="" row 行方向(横列)のセルを対象にする
col 列方向(縦列)のセルを対象にする
rowgroup 行グループ内のセルを対象にする
colgroup 列グループ内のセルを対象にする

 

caption

・表にタイトルを付ける要素
・table開始タグの直後に配置する

<table>
<caption>夜の章 Name of Night</caption>
<tr>
<th>夜の名前</th><th>夜の訪れ</th><th>朝の訪れ</th><th>明るい夜</th>
</tr>
<tr>
<td></td><td>薄明</td><td></td><td>良夜</td>
</tr>
<tr>
<td></td><td>宵月</td><td>有明</td><td>月華</td>
</tr>
<tr>
<td></td><td>宵の明星</td><td>明の明星</td><td>星月夜</td>
</tr>
<tr>
<td></td><td>黄道</td><td>朝末き</td><td>夜天光</td>
</tr>
</table>

demo

colgroup

・表の縦列をグループ化して、属性をまとめて指定したいときに使用する

<table>
<colgroupclass="col1"></colgroup>
<colgroupclass="col2"></colgroup>
<colgroupclass="col3"></colgroup>
<colgroupclass="col4"></colgroup>
<caption>夜の章 Name of Night</caption>
<tr>
<th>夜の名前</th><th>夜の訪れ</th><th>朝の訪れ</th><th>明るい夜</th>
</tr>
<tr>
<td></td><td>薄明</td><td></td><td>良夜</td>
</tr>
<tr>
<td></td><td>宵月</td><td>有明</td><td>月華</td>
</tr>
<tr>
<td></td><td>宵の明星</td><td>明の明星</td><td>星月夜</td>
</tr>
<tr>
<td></td><td>黄道</td><td>朝末き</td><td>夜天光</td>
</tr>
</table>