Tutorial HTML <tr>
Element HTML
tr digunakan untuk membuat baris pada table HTML, dan berisi 1 atau lebih element <th> atau <td>.
Dalam Penulisannya di HTML element
<tr> ditulis didalam element <table>, dengan ketentuan element <thead>, <tbody>, dan <tfoot>, tidak diikutsertakan.Tapi jika element HTML
<thead>, <tbody>, dan <tfoot> diikutsertakan didalam element <table>...</table>, maka element <tr> wajib ditulis didalam rentang <thead>...</thead> atau <tbody>...</tbody> atau <tfoot>...</tfoot>Contoh HTML <tr>
Contoh 1 :
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr>
<td>Novy</td>
<td>14 Tahun</td>
</tr>
</table><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table, th, td {
border: 1px solid silver;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr>
<td>Novy</td>
<td>14 Tahun</td>
</tr>
</table>
</body>
</html>Contoh 2 :
<table>
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr>
<td>Novy</td>
<td>14 Tahun</td>
</tr>
</tbody>
</table><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table, th, td {
border: 1px solid silver;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr>
<td>Novy</td>
<td>14 Tahun</td>
</tr>
</tbody>
</table>
</body>
</html>Attribute HTML <tr>
alignAttribute ini tidak support pada HTML 5
Attribute ini digunakan untuk menentukan keselarasan atau posisi
Contoh :
<table>
<tr align="right">
<th>Nama</th>
<th>Umur</th>
</tr>
<tr align="left">
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr align="center">
<td>Budi</td>
<td>14 Tahun</td>
</tr>
<tr align="justyfy">
<td>Cantik</td>
<td>15 Tahun</td>
</tr>
<tr align="char">
<td>Rudi</td>
<td>14 Tahun</td>
</tr>
</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>
<tr align="right">
<th>Nama</th>
<th>Umur</th>
</tr>
<tr align="left">
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr align="center">
<td>Budi</td>
<td>14 Tahun</td>
</tr>
<tr align="justyfy">
<td>Cantik</td>
<td>15 Tahun</td>
</tr>
<tr align="char">
<td>Rudi</td>
<td>14 Tahun</td>
</tr>
</table>
</body>
</html>bgcolorAttribute ini tidak support pada HTML 5
Attribute ini digunakan untuk menentukan warna Background
Contoh :
<table>
<tr bgcolor="pink">
<th>Nama</th>
<th>Umur</th>
</tr>
<tr bgcolor="yellow">
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr bgcolor="#555">
<td>Budi</td>
<td>14 Tahun</td>
</tr>
<tr bgcolor="red">
<td>Cantik</td>
<td>15 Tahun</td>
</tr>
<tr bgcolor="blue">
<td>Rudi</td>
<td>14 Tahun</td>
</tr>
</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>
<tr bgcolor="pink">
<th>Nama</th>
<th>Umur</th>
</tr>
<tr bgcolor="yellow">
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr bgcolor="#555">
<td>Budi</td>
<td>14 Tahun</td>
</tr>
<tr bgcolor="red">
<td>Cantik</td>
<td>15 Tahun</td>
</tr>
<tr bgcolor="blue">
<td>Rudi</td>
<td>14 Tahun</td>
</tr>
</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>
<tr valign="top">
<th>Nama</th>
<th>Umur</th>
</tr>
<tr valign="middle">
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr valign="bottom">
<td>Budi</td>
<td>14 Tahun</td>
</tr>
<tr valign="baseline">
<td>Cantik</td>
<td>15 Tahun</td>
</tr>
</table><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
tr {
height : 100px;
}
th, td {
border: 1px solid silver;
padding : 8px;
}
</style>
</head>
<body>
<table>
<tr valign="top">
<th>Nama</th>
<th>Umur</th>
</tr>
<tr valign="middle">
<td>Andi</td>
<td>13 Tahun</td>
</tr>
<tr valign="bottom">
<td>Budi</td>
<td>14 Tahun</td>
</tr>
<tr valign="baseline">
<td>Cantik</td>
<td>15 Tahun</td>
</tr>
</table>
</body>
</html>Global Attributes:
Element <tr> mencakup Global Attributes HTML.
Event Attributes:
Element <tr> mencakup Event Attributes HTML.
Browser Support HTML <tr>
Desktop
| Element | Chrome | Safari | Firefox | Opera | IE | Edge |
<tr> | 1 | Ya | 1 | Ya | Ya | Ya |
Mobile
| Element | Android webview | Chrome Android | Edge mobile | Firefox Android | IE mobile | Opera Android | iOS Safari |
<tr> | Ya | Ya | Ya | 4 | Ya | Ya | Ya |
Default CSS :
Browser yang support dengan element
<tr>, mempunyai nilai default :tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}