HTML Dasar #12 : Membuat Tabel Sederhana

Hai teman-teman, apa kabar? Semoga sehat dan bahagia selalu ya. Kali ini kita akan belajar bersama tentang cara membuat tabel sederhana dengan HTML. Tabel adalah salah satu elemen yang sering digunakan di web untuk menampilkan data yang terstruktur dan rapi. Misalnya, kita bisa membuat tabel untuk menampilkan daftar harga produk, jadwal pelajaran, atau data statistik.

Gambar 12.1 : Ilustrasi Membuat Tabel Sederhana dengan HTML

Daftar Isi

Tabel terdiri dari beberapa bagian, yaitu:

• Baris: kumpulan sel yang berada di satu garis horizontal
• Kolom: kumpulan sel yang berada di satu garis vertikal
• Sel: kotak kecil yang berisi data atau informasi
• Header: bagian atas tabel yang biasanya berisi judul atau keterangan kolom
• Body: bagian utama tabel yang berisi data atau informasi
• Footer: bagian bawah tabel yang biasanya berisi ringkasan atau catatan

Untuk membuat tabel dengan HTML, kita perlu menggunakan beberapa tag atau elemen HTML yang sudah disediakan. Tag-tag tersebut adalah:

• <table>: tag untuk mendeklarasikan tabel
• <tr>: tag untuk membuat baris (table row)
• <td>: tag untuk membuat sel (table data)
• <th>: tag untuk membuat header (table head)
• <thead>: tag untuk membungkus bagian header
• <tbody>: tag untuk membungkus bagian body
• <tfoot>: tag untuk membungkus bagian footer

Tag-tag yang paling penting untuk diingat adalah <table>, <tr>, dan <td>. Sementara tag-tag yang lain adalah opsional, boleh digunakan boleh tidak. Mari kita lihat contoh kode HTML untuk membuat tabel sederhana berikut:

<table>
  <tr>
    <td>Nama</td>
    <td>Umur</td>
    <td>Hobi</td>
  </tr>
  <tr>
    <td>Sopo</td>
    <td>21</td>
    <td>Ngoding</td>
  </tr>
  <tr>
    <td>Jarwo</td>
    <td>18</td>
    <td>Menulis</td>
  </tr>
  <tr>
    <td>Mustofa</td>
    <td>19</td>
    <td>Melukis</td>
  </tr>
</table>

Kode di atas akan menghasilkan tampilan tabel seperti ini:

Nama	Umur	Hobi
Sopo	21	Ngoding
Jarwo	18	Menulis
Mustofa	19	Melukis

Menambahkan Atribut pada Tabel

Kita bisa menambahkan beberapa atribut pada tag <table> untuk mengatur tampilan dan ukuran tabel. Beberapa atribut yang sering digunakan adalah:

• border: atribut untuk memberikan garis pada tabel. Nilai atribut ini adalah ukuran garis dalam satuan piksel. Contoh: border="1"
• cellpadding: atribut untuk mengatur jarak antara teks dengan garis di dalam sel. Nilai atribut ini adalah ukuran jarak dalam satuan piksel. Contoh: cellpadding="10"
• cellspacing: atribut untuk mengatur jarak antara sel dengan sel lainnya. Nilai atribut ini adalah ukuran jarak dalam satuan piksel. Contoh: cellspacing="5"
• width: atribut untuk mengatur lebar tabel. Nilai atribut ini bisa dalam satuan piksel atau persen. Contoh: width="500" atau width="50%"
• height: atribut untuk mengatur tinggi tabel. Nilai atribut ini bisa dalam satuan piksel atau persen. Contoh: height="300" atau height="30%"
• align: atribut untuk mengatur posisi tabel secara horizontal. Nilai atribut ini bisa left, center, atau right. Contoh: align="center"
• bgcolor: atribut untuk memberikan warna latar belakang pada tabel. Nilai atribut ini bisa kode warna dalam heksadesimal atau nama warna dalam bahasa Inggris. Contoh: bgcolor="#F8F8F8" atau bgcolor="red"

Mari kita lihat contoh kode HTML untuk membuat tabel dengan beberapa atribut berikut:

