Belajar Tabel HTML Dasar: table, tr, td, th

Kalau ada satu materi HTML yang hampir selalu ditemui pemula setelah belajar paragraf, heading, dan link, jawabannya adalah tabel. Dulu saya juga begitu. Setelah berhasil membuat tulisan "Hello World" muncul di browser, rasanya seperti sudah menjadi programmer profesional. Lalu saya menemukan materi tabel HTML dan sadar perjalanan masih panjang.

Yang menarik, banyak orang menganggap tabel HTML itu rumit karena melihat kode yang berlapis-lapis. Ada <table>, <tr>, <td>, dan <th>. Sekilas memang terlihat seperti kumpulan huruf yang sengaja dibuat agar pemula bingung. Padahal kalau sudah memahami fungsi masing-masing tag, semuanya terasa cukup masuk akal.

Kalau saat ini Anda sedang mencari materi belajar tabel HTML dasar, tenang saja. Artikel ini dibuat khusus untuk pemula yang ingin memahami fungsi table, tr, td, dan th tanpa penjelasan yang terlalu teknis. Anggap saja kita sedang ngobrol santai sambil membedah satu per satu bagian penting dari tabel HTML.

Kenapa Tabel HTML Masih Penting?

Di era sekarang, banyak tampilan website memang dibuat menggunakan CSS Grid atau Flexbox. Namun tabel tetap punya tempat tersendiri.

Biasanya tabel digunakan untuk menampilkan data yang memang berbentuk baris dan kolom, misalnya:

• Daftar siswa
• Data penjualan
• Jadwal pelajaran
• Laporan keuangan
• Daftar produk

Bayangkan kalau data seperti itu ditampilkan dalam paragraf biasa. Pembacanya mungkin bisa memahami, tetapi perlu usaha lebih. Tabel membantu informasi terlihat lebih rapi dan mudah dibaca dalam sekali pandang.

Mengenal Tag <table>

Tag pertama yang wajib dikenal tentu saja adalah <table>.

Tag ini merupakan wadah utama dari seluruh tabel. Semua bagian tabel nantinya berada di dalam tag ini.

Contoh paling sederhana:

<table>
</table>

Memang belum menghasilkan apa-apa karena tabelnya masih kosong. Tetapi setidaknya kita sudah punya "tanah kosong" untuk membangun rumah.

Saya sering mengibaratkan tag table sebagai pagar yang mengelilingi seluruh area tabel. Semua elemen lain nantinya berada di dalamnya.

Mengenal Tag <tr>

Setelah memiliki table, kita membutuhkan baris.

Di sinilah fungsi tag <tr>.

TR merupakan singkatan dari Table Row, atau baris tabel.

Contohnya:

<table>

<tr>
</tr>

</table>

Kalau tabel diibaratkan buku tulis, maka <tr> adalah garis-garis horizontal tempat kita menulis.

Satu tag tr berarti satu baris.

Dua tag tr berarti dua baris.

Sederhana sekali.

Mengenal Tag <td>

Nah, setelah memiliki baris, kita perlu mengisi data di dalamnya.

Untuk itulah digunakan tag <td>.

TD merupakan singkatan dari Table Data.

Contoh:

<table>

<tr>
<td>Adi</td>
<td>Semarang</td>
</tr>

</table>

Hasilnya akan menghasilkan satu baris dengan dua kolom.

Di sinilah biasanya data utama tabel ditempatkan.

Nama, alamat, nilai, harga, jumlah stok, dan informasi lainnya hampir selalu berada di dalam tag td.

Kalau saya boleh bercanda sedikit, td ini seperti kursi dalam ruang kelas. Barisnya sudah ada, sekarang tinggal mengisi siapa yang duduk di sana.

Mengenal Tag <th>

Banyak pemula sering bertanya:

"Kalau sudah ada td, kenapa masih ada th?"

Pertanyaan yang bagus.

Tag <th> digunakan untuk membuat judul kolom atau header tabel.

Contohnya:

<table>

<tr>
<th>Nama</th>
<th>Kota</th>
</tr>

</table>

Secara tampilan, browser biasanya akan membuat teks th menjadi tebal dan berada di tengah.

Tujuannya supaya pembaca langsung tahu bahwa bagian tersebut adalah judul kolom.

Saya pribadi hampir selalu menggunakan th untuk header karena membuat tabel lebih mudah dipahami. Pembaca tidak perlu menebak-nebak arti data yang ada di bawahnya.

Contoh Tabel HTML Dasar Lengkap

Setelah memahami fungsi masing-masing tag, mari kita gabungkan semuanya.

<table border="1">

<tr>
<th>Nama</th>
<th>Kota</th>
<th>Umur</th>
</tr>

<tr>
<td>Adi</td>
<td>Semarang</td>
<td>29</td>
</tr>

<tr>
<td>Budi</td>
<td>Solo</td>
<td>27</td>
</tr>

</table>

Kalau dijalankan di browser, hasilnya akan menjadi tabel sederhana dengan tiga kolom dan dua baris data.

Saat pertama kali berhasil membuat tabel seperti ini dulu, saya merasa cukup bangga. Meski tampilannya sederhana, ada rasa puas ketika melihat data tersusun rapi dibanding hanya berjejer dalam paragraf biasa.

Memahami Hubungan table, tr, td, dan th

Supaya lebih mudah diingat, saya biasanya menggunakan gambaran seperti ini:

• <table> = bangunan tabel
• <tr> = baris
• <th> = judul kolom
• <td> = isi data

Kalau salah satu bagian hilang, tabel tetap bisa dibuat, tetapi hasilnya biasanya kurang lengkap atau kurang nyaman dibaca.

Cara ini cukup membantu saya saat masih sering lupa fungsi masing-masing tag.

Kesalahan yang Sering Dilakukan Pemula

Ada beberapa kesalahan yang cukup sering muncul saat belajar tabel HTML.

Menaruh td Langsung di Dalam Table

Contoh yang salah:

<table>
<td>Data</td>
</table>

Tag td harus berada di dalam tr terlebih dahulu.

Menggunakan td untuk Header

Banyak pemula menulis seperti ini:

<td>Nama</td>
<td>Kota</td>

Padahal bagian header lebih cocok menggunakan th.

Memang tampilannya masih bisa muncul, tetapi struktur tabel menjadi kurang jelas.

Lupa Menutup Tag

Ini penyakit yang pernah saya alami berkali-kali.

Kadang terlalu semangat mengetik sampai lupa menutup tag.

Akibatnya tampilan tabel bisa berantakan dan membuat kita sibuk mencari kesalahan selama beberapa menit hanya karena satu karakter yang hilang.

Kapan Sebaiknya Menggunakan Tabel?

Meskipun tabel sangat berguna, tidak semua data harus dibuat dalam bentuk tabel.

Gunakan tabel jika memang ingin menampilkan informasi yang memiliki hubungan antar baris dan kolom.

Misalnya:

• Data siswa
• Daftar harga
• Jadwal kegiatan
• Laporan transaksi

Kalau hanya ingin membuat tata letak halaman website, lebih baik menggunakan CSS Grid atau Flexbox.

Karena jujur saja, membuat layout website menggunakan tabel di tahun sekarang rasanya seperti pergi ke minimarket naik kereta kuda. Masih bisa, tetapi bukan pilihan yang paling praktis.

Penutup

Belajar tabel HTML dasar sebenarnya tidak sesulit yang terlihat di awal. Setelah memahami fungsi tag table, tr, td, dan th, Anda sudah memiliki fondasi yang cukup kuat untuk membuat berbagai jenis tabel sederhana.

Hal penting yang bisa Anda ingat:

• <table> digunakan sebagai wadah utama tabel.
• <tr> digunakan untuk membuat baris.
• <td> digunakan untuk mengisi data.
• <th> digunakan untuk membuat header atau judul kolom.
• Struktur yang benar membuat tabel lebih mudah dibaca dan dikelola.

Saya sendiri dulu sempat menganggap materi tabel HTML cukup membingungkan karena banyaknya tag yang terlihat mirip. Setelah memahami peran masing-masing, ternyata semuanya justru terasa logis. Bahkan sampai sekarang tag table, tr, td, dan th masih menjadi bagian yang sering digunakan saat membuat halaman yang berisi data.

Terima kasih sudah berkunjung ke Blog Adi Prayitno dan membaca artikel Belajar Tabel HTML Dasar: table, tr, td, th. Semoga setelah membaca artikel ini, Anda tidak lagi bingung membedakan fungsi setiap tag tabel dan bisa mulai membuat tabel HTML sendiri dengan lebih percaya diri.

Topik yang dibahas dalam artikel ini:

Belajar tabel HTML dasar, tabel HTML dasar, tag table tr td th, cara membuat tabel HTML, fungsi table, fungsi tr, fungsi td, fungsi th, tutorial tabel HTML, struktur tabel HTML. 

Berbagi :