スポンサード リンク
thead要素
表の複数の行をのグループ化する要素です
使い方はthead要素でtr要素を囲んで行をグループ化します
table要素、caption要素、col要素, colgroup要素の次に記述します
thead要素の内容は、表のヘッダ部分として表示されます(表の最初の行です)
thead要素はtable要素内に1つのみ使用できます
グループ化した後はcssでスタイルを指定するとグループ化した内容のスタイルをまとめて指定できます
※thead要素は省略可能です。グループ化しない場合は記述する必要はありません
使い方(書式)
<thead></thead>
thead要素
対応ブラウザ | |
要素の種類 | table要素の子要素 |
内容となる要素 | tr要素 |
属性 | 説明 |
align属性 | thead要素の内容になっているセルのテキストの横の表示位置を指定します
値にはleft、right、center、justify、char |
valign属性 | thead要素の内容になっているセルのテキストの縦の表示位置を指定します
値にはtop、middle、bottom、baseline |
char属性 | thead要素の内容になっているセルの内容の位置揃えとなる文字を指定します
対応しているブラウザはありません HTML5で廃止されました |
charoff属性 | char属性で位置揃えが指定された場合、charoff属性でその文字から水平方向に位置をずらして表示します
対応しているブラウザはありません HTML5で廃止されました |
共通属性 | html共通属性 |
イベント属性 | htmlイベント属性 |
実際の指定方法
html
<table> <caption>captionを付けました</caption> <thead class="hoge"> <tr> <td>セルの内容</td> <td>セルの内容</td> </tr> </thead> <tr> <td>セルの内容</td> <td>セルの内容</td> </tr> </table>
css
.hoge{ background-color: #FFFACD; } /* 背景色を指定 */
実際の表示
セルの内容 | セルの内容 |
セルの内容 | セルの内容 |