tRikSonic
Tema

HTML tr Tag

Terakhir diperbarui : 22 Mei 2018 - 07.34

Tutorial HTML <tr>

Element HTML tr digunakan untuk membuat baris pada table HTML, dan berisi 1 atau lebih element <th> atau <td>.
html tr
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 manapun
valign
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
ElementChromeSafariFirefoxOperaIEEdge
<tr>1Ya1YaYaYa
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<tr>YaYaYa4YaYaYa

Default CSS :

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