<table border="1" cellpadding="10" cellspacing="5" width="50%" align="center" bgcolor="#F8F8F8">
  <tr>
    <td>Nama</td>
    <td>Umur</td>
    <td>Hobi</td>
  </tr>
  <tr>
    <td>Sopo</td>
    <td>21</td>
    <td>Ngoding</td>
  </tr>
  <tr>
    <td>Jarwo</td>
    <td>18</td>
    <td>Menulis</td>
  </tr>
  <tr>
    <td>Mustofa</td>
    <td>19</td>
    <td>Melukis</td>
  </tr>
</table>

Kode di atas akan menghasilkan tampilan tabel seperti ini:

Nama	Umur	Hobi
Sopo	21	Ngoding
Jarwo	18	Menulis
Mustofa	19	Melukis

Menggabungkan Sel pada Tabel

Kita bisa menggabungkan beberapa sel pada tabel untuk membuat tampilan yang lebih variatif. Ada dua atribut yang bisa kita gunakan untuk menggabungkan sel, yaitu:

• rowspan: atribut untuk menggabungkan sel secara vertikal (menurun). Nilai atribut ini adalah jumlah baris yang digabungkan. Contoh: rowspan="2"
• colspan: atribut untuk menggabungkan sel secara horizontal (menyamping). Nilai atribut ini adalah jumlah kolom yang digabungkan. Contoh: colspan="3"

Atribut-atribut ini bisa kita berikan pada tag <td> atau <th>. Mari kita lihat contoh kode HTML untuk membuat tabel dengan sel yang digabungkan berikut:

<table border="1">
  <tr>
    <th rowspan="2">Bulan</th>
    <th colspan="2">Hasil Panen</th>
  </tr>
  <tr>
    <th>Padi</th>
    <th>Kacang</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>500 Kg</td>
    <td>231 Kg</td>
  </tr>

Kode di atas akan menghasilkan tampilan tabel seperti ini:

Bulan	Hasil Panen
	Padi	Kacang
Januari	500 Kg	231 Kg

Menambahkan Header, Body, dan Footer pada Tabel

Kita bisa menambahkan tag <thead>, <tbody>, dan <tfoot> untuk membungkus bagian header, body, dan footer pada tabel. Tag-tag ini berguna untuk memberi struktur dan semantik pada tabel. Selain itu, tag-tag ini juga memudahkan kita untuk mengatur gaya tampilan dengan CSS.

Tag <thead> digunakan untuk membungkus bagian header atau judul tabel. Biasanya bagian ini berisi keterangan kolom atau kategori data. Tag <tbody> digunakan untuk membungkus bagian body atau isi tabel. Biasanya bagian ini berisi data atau informasi utama. Tag <tfoot> digunakan untuk membungkus bagian footer atau kaki tabel. Biasanya bagian ini berisi ringkasan atau catatan dari data.

Mari kita lihat contoh kode HTML untuk membuat tabel dengan tag-tag tersebut berikut:

<table border="1">
  <thead>
    <tr>
      <th>Bulan</th>
      <th>Hasil Panen</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>500 Kg</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>342 Kg</td>
    </tr>
    <tr>
      <td>Maret</td>
      <td>432 Kg</td>
    </tr>
    <tr>
      <td>April</td>
      <td>453 Kg</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>1727 Kg</td>
    </tr>
  </tfoot>
</table>

Kode di atas akan menghasilkan tampilan tabel seperti ini:

Bulan	Hasil Panen
Januari	500 Kg
Februari	342 Kg
Maret	432 Kg
April	453 Kg
Total	1727 Kg

Kesimpulan

Demikianlah cara membuat tabel sederhana dengan HTML. Tabel adalah elemen yang berguna untuk menampilkan data yang terstruktur dan rapi. Kita bisa menggunakan beberapa tag atau elemen HTML untuk membuat tabel, seperti <table>, <tr>, <td>, <th>, <thead>, <tbody>, dan <tfoot>. Kita juga bisa menambahkan beberapa atribut pada tag <table> untuk mengatur tampilan dan ukuran tabel, seperti border, cellpadding, cellspacing, width, height, align, dan bgcolor. Kita juga bisa menggabungkan beberapa sel pada tabel dengan menggunakan atribut rowspan dan colspan pada tag <td> atau <th>.

Semoga artikel ini bermanfaat dan membantu teman-teman dalam belajar HTML dasar. Jangan lupa untuk berlatih dan bereksperimen dengan kode-kode yang sudah kita pelajari. Selamat belajar dan sampai jumpa di artikel selanjutnya.

HTML Dasar