tRikSonic
Tema
  • Original
  • Translate

HTML thead Tag

Terakhir diperbarui : 22 Mei 2018 - 07.39

Tutorial HTML <thead>

Element HTML thead digunakan untuk mengelompokan kontent header pada HTML table

Attribute HTML <thead>

align
Attribute ini tidak support pada HTML 5
Attribute ini digunakan untuk menentukan keselarasan atau posisi
Contoh :
<table>
  <thead align="right">
    <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>
<!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 align="right">
    <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>
bgcolor
Attribute ini tidak support pada HTML 5
Attribute ini digunakan untuk menentukan warna Background
Contoh :
<table>
  <thead bgcolor="pink">
    <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>
<!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 bgcolor="pink">
    <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>
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 valign="bottom">
    <tr style="height:70px">
      <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>
<!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 valign="bottom">
    <tr style="height:70px">
      <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>

Global Attributes:

Element <thead> mencakup Global Attributes HTML.

Event Attributes:

Element <thead> mencakup Event Attributes HTML.

Browser Support HTML <thead>

Desktop
ElementChromeSafariFirefoxOperaIEEdge
<thead>1Ya1YaYaYa
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<thead>YaYaYa4YaYaYa

Default CSS :

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