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 manapunvalign
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
Element | Chrome | Safari | Firefox | Opera | IE | Edge |
<thead> | 1 | Ya | 1 | Ya | Ya | Ya |
Mobile
Element | Android webview | Chrome Android | Edge mobile | Firefox Android | IE mobile | Opera Android | iOS Safari |
<thead> | Ya | Ya | Ya | 4 | Ya | Ya | Ya |
Default CSS :
Browser yang support dengan element
<thead>
, mempunyai nilai default :thead { display: table-header-group; vertical-align: middle; border-color: inherit; }