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 trPada 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>
alignAttribute 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>bgcolorAttribute 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>charAttribute 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
charoffAttribute 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 manapunvalignAttribute 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;
}