Bikin Macam-Macam Tabel di HTML

Pendahuluan

Tabel adalah struktur yang digunakan untuk menyajikan data dalam baris dan kolom. Bagaimana cara membuatnya di HTML untuk ditampilkan pada halaman web?

Mari kita bahas:
☐ Tag-tag elemen untuk membuat tabel di HTML
☐ Struktur dasar tabel HTML
☐ Menambahkan border untuk tabel
☐ Mempercantik tabel dengan CSS
☐ Menambah ukuran kolom dan baris
☐ Merge kolom pakai colspan dan merge baris pakai rowspan

1. Tag-Tag HTML untuk Membuat Tabel

Di HTML, kita bisa membuat tabel menggunakan tag <table>, yang terdiri dari beberapa bagian penting, yaitu:

1. <thead> - untuk bagian header tabel (biasanya untuk judul kolom)
2. <tbody> - untuk bagian body tabel (data).
3. <tfoot> - untuk bagian footer tabel (biasanya untuk ringkasan - misalnya total harga, rata-rata, dll).

Di dalam header, body, maupun footer dapat diisi dengan baris dan kolom.

1. Untuk membuat baris, gunakan <tr>.
2. Di dalam <tr> kita dapat memasukkan kolom. Ada 2 jenis kolom:
   1. <th> digunakan untuk membuat kolom judul (tebal dan rata tengah), biasanya digunakan di dalam <thead>.
   2. <td> digunakan untuk data biasa di dalam tabel.

2. Struktur Dasar Tabel HTML

Mari kita lihat dulu struktur dasar tabel HTML:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
      <th>Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gavi</td>
      <td>30</td>
      <td>Tuban</td>
    </tr>
    <tr>
      <td>Royyan</td>
      <td>30</td>
      <td>Sintang</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total Data: 2</td>
    </tr>
  </tfoot>
</table>

Bila divisualisasikan, struktur HTML di atas dapat digambarkan seperti berikut:

3. Menambahkan Border untuk Tabel

Secara default, tabel HTML tidak memiliki border. Kamu bisa menambahkan border dengan menggunakan atribut border:

<table border="1">
  <!-- Isi tabel -->
</table>

Atau, kalau mau lebih leluasa, bisa menggunakan CSS:

<table style="border: 1px solid black;">
  <!-- Isi tabel -->
</table>

Catatan:

• Atribut border memberi border sederhana di sekitar tabel, tapi lebih baik menggunakan CSS karena lebih fleksibel dan terstruktur.

4. Styling Tabel dengan CSS

CSS memungkinkan kita untuk menambahkan style ke tabel agar tampilannya lebih menarik dan rapi. Di bawah ini dicontohkan menggunakan inline CSS untuk melakukan styling. Kamu bisa gunakan cara lain yang lebih cocok sesuai proyek untuk menambahkan CSS. Lihat: Pakai Inline, Internal, atau External CSS.

Menambahkan Padding dan Warna Latar:

<table style="border: 1px solid black; border-collapse: collapse;">
  <thead>
    <tr>
      <th style="padding: 10px; background-color: #f4f4f4;">Nama</th>
      <th style="padding: 10px; background-color: #f4f4f4;">Umur</th>
      <th style="padding: 10px; background-color: #f4f4f4;">Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 10px;">Gavi</td>
      <td style="padding: 10px;">30</td>
      <td style="padding: 10px;">Tuban</td>
    </tr>
    <tr>
      <td style="padding: 10px;">Royyan</td>
      <td style="padding: 10px;">30</td>
      <td style="padding: 10px;">Sintang</td>
    </tr>
  </tbody>
</table>

Catatan:

• padding: 10px; memberikan jarak antara konten dan tepi sel tabel.
• background-color: #f4f4f4; memberi latar belakang yang lembut untuk header tabel.

5. Menambah Lebar Kolom dan Baris

Sering kali kita ingin mengatur lebar kolom agar sesuai dengan konten, atau mengubah tinggi baris agar tampak lebih rapi. Kita bisa mengatur ini dengan CSS.

Contoh Pengaturan Lebar Kolom:

<table style="width: 100%;">
  <thead>
    <tr>
      <th style="width: 30%;">Nama</th>
      <th style="width: 30%;">Umur</th>
      <th style="width: 40%;">Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gavi</td>
      <td>30</td>
      <td>Tuban</td>
    </tr>
    <tr>
      <td>Royyan</td>
      <td>30</td>
      <td>Sintang</td>
    </tr>
  </tbody>
</table>

Catatan:

• width: 30%; mengatur lebar kolom berdasarkan persentase.

6. Menggunakan colspan dan rowspan untuk merge beberapa cell

Kadang kita perlu menggabungkan beberapa kolom atau baris. Itu bisa dilakukan dengan atribut colspan (untuk kolom) dan rowspan (untuk baris).

Contoh Penggunaan colspan:

<table>
  <thead>
    <tr>
      <th colspan="3">Data Pengguna</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Royyan</td>
      <td>30</td>
      <td>Sintang</td>
    </tr>
    <tr>
      <td colspan="3">Deskripsi lebih lanjut tentang Royyan.</td>
    </tr>
  </tbody>
</table>

Catatan:

• colspan="3" berarti sel tersebut akan mengambil lebar tiga kolom di-merge menjadi satu.

Contoh Penggunaan rowspan:

<table>
	<tr>
		<th>Nama</th>
		<th>Hari</th>
		<th>Jam</th>
	</tr>
	<tr>
		<td rowspan="2">Gavi</td>
		<td>Senin</td>
		<td>08:00 - 10:00</td>
	</tr>
	<tr>
		<td>Selasa</td>
		<td>10:00 - 12:00</td>
	</tr>
	<tr>
		<td rowspan="3">Royyan</td>
		<td>Rabu</td>
		<td>09:00 - 11:00</td>
	</tr>
	<tr>
		<td>Kamis</td>
		<td>11:00 - 13:00</td>
	</tr>
	<tr>
		<td>Jumat</td>
		<td>13:00 - 15:00</td>
	</tr>
</table>

Catatan:

• rowspan="2" berarti sel tersebut akan mengambil lebar dua baris di-merge menjadi satu.
• rowspan="3" berarti sel tersebut akan mengambil lebar tiga baris di-merge menjadi satu.

Penutup

Catatan ini menyajikan beberapa contoh snippet bagaimana membuat beberapa variasi model tabel di HTML. Nyamankan dirimu menggunakan tag-tag tersebut, dan silahkan bereksperimen!