thead要素

TOPページに戻る > html入門

スポンサード リンク

thead要素

表の複数の行をのグループ化する要素です
使い方はthead要素でtr要素を囲んで行をグループ化します
table要素、caption要素、col要素, colgroup要素の次に記述します
thead要素の内容は、表のヘッダ部分として表示されます(表の最初の行です)
thead要素はtable要素内に1つのみ使用できます
グループ化した後はcssでスタイルを指定するとグループ化した内容のスタイルをまとめて指定できます
※thead要素は省略可能です。グループ化しない場合は記述する必要はありません

使い方(書式)

<thead></thead>

thead要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 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; } /* 背景色を指定 */

実際の表示

captionを付けました
セルの内容 セルの内容
セルの内容 セルの内容

その他のデザインはcssでスタイルを指定





(C)2012 ホームページ作成無料