Hypertext Markup Language (HTML) adalah bahasa standar pemrograman yang berfungsi untuk membuat halaman website. Kini, HTML umumnya dibantu dengan Cascading Style Sheets (CSS) serta berbagai bahasa script lain misalnya PHP, JavaScript, atau VBScript.
Sebelum adanya CSS, tabel HTML berfungsi sebagai pengatur tata letak halaman sebuah website. Akan tetapi, kini pengaturan tata letak sudah dipermudah dengan adanya CSS. Tabel HTML kini fungsi utamanya lebih pada tabel biasa pada umumnya. Berikut akan dijelaskan lebih lanjut dan mendalam tentang tabel pada HTML sekaligus cara membuatnya.
Mengenal Tabel HTML
Tabel adalah suatu struktur susunan yang biasanya digunakan untuk mengelompokkan data. Tabel sendiri terdiri dari baris, kolom, dan sel. Dengan adanya tabel, informasi yang akan disampaikan (umumnya berupa data) dapat disajikan dengan lebih detail, ringkas, dan jelas.
Tabel ini juga sering digunakan pada halaman sebuah website. Untuk membuat tabel di HTML, tentu berbeda dengan membuat tabel pada Ms Excel. Namun, bagian-bagian pembentuknya tetap sama. Tabel di HTML terdiri dari:
Baris yang berbentuk horizontal dari kanan ke kiri
Kolom yang berbentuk vertikal dari atas ke bawah
Sel yang merupakan gabungan dari baris dan kolom
Elemen HTML untuk Membuat Tabel
Dibimbing.id - Tag HTML
Sebelum mulai belajar cara membuat tabel pada HTML, Sobat MinDi perlu mempelajari tentang elemen atau tag HTML. Berbagai tag tersebut nantinya akan digunakan dalam membuat tabel di HTML. Terdapat 3 tag utama pada HTML yaitu:
Tag <table> dipakai sebagai tag awal pembuatan tabel
Tag <tr> dipakai saat membuat baris
Tag < td> dipakai saat membuat kolom atau sel
Bermodalkan 3 tag utama HTML di atas, kamu sebenarnya sudah bisa membuat tabel. Hanya saja, ada beberapa tag pendukung terbaru lainnya yang juga bisa dimanfaatkan saat membuat tabel di HTML. Beberapa tag tersebut yaitu:
Tag <th> dipakai saat membuat header pada tabel
Tag <thead> dipakai saat membuat kepala tabel
Tag <tbody> dipakai saat membuat tubuh tabel
Tag <tfoot> dipakai saat membuat bagian footer tabel
Cara Membuat Tabel pada HTML
Untuk membuat tabel di HTML, Sobat MinDi bisa menerapkan berbagai tag yang sebelumnya sudah dijelaskan di atas dengan cara seperti berikut ini.
Buka text editor untuk membuat website
Masukkan tag HTML seperti pada gambar di atas
Simpan filenya dengan nama yang sesuai
Jalankan browser maka hasil yang ditampilkan berupa
Ini adalah Baris 1 kolom 1 Ini adalah baris 1 kolom 2
Ini adalah Baris 2 kolom 1 Ini adalah baris 2 kolom 2
Kamu juga bisa melakukan modifikasi pada tabel di HTML sesuai dengan kebutuhanmu. Berikut ini akan dijelaskan berbagai cara yang berhubungan dengan pembuatan tabel di HTML.
1. Menambah Garis
Saat memasukkan tag sebelumnya, tabel yang muncul belum memiliki garis. Umumnya, tabel menggunakan garis sehingga data menjadi lebih terstruktur dan mudah dipahami. Untuk menambahkan garis caranya cukup mudah. Tambahkan atribut border pada tag <table>. Kamu juga perlu mengatur tebal garisnya dengan angka. Semakin besar angkanya semakin tebal pula garisnya. Misalnya, garis akan dibuat dengan tebal menggunakan angka 2 maka dituliskan:
<table border=”2”>
2. Memberi Warna
Tabel warna warni tentu akan membuat tampilan menjadi lebih menarik. Untuk memberi warna pada tabel di HTML juga mudah. Kamu hanya perlu menambahkan atribut bgcolor pada tag baris <tr> dan tag kolom/sel <td>. Terapkan pada tabel yang sudah dibuat sebelumnya dengan berbagai tag seperti gambar di bawah ini.
3. Mengatur Jarak Teks dengan Garis Sel
Padding Cells merupakan jarak teks dengan garis sel. Padding cells ini bisa diatur sesuai kebutuhanmu saat membuat tabel. Caranya yaitu dengan menambahkan atribut cellpadding dan tambahkan angka sebagai pengaturannya. Misalnya, padding akan dibuat dengan nilai 20 maka tuliskan:
<table border=”2” cellpadding “20”>
4. Mengatur Posisi Tabel di Tengah
Jika kamu ingin mengatur posisi table agar berada di tengah, tambahkan atribut center pada tag <tabel>. Tuliskan:
<table border=”2” cellpadding “20” align+”center”>
5. Menambah Gambar
Kamu juga bisa menambahkan gambar yang diinginkan pada tabel yang sedang dibuat. Caranya dengan menambahkan tag <img> kemudian lengkapi dengan atribut scr dan atribut width. Src berarti sumber gambar dan width mengatur kelebaran gambar. Untuk mencoba menerapkan bisa mengikuti contoh di bawah ini.
Cukup mudah, kan, membuat tabel dengan HTML? Semakin sering berlatih, tentu skill kamu juga akan semakin meningkat. Kalau masih bingung, sebaiknya kamu ikuti kelas video online di bimbing.id seputar HTML. Di kelas tersebut, Sobat MinDi akan dipandu membuat website dengan kerangka HTML bersama mentor berpengalaman.
Selain itu, Bootcamp Web Development dibimbing.id juga tidak boleh dilewatkan. Kamu bisa belajar tentang seluk beluk web development secara lebih dalam dan intensif melalui bootcamp tersebut. Yuk, segera daftarkan dirimu agar tidak kehabisan kuota!
Tags
Suci Wulandari
Kolektor kartu pos, mantan pustakawan, dan penulis yang bisa menulis apa saja kecuali skenario kehidupannya sendiri.