Tanda <td> HTML

Definisi dan penggunaan

Sebagian besar browser akan menampilkan nilai default berikut Tag <td> menentukan sel data standar dalam tabel HTML.

HTML tabel memiliki dua jenis sel:

  • Sel judul - berisi informasi judul (menggunakan <th> Pembuatan elemen (menggunakan
  • Sel data - berisi data (menggunakan Sebagian besar browser akan menampilkan nilai default berikut Pembuatan elemen (menggunakan

Secara default,Sebagian besar browser akan menampilkan nilai default berikut Teks dalam elemen biasa, dan diatur kiri.

Teks dalam elemen <th> secara default tebal dan di tengah.

Lihat juga:

Tutorial HTML:Tabel HTML

Panduan Referensi HTML DOM:Objek TableData

Tutorial CSS:Atur gaya tabel

Contoh

Contoh 1

Sebuah tabel HTML sederhana, dengan dua baris dan empat sel tabel:

<table>
  <tr>
    <td>Sel A</td>
    <td>Sel B</td>
  </tr>
  <tr>
    <td>Sel C</td>
    <td>Sel D</td>
  </tr>
</table>

Coba sendiri

Contoh 2

Bagaimana untuk menata Sebagian besar browser akan menampilkan nilai default berikut ISI (menggunakan CSS):

<table style="width:100%">
  <tr>
    <th>Bulan</th>
    <th>Saving</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Coba sendiri

Contoh 3

Bagaimana menambahkan warna latar untuk sel tabel (menggunakan CSS):

<table>
  <tr>
    <th>Bulan</th>
    <th>Saving</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">Januari</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Coba sendiri

Contoh 4

Bagaimana menetapkan tinggi sel tabel (menggunakan CSS):

<table>
  <tr>
    <th>Bulan</th>
    <th>Saving</th>
  </tr>
  <tr>
    <td style="height:100px">Januari</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 5

Bagaimana menentukan sel tabel untuk tidak berpindah baris (menggunakan CSS):

<table>
  <tr>
    <th>Poem</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。</td>
  </tr>
</table>

Coba sendiri

Contoh 6

Bagaimana menaruh vertikal Sebagian besar browser akan menampilkan nilai default berikut ISI (menggunakan CSS):

<table style="width:50%;">
  <tr>
    <th>Bulan</th>
    <th>Saving</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">Januari</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 7

Bagaimana mengatur lebar sel tabel (menggunakan CSS):

<table style="width:100%">
  <tr>
    <th>Bulan</th>
    <th>Saving</th>
  </tr>
  <tr>
    <td style="width:70%">Januari</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 8

Bagaimana membuat judul tabel:

<table>
  <tr>
    <th>Nama</th>
    <th>Emel</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 9

Bagaimana membuat tabel dengan judul:

<table>
  <caption>Bulan savings</caption>
  <tr>
    <th>Bulan</th>
    <th>Saving</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba sendiri

Contoh 10

Bagaimana menentukan sel tabel melewati baris atau kolom yang berbeda:

<table>
  <tr>
    <th>Nama</th>
    <th>Emel</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

Coba sendiri

Coba sendiri Atribut Nilai
Deskripsi rowspan colspan
Tentukan berapa kolom sel yang akan dilewati sel headers header_id
Tentukan satu atau lebih sel judul yang berhubungan dengan sel rowspan Angka

Atur berapa baris sel yang akan dilewati sel

Sebagian besar browser akan menampilkan nilai default berikut Atribut peristiwa Atribut globalAtribut peristiwa dalam HTML

Atribut global dalam HTML

Sebagian besar browser akan menampilkan nilai default berikut Atribut peristiwa Tanda ini juga mendukungAtribut peristiwa dalam HTML

。

Pengaturan CSS default Sebagian besar browser akan menampilkan nilai default berikut <td>

Elemen:
  td {
  display: table-cell;
vertical-align: inherit;

}

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