今回は、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>