HTML <tr> Tanda

Definisi dan penggunaan

<tr> tag mendefinisikan baris dalam tabel HTML.

<tr> elemen mengandung satu atau lebih <th> atau <td> elemen.

Lihat juga:

Tutorial HTML:Tabel HTML

Panduan Referensi HTML DOM:Objek TableRow

Tutorial CSS:Pengaturan gaya tabel

Contoh

Contoh 1

Tabel HTML tiga baris sederhana; baris judul dan dua baris data:

<table>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>Rp 3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>Rp 4500</td>
  </tr>
</table>

Coba Sendiri

Contoh 2

Bagaimana menata: <tr> isi dalamnya (dengan CSS):

<table style="width:100%">
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr style="text-align:right">
    <td>Januari</td>
    <td>Rp 3400</td>
  </tr>
</table>

Coba Sendiri

Contoh 3

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

<table>
  <tr style="background-color:#FF0000">
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>Rp 3400</td>
  </tr>
 </table>

Coba Sendiri

Contoh 4

Bagaimana mengatur rata vertikal: <tr> isi dalamnya (dengan CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>Januari</td>
    <td>Rp 3400</td>
  </tr>
</table>

Coba Sendiri

Contoh 5

Bagaimana membuat judul tabel:

<table>
  <tr>
    <th>name</th>
    <th>email</th>
    <th>Telepon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Coba Sendiri

Contoh 6

Bagaimana membuat tabel dengan judul:

<table>
  <caption>Tabungan bulanan</caption>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>Rp 3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>Rp 4500</td>
  </tr>
</table>

Coba Sendiri

Contoh 7

Bagaimana mendefinisikan sel tabel yang melintasi baris dan kolom berbeda:

<table>
  <tr>
    <th>name</th>
    <th>email</th>
    <th colspan="2">Telepon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Coba Sendiri

Properti Global

<tr> Tanda ini juga mendukung Properti Global di HTML.

Properti Event

<tr> Tanda ini juga mendukung Properti Event di HTML.

Pengaturan CSS Default

Sebagian besar peramban akan menampilkan nilai default berikut ini <tr> Elemen:

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

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan