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>
align
Attribute 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>
bgcolor
Attribute 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>
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> <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; }