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