Table HTML: Fungsi, Cara Membuat Tabel, dan Contohnya

Tabel menjadi bagian tak terpisahkan dalam kehidupan sehari-hari; mulai dari jadwal kereta, laporan keuangan, sampai kalender event, semuanya sering disajikan dalam format tabel.

Namun, bagaimana jika kita ingin mereplikasi penggunaan tabel dalam pengembangan web? Jawabannya ada pada "table HTML".

Di era digital saat ini, menyajikan data secara terstruktur tidak hanya penting, tapi bisa jadi penentu keberhasilan sebuah halaman web. Table HTML memungkinkan kita mengatur dan menampilkan data dalam bentuk tabel pada halaman web.

Artikel ini akan membantu memahami table HTML, fungsi, dan bagaimana kamu bisa menggunakannya untuk menyajikan data.

Apa Fungsi dari Table HTML?

Sebagai salah satu bagian inti dari bahasa untuk membuat web, table HTML berperan penting dalam menyajikan data secara terstruktur.

Fungsi utama table HTML adalah membantu pembuat website menampilkan informasi dalam format grid yang dapat mempermudah audiens memahami dan menginterpretasikan data.

Bagi web developer, table HTML berguna dalam menampilkan informasi secara lebih terstruktur dan jelas. Bukan hanya itu, pemahaman table HTML juga membantu kamu dalam membuat desain responsif agar situs web terlihat kompatibel di semua perangkat, baik desktop, tablet, ataupun smartphone.

Elemen-elemen Utama dalam Table HTML

Ada beberapa elemen utama yang digunakan dalam table HTML untuk menyusun dan memformat tampilan data. Berikut penjelasan tentang elemen-elemen tersebut:

• < table >: digunakan untuk membuat tabel itu sendiri. Semua elemen lain yang membentuk tabel akan diletakkan di dalam tag ini.
• < tr >: berfungsi untuk membuat baris baru dalam tabel. Setiap baris dalam tabel HTML dimulai dengan tag <tr> dan diakhiri dengan tag < /tr >.
• < th >: dipakai untuk membuat sel header dalam tabel. Sel header biasanya digunakan untuk memberikan judul pada kolom atau baris. Elemen < th> secara otomatis akan menebalkan dan meratakan teks ke tengah.
• < td >: digunakan untuk membuat sel data dalam tabel. <td> adalah tempat di mana data aktual disimpan di dalam tabel.
• < caption >: berfungsi memberikan judul atau keterangan untuk tabel.
• < thead >: dimanfaatkan untuk mengelompokkan bagian header dari tabel.
• < tbody >: dipakai untuk mengelompokkan bagian utama atau body dari tabel.
• < tfoot >: digunakan untuk mengelompokkan bagian footer dari tabel. Biasanya digunakan untuk menjumlahkan data atau memberikan catatan kaki.
• < colgroup > dan < col >: kedua elemen ini dipakai untuk mengatur properti kolom, seperti lebar kolom.
• < span >: dipakai untuk menggabungkan beberapa sel menjadi satu sel besar, baik secara horizontal menggunakan atribut colspan atau secara vertikal menggunakan atribut rowspan.

Cara Membuat Tabel di HTML

Dalam pembuatan tabel di HTML, kita akan menggunakan berbagai elemen yang telah disebutkan sebelumnya, seperti < table >, < tr >, < th >, dan < td >.

Selanjutnya, buat elemen < table > untuk memulai tabel kamu. Elemen ini akan menjadi kontainer untuk semua bagian lain dari tabel.

Jika sudah, tambahkan baris ke dalam tabel menggunakan elemen < tr >. Setiap baris ini akan mengandung sel data atau sel header.

Dalam setiap baris, kamu dapat menambahkan sel header menggunakan < th > atau sel data menggunakan < td >.

Dari penjelasan di atas, mari kita coba membuat tabel HTML sederhana yang menunjukkan struktur dasar dari tabel HTML.

Tabel ini akan menampilkan daftar buku dan penulisnya:

Dalam contoh di atas, kita menggunakan elemen < table > untuk membuat tabel dasar.

Elemen < th > berfungsi untuk membuat header tabel, yaitu "Judul Buku" dan "Penulis". Elemen < tr > dipakai membuat baris baru dalam tabel dan setiap baris tersebut berisi dua elemen < td > yang merupakan sel data dalam tabel.

Atribut border dalam elemen < table > digunakan untuk menambahkan border ke tabel.

Berikut tampilan output dari kode HTML tabel di atas:

Pada tabel di atas, "Judul Buku" dan "Penulis" adalah header tabel yang dibuat menggunakan tag < th > dan masing-masing mewakili kolom.

Menggabungkan Sel dan Header pada Table HTML

Menggabungkan sel dan mengatur header pada table HTML merupakan teknik untuk membuat tata letak yang lebih kompleks serta informatif.

Menggabungkan sel

Untuk menggabungkan sel secara horizontal atau vertikal, kita menggunakan atribut colspan dan rowspan. Atribut colspan digunakan saat kamu ingin menggabungkan sel secara horizontal. Sedangkan rowspan untuk menggabungkan sel secara vertikal.

Menggunakan elemen < th >

Elemen < th > berfungsi untuk membuat sel header dalam tabel. Sel header biasanya digunakan untuk memberikan judul di setiap kolom atau baris. Sementara teks dalam sel header secara otomatis akan ditebalkan dan diratakan tengah oleh browser.

