Tutorial HTML <thead>
Element HTML
thead digunakan untuk mengelompokan kontent header pada HTML tableAttribute HTML <thead>
alignAttribute 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>bgcolorAttribute 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>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 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;
}