tRikSonic
Tema
  • Original
  • Translate

HTML tfoot Tag

Terakhir diperbarui : 22 Mei 2018 - 07.42

Tutorial HTML <tfoot>

Element HTML tfoot digunakan untuk mengelompokan kontent kaki pada HTML table
html tfoot
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 5
Berikut 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 manapun
valign
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
ElementChromeSafariFirefoxOperaIEEdge
<tfoot>1Ya1YaYaYa
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<tfoot>YaYaYa4YaYaYa

Default CSS :

Browser yang support dengan element <tfoot>, mempunyai nilai default :
tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.