tRikSonic

HTML tbody Tag

Terakhir diperbarui : 22 Mei 2018 - 07.44

Tutorial HTML <tbody>

Element HTML <tbody> digunakan untuk mengelompokan kontent tubuh pada HTML table, dalam penulisannya di HTML, element <tbody> harus diletakkan didalam element HTML <table>...</table> setelah element <caption>, <colgroup> dan <thead>.
html tbody

Contoh HTML <tbody>

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>  
  <tbody>
    <tr>
      <td>Andi</td>
      <td>12 Tahun</td>
    </tr>
  </tbody>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid silver;
    padding: 8px;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>  
  <tbody>
    <tr>
      <td>Andi</td>
      <td>12 Tahun</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Attribute HTML <tbody>

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 align="center">
    <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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid silver;
    padding: 8px;
}
</style>
</head>
<body>

<p>Hasil Perlombaan</p>
<table>
  <thead>
    <tr>
      <th>Team A</th>
      <th>Team B</th>
    </tr>
  </thead>  
  <tbody align="center">
    <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>
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 valign="bottom">
    <tr>
      <td>5</td>
      <td>7</td>
    </tr>
    <tr style="height:70px">
      <td>3</td>
      <td>5</td>
    </tr>    
  </tbody>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid silver;
    padding: 8px;
}
</style>
</head>
<body>

<p>Hasil Perlombaan</p>
<table>
  <thead>
    <tr>
      <th>Team A</th>
      <th>Team B</th>
    </tr>
  </thead>  
  <tbody valign="bottom">
    <tr>
      <td>5</td>
      <td>7</td>
    </tr>
    <tr style="height:70px">
      <td>3</td>
      <td>5</td>
    </tr>    
  </tbody>
</table>

</body>
</html>

Global Attributes:

Element <tbody> mencakup Global Attributes HTML.

Event Attributes:

Element <tbody> mencakup Event Attributes HTML.

Browser Support HTML <tbody>

Desktop
ElementChromeSafariFirefoxOperaIEEdge
<tbody>1Ya1YaYaYa
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<tbody>11Ya4YaYaYa

Default CSS :

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