Tutorial HTML <tfoot>
Element HTML
tfoot
digunakan untuk mengelompokan kontent kaki pada HTML table
Pada HTML 4, element
<tfoot>
tidak bisa ditulis setelah element tbody
dan tr
Pada HTML 5, element
<tfoot>
harus muncul setelah element caption
, colgroup
, thead
, dan tbody
. Catatan : ini merupakan standarisasi pada HTML 5Berikut salah satu contoh penulisan yang memenuhi standarisasi HTML 5 :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <table> <thead> <tr> <th>Team A</th> <th>Team B</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>7</td> </tr> <tr> <td>3</td> <td>5</td> </tr> </tbody> <tfoot> <tr> <th colspan="2">Jumlah</th> </tr> <tr> <td>8</td> <td>12</td> </tr> </tfoot> </table> </body> </html>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <table> <thead> <tr> <th>Team A</th> <th>Team B</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>7</td> </tr> <tr> <td>3</td> <td>5</td> </tr> </tbody> <tfoot> <tr> <th colspan="2">Jumlah</th> </tr> <tr> <td>8</td> <td>12</td> </tr> </tfoot> </table> </body> </html>
Attribute HTML <tfoot>
align
Attribute ini tidak support pada HTML 5
Attribute ini digunakan untuk menentukan keselarasan atau posisi
Contoh :
<table> <thead> <tr> <th>Team A</th> <th>Team B</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>7</td> </tr> <tr> <td>3</td> <td>5</td> </tr> </tbody> <tfoot align="right"> <tr> <th colspan="2">Jumlah</th> </tr> <tr> <td>8</td> <td>12</td> </tr> </tfoot> </table>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> table, th, td { border: 1px solid silver; } </style> </head> <body> <table> <thead> <tr> <th>Team A</th> <th>Team B</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>7</td> </tr> <tr> <td>3</td> <td>5</td> </tr> </tbody> <tfoot align="right"> <tr> <th colspan="2">Jumlah</th> </tr> <tr> <td>8</td> <td>12</td> </tr> </tfoot> </table> </body> </html>
bgcolor
Attribute ini tidak support pada HTML 5
Attribute ini digunakan untuk menentukan warna Background
Contoh :
<table> <thead> <tr> <th>Team A</th> <th>Team B</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>7</td> </tr> <tr> <td>3</td> <td>5</td> </tr> </tbody> <tfoot bgcolor="pink"> <tr> <th colspan="2">Jumlah</th> </tr> <tr> <td>8</td> <td>12</td> </tr> </tfoot> </table>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> table, th, td { border: 1px solid silver; } </style> </head> <body> <table> <thead> <tr> <th>Team A</th> <th>Team B</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>7</td> </tr> <tr> <td>3</td> <td>5</td> </tr> </tbody> <tfoot bgcolor="pink"> <tr> <th colspan="2">Jumlah</th> </tr> <tr> <td>8</td> <td>12</td> </tr> </tfoot> </table> </body> </html>
char
Attribute ini tidak support pada HTML 5
Attribute ini digunakan untuk menentukan karakter agar selaras antara cell dengan kolom. Attribute ini tidak support untuk browser terkenal manapun
charoff
Attribute ini tidak support pada HTML 5
Attribute ini digunakan digunakan untuk menentukan jumlah karakter dan sebagai kontrol dari attribute
char
. Attribute ini tidak support untuk browser terkenal manapunvalign
Attribute ini tidak support pada HTML 5
Attribute ini digunakan untuk menentukan keselarasan teks pada setiap baris cell
Contoh :
<table> <thead> <tr> <th>Team A</th> <th>Team B</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>7</td> </tr> <tr> <td>3</td> <td>5</td> </tr> </tbody> <tfoot valign="bottom"> <tr> <th colspan="2">Jumlah</th> </tr> <tr style="height:70px"> <td>8</td> <td>12</td> </tr> </tfoot> </table>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> table, th, td { border: 1px solid silver; } </style> </head> <body> <table> <thead> <tr> <th>Team A</th> <th>Team B</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>7</td> </tr> <tr> <td>3</td> <td>5</td> </tr> </tbody> <tfoot valign="bottom"> <tr> <th colspan="2">Jumlah</th> </tr> <tr style="height:70px"> <td>8</td> <td>12</td> </tr> </tfoot> </table> </body> </html>
Global Attributes:
Element <tfoot> mencakup Global Attributes HTML.
Event Attributes:
Element <tfoot> mencakup Event Attributes HTML.
Browser Support HTML <tfoot>
Desktop
Element | Chrome | Safari | Firefox | Opera | IE | Edge |
<tfoot> | 1 | Ya | 1 | Ya | Ya | Ya |
Mobile
Element | Android webview | Chrome Android | Edge mobile | Firefox Android | IE mobile | Opera Android | iOS Safari |
<tfoot> | Ya | Ya | Ya | 4 | Ya | Ya | Ya |
Default CSS :
Browser yang support dengan element
<tfoot>
, mempunyai nilai default :tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }