Tabel HTML


Tabel HTML memungkinkan pengembang web untuk mengatur data menjadi baris dan kolom.


Menentukan Tabel HTML

Tag <table> mendefinisikan tabel HTML.

Setiap baris tabel didefinisikan dengan tag <tr>. Setiap header tabel didefinisikan dengan tag <th>. Setiap data tabel/sel didefinisikan dengan tag <td>.

Secara default, teks dalam elemen <th> dicetak tebal dan di tengah.

Secara default, teks dalam elemen <td> beraturan dan rata kiri.


Contoh

<table style="width: 100%">
   <tr>
     <th>Nama Depan</th>
     <th>Nama Belakang</th>
     <th>Usia</th>
   </tr>
   <tr>
     <td>Utsman</td>
     <td>Smith</td>
     <td>35</td>
   </tr>
   <tr>
     <td>Sa'ad</td>
     <td>Jackson</td>
     <td>40</td>
   </tr>
</table>

Catatan: Elemen <td> adalah wadah data dari tabel. Mereka bisa berisi semua jenis elemen HTML; teks, gambar, daftar, tabel lain, dll.


Tabel HTML - Menambahkan Batas (Border)

Untuk menambahkan border ke tabel, gunakan properti border CSS.


Contoh

table, th, td {
  border: 1px solid black;
}

Ingatlah untuk menentukan batas untuk tabel dan sel tabel


Tabel HTML - Collapse Border

Untuk membuat batas menciut menjadi satu bingkai, tambahkan properti border-collapse CSS.


Contoh

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Tabel HTML - Menambahkan Padding Sel

Sel padding menentukan ruang antara konten sel dan batasnya.

Jika Anda tidak menentukan padding, sel tabel akan ditampilkan tanpa padding.

Untuk mengatur padding, gunakan properti padding CSS.


Contoh

th, td {
  padding: 15px;
}

Tabel HTML - Heading Rata Kiri

Secara default, heading tabel dicetak tebal dan berada di tengah.

Untuk mengubah heading tabel menjadi rata kiri, gunakan properti text-align CSS.


Contoh

th {
  text-align: left;
}

Tabel HTML - Menambahkan Spasi Border

Spasi border menentukan jarak antar sel.

Untuk mengatur spasi border untuk tabel, gunakan properti border-spacing CSS.


Contoh

table {
  border-spacing: 5px;
}

Catatan: Jika tabel memiliki collapse border, spasi border tidak berpengaruh.


Tabel HTML - Sel yang Membentang Banyak Kolom

Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan.


Contoh

<table style="width:100%">
  <tr>
    <th>Nama</th>
    <th colspan="2">Telepon</th>
  </tr>
  <tr>
    <td>Khalid</td>
    <td>08123456</td>
    <td>08511234</td>
  </tr>
</table>

Tabel HTML - Sel yang Memiliki Banyak Baris

Untuk membuat rentang sel lebih dari satu baris, gunakan atribut rowspan.


Contoh

<table style="width:100%">
  <tr>
    <th>Nama:</th>
    <td>Khalid</td>
  </tr>
  <tr>
    <th rowspan="2">Telepon:</th>
    <td>08171234</td>
  </tr>
  <tr>
    <td>08525577</td>
  </tr>
</table>

Tabel HTML - Menambahkan Caption (Keterangan)

Untuk menambahkan caption ke tabel, gunakan tag <caption>.


Contoh

<table style="width:100%">
  <caption>Tabungan Bulanan</caption>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>Rp 10000</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>Rp 50000</td>
  </tr>
</table>

Catatan: Tag <caption> harus disisipkan segera setelah tag <table>.


Style Khusus untuk Satu Tabel

Untuk menentukan gaya khusus untuk satu tabel tertentu, tambahkan atribut id ke tabel.


Contoh

<table id="t01">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Umar</td>
    <td>Jackson</td>
    <td>55</td>
  </tr>
</table>

Sekarang Anda dapat menentukan style khusus untuk tabel ini:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

Dan tambahkan lebih banyak style:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Ringkasan

  • Gunakan elemen <table> HTML untuk mendefinisikan tabel
  • Gunakan elemen <tr> HTML untuk menentukan baris tabel
  • Gunakan elemen <td> HTML untuk menentukan data tabel
  • Gunakan elemen <th> HTML untuk menentukan judul tabel
  • Gunakan elemen <caption> HTML untuk menentukan judul tabel
  • Gunakan properti border CSS untuk menentukan batas
  • Gunakan properti border-collapse CSS untuk menciutkan batas sel
  • Gunakan properti padding CSS untuk menambahkan padding ke sel
  • Gunakan properti text-align CSS untuk meratakan teks sel
  • Gunakan properti border-spacing CSS untuk mengatur jarak antar sel
  • Gunakan atribut colspan untuk membuat sel menjangkau banyak kolom
  • Gunakan atribut rowspan untuk membuat sel menjangkau banyak baris
  • Gunakan atribut id untuk mendefinisikan satu tabel secara unik

Sumber referensi: w3schools

Komentar

Posting Komentar