Contoh menggunakan penggabungan sel dan header

Pada contoh di atas, kita menggunakan atribut colspan untuk menggabungkan dua kolom di header. Kita juga menggunakan elemen < th > untuk membuat header tabel yang jelas "Nama" dan "Email".

Berikut adalah bagaimana tabel tersebut akan ditampilkan sebagai output:

"Informasi Pribadi" adalah header tabel yang dibuat menggunakan tag < th >. Atribut colspan berfungsi dalam menggabungkan dua kolom menjadi satu.

"Nama" dan "Email" adalah header lain yang dibuat menggunakan tag < th >, menjelaskan apa yang diwakili oleh setiap baris data. "Andi" dan "andi@example.com" adalah sel data yang dibuat dengan tag < td >, berfungsi sebagai nilai dalam tabel.

Mengatur Border dan Style pada Table HTML

Mengatur border dan style pada table HTML merupakan upaya untuk meningkatkan tampilan dan membuatnya lebih menarik. 

Kamu bisa melakukannya menggunakan class dalam CSS (Cascading Style Sheets), yang memungkinkan kamu mengubah berbagai aspek tabel tanpa mengubah semua elemen table.

Misalnya, untuk mengatur border pada tabel HTML, kamu bisa mendefinisikan class .table dalam CSS:

Kemudian, kamu bisa menggunakan berbagai properti CSS lainnya melalui class yang sama:

Berikut contoh penerapan style pada tabel:

Pada kode di atas, kita mengatur border tabel dan sel dengan lebar 2px dan 1px melalui class .table.

Kita juga mengatur padding untuk membuat jarak antara konten dalam sel dan batas sel, serta menggunakan properti text-align di CSS untuk meratakan teks ke kiri.

Dengan mengedit melalui class, kamu dapat menghindari pengaruh perubahan style pada semua elemen table di website.

Berikut output dari kode HTML dan CSS di atas:

Tabel ini memiliki border hitam di sekelilingnya dan di sekeliling setiap sel. Selain itu, setiap sel memiliki padding sebesar 15px yang membuat jarak antara konten dan batas sel. Teks dalam setiap sel diratakan ke kiri.

Mengisi Data ke Dalam Tabel

Untuk mengisi data ke dalam table HTML, kita menggunakan elemen < td > (singkatan dari "data sel). Setiap sel data dalam tabel harus diawali dan diakhiri dengan tag ini.

Sel data akan disusun dalam baris < tr > untuk membentuk struktur tabel yang lengkap.

Misalnya kita membuat dua sel data dengan nilai "Data 1" dan "Data 2".

Selain itu, kita juga bisa menggunakan atribut seperti rowspan dan colspan untuk mengatur tampilan data dalam tabel. Seperti yang dijelaskan sebelumnya, atribut ini memungkinkan kamu menggabungkan sel secara vertikal maupun horizontal untuk menciptakan layout yang lebih kompleks.

Berikut contoh penerapan elemen < td > dan atribut rowspan dan colspan dalam tabel:

Kita membuat tabel yang berisi informasi nama dan e-mail. Kita menggunakan atribut rowspan pada elemen < td > untuk membuat sel "Budi" mencakup dua baris.

Kita juga menggunakan atribut colspan pada elemen < td > untuk membuat sel "End of Data" mencakup dua kolom.

Output:

"Nama" dan "Email" adalah header tabel yang dibuat menggunakan tag <th>.

"Budi", "budi1@example.com", dan "budi2@example.com" adalah sel data yang dibuat menggunakan tag < td >.

Kolom "Budi" mencakup dua baris yang ditandai dengan adanya ruang kosong di bawah "Budi". Cara ini dengan menggunakan atribut rowspan.

Baris "End of Data" mencakup dua kolom yang membentang di sepanjang lebar tabel. Inilah yang dilakukan atribut colspan.

FAQ (Frequently Ask Question)

#1 Apakah table HTML responsif?

Secara default, table HTML tidak responsif. Artinya, tabel ini mungkin tidak tampil dengan baik di layar kecil seperti smartphone.

Namun, kamu bisa membuat table HTML menjadi responsif dengan menggunakan teknik CSS tertentu, seperti menggunakan properti overflow atau media queries.

#2 Apa kegunaan atribut scope dalam tabel HTML?

Atribut scope dalam table HTML digunakan untuk meningkatkan aksesibilitas tabel. Atribut ini menunjukkan apakah suatu sel termasuk header untuk baris (row), kolom (col), atau keduanya (rowgroup atau colgroup).

Scope membantu teknologi seperti screen reader untuk memahami hubungan antara sel header dan sel data.

#3 Bagaimana cara menambahkan gambar ke dalam tabel HTML?

Untuk menambahkan gambar ke dalam table HTML, kamu bisa melakukannya dengan cara yang sama seperti menambahkan teks.

Masukkan tag <img> ke dalam sel tabel (< td > atau < th >). Contoh: < td > < img src ="image.jpg" alt ="My Image" > </td >.

Penutup

Table HTML adalah salah satu elemen dalam web design yang memungkinkan kita mengatur data dalam format terstruktur dan terorganisasi. Dengan presentasi informasi yang jelas dan mudah dipahami, website akan lebih menarik dan mempertahankan perhatian pengunjung.

Tabel memberikan cara yang efisien untuk menyajikan berbagai jenis informasi, mulai dari statistik, daftar harga, jadwal, dan banyak lagi, dalam bentuk yang rapi dan mudah dibaca.