Tag HTML <tr>


Contoh

Tabel HTML sederhana dengan tiga baris; satu baris header dan dua baris data:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Lebih banyak contoh "Coba Sendiri" di bawah ini.


Definisi dan Penggunaan

Tag <tr>mendefinisikan baris dalam tabel HTML.

Sebuah <tr>elemen berisi satu atau lebih elemen <th> atau <td> .


Dukungan Peramban

Element
<tr> Yes Yes Yes Yes Yes

Atribut Global

Tag <tr>juga mendukung Atribut Global dalam HTML .


Atribut Acara

Tag <tr>juga mendukung Atribut Peristiwa dalam HTML .



Lebih Banyak Contoh

Contoh

Cara menyelaraskan konten di dalam <tr> (dengan CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="text-align:right">
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Contoh

Cara menambahkan warna latar belakang ke baris tabel (dengan CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
 </table>

Contoh

Cara menyelaraskan konten secara vertikal di dalam <tr> (dengan CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Contoh

Cara membuat header tabel:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
  </tr>
</table>

Contoh

Cara membuat tabel dengan keterangan:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Contoh

Cara mendefinisikan sel tabel yang menjangkau lebih dari satu baris atau satu kolom:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>

Halaman Terkait

Tutorial HTML: Tabel HTML

Referensi DOM HTML: objek TableRow

Tutorial CSS: Menata Tabel


Pengaturan CSS Default

Sebagian besar browser akan menampilkan <tr>elemen dengan nilai default berikut:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}