Published · Minggu, 27 April 2025

Membuat Tabel

Pengenalan tentang Tabel di HTML

Tabel adalah elemen HTML yang digunakan untuk menyajikan data dalam format kolom dan baris. Tabel sangat berguna ketika kita perlu menampilkan informasi yang terstruktur, seperti statistik, jadwal, atau data dalam bentuk yang mudah dibaca. Misalnya, tabel digunakan untuk menampilkan harga barang, hasil perhitungan, atau daftar jadwal acara.

Di HTML, membuat tabel memerlukan beberapa tag dasar yang menyusun struktur tabel tersebut. Meskipun tabel dapat menjadi elemen yang kompleks, kita akan memulai dengan memahami struktur dasar tabel di HTML terlebih dahulu.

Struktur Dasar Tabel di HTML

Tabel di HTML dibuat dengan menggunakan beberapa tag yang saling berhubungan. Berikut adalah tag-tag dasar yang digunakan dalam membuat tabel:

<table>: Tag utama untuk membuat tabel.
<tr> (table row): Tag untuk mendefinisikan baris dalam tabel.
<td> (table data): Tag untuk mendefinisikan data dalam sel tabel.
<th> (table header): Tag untuk mendefinisikan sel header (biasanya digunakan untuk memberi label kolom).

Contoh tabel dasar:

<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>30</td>
    <td>Bandung</td>
  </tr>
</table>

Output di browser:

Nama	Usia	Kota
Andi	25	Jakarta
Budi	30	Bandung

Penjelasan:

<table> membungkus seluruh tabel.
<tr> mendefinisikan setiap baris dalam tabel.
<th> digunakan untuk membuat sel header tabel, yang biasanya menampilkan informasi seperti nama kolom.
<td> digunakan untuk data di dalam tabel yang berada pada baris dan kolom tertentu.

Atribut Tabel Dasar: border, cellspacing, dan cellpadding

border: Atribut ini digunakan untuk memberi batas pada tabel. Jika kamu ingin menampilkan garis batas pada tabel, tambahkan atribut border ke tag <table>. Nilai dari atribut ini biasanya berupa angka yang menunjukkan ketebalan garis batas dalam piksel.
Contoh:
```
<table border="1">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
</table>
```

cellspacing: Atribut ini menentukan jarak antara sel dalam tabel. Biasanya digunakan untuk memberi ruang antar sel.

Contoh:

<table border="1" cellspacing="10">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
</table>

cellpadding: Atribut ini menentukan jarak antara konten sel dengan batas sel. Ini digunakan untuk memberi ruang di dalam sel.

Contoh:

<table border="1" cellpadding="10">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
</table>

Menyambung ke Elemen HTML Selanjutnya: Membuat Formulir

Setelah mempelajari cara membuat dan menata tabel, langkah berikutnya adalah memahami cara membuat formulir di HTML. Formulir memungkinkan pengguna untuk memasukkan data, seperti mengisi informasi kontak atau melakukan pemesanan. Pada artikel berikutnya, kita akan membahas cara membuat form menggunakan berbagai elemen seperti input, textarea, dan button, serta cara mengatur formulir untuk mengirimkan data ke server.