Palingit.com – Ketika kamu membuat suatu website, kadang kamu memerlukan kolom untuk kebutuhan tertentu, misalnya data siswa, atau yang lainnya. Namun bagi kamu yang masih tahap pemula dalam dunia pemrograman, cara membuat tabel di HTML mungkin masih agak membingungkan.
Maklum saja, karena dalam bahasa pemrograman, semuanya berdasarkan kode, sehingga tak sembarangan orang bisa membuatnya. Seseorang harus menghafal atau mengetahui kode tertentu sesuai kebutuhan pembuatan projek.
Nah, sebelum membahas lebih jauh mengenai cara membuat tabel dengan bahasa HTML yuk, berkenalan dulu dengan html.
Table of Contents
Pengertian HTML
Dari segi bahasa, HTML memiliki kepanjangan Hypertext Markup Language. Secara sederhana, html adalah salah satu bahasa pemrograman yang berfungsi untuk membuat suatu website, di mana nantinya halaman website tersebut dapat diakses melalui mesin pencarian atau browser.
Sebagaimana pengertiannya bahwa HTML adalah singkatan dari Hypertext Markup Language, masing-masing kata tersebut memiliki arti yang saling melengkapi.
Hypertext adalah metode yang difungsikan untuk pergi dari halaman web ke halaman web lainnya dengan cara mengeklik simbol atau tulisan yang tersedia. Lalu markup adalah suatu kinerja dari tag html terhadap teks yang berada di dalam tag-nya.
Sedangkan kata yang terakhir adalah language yang berarti bahasa pemrograman yang berupa tak-tak tertentu, kemudian diterjemahkan ke dalam teks atau visual yang dapat Anda dilihat dalam halaman web.
Mengenal Komponen HTML
Agar kamu tidak bingung dalam mengikuti langkah-langkah membuat tabel di dalam HTML, kamu harus kenal terlebih dahulu dengan komponen yang ada pada HTML. Ada tiga komponen dalam HTML, yaitu Tak, Elemen, dan Atribut.
1. Tag
Tag adalah tanda awal dan akhir dari perintah HTML yang akan dideteksi oleh web browser. Tag dalam HTML menggunakan kurung kaku, yang mana di dalam kurung tersebut adalah nama tagnya.
Misalkan tag bold <b>, di mana tag ini akan memerintahkan browser untuk menampilkan teks yang tebal.
2. Elemen
Elemen adalah komponen dari HTML yang semua kode tag pembuka hingga tag penutup. Ini sebabnya, elemen berisikan teks dan simbol yang terdiri tag pembuka, konten, dan tag penutup.
Contoh simpel dari elemen adalah: <bold>Belajar Tabel HTML</bold>.
3. Atribut
Atribut adalah informasi tambahan yang berada pada elemen. Fungsi dari atribut ini adalah memberikan ketegasan instruksi tag pada elemen. Misalkan atribut berikut:
<img src=”gambar.png”alt”Mobil Sport”>.
tag <img> mempunyai atribut sendiri, yakni (src) dan (alt) yang berarti browser harus menampilkan gambar.png dengan alt text “Mobil Sport”. Atribut sendiri ada yang hanya dapat digunakan pada tag-tag tertentu saja, namanya adalah atribut khusus, yaitu:
Atribut (src) hanya dapat digunakan pada tag <img>, <embed>, <audio>, dan <iframe>.
Atribut (href) hanya dapat digunakan di tag <a> dan <link>.
Atribut (action) hanya dapat digunakan pada tag <form>.
Atribut (autoplay) hanya dapat digunakan di tag <audio> dan <video>.
Cara Membuat Tabel di Html
Setelah kamu cukup berkenalan, saatnya untuk membuat tabel yang kamu butuhkan menggunakan HTML
1. Membuat Tag
Dalam pembuatan tabel melalui HTML, setidaknya ada 4 tag yang harus kamu buat. Tag-tag tersebut adalah tak <table>, tak <thead>, tag <tbody>, dan tak <tfoot>, yang mana masing-masing memiliki perannya sendiri-sendiri.
Tag <table> berperan sebagai kontainer
tag <thead> berfungsi sebagai tempat untuk meletakkan judul atau nama kolom yang berada di baris pertama/paling atas.
tag <tbody> berfungsi untuk area menampilkan data
Sedangkan tag <tfoot> berfungsi untuk membuat bagian terakhir atau yang paling bawah dari tabel, biasa juga disebut dengan “footer”.
Keempat tak tersebut merupakan kerangka dasar untuk membuat suatu tabel. Adapun untuk membuat baris dan kolom, kamu memerlukan 3 tag, yaitu tag <tr>, tag <td>, dan tag <th>.
tag <tr> berfungsi untuk membuat baris (tabel row). Adapun tag <td> berperan sebagai tempat membuat sel (table data). Sedangkan tag <th> berfungsi untuk membuat judul dalam header (table head).
Langsung saja kita aplikasikan sebagai berikut:
Maka tampilan di halaman webnya akan seperti ini:
Dalam tahap ini memang belum ada garisnya, karena belum ditambahkan atribut border di tabelnya. Untuk itu, berikan atribut border=”1” di dalam tag <table>. Seperti ini:
Maka akan muncul garis sebagai berikut:
2. Mengatur Jarak Sell dengan Atribut Cellpadding
Atribut cellpadding merupakan atribut yang digunakan untuk mengatur jarak antara teks dengan garis dalam sel. Masukkan atribut cellpadding ke dalam tag <table> setelah atribut border seperti berikut ini:
Angka 10 setelah cellpadding adalah ukuran jarak teks dan garis. Sehingga akan menghasilkan jarak seperti ini:
3. Memberikan Warna pada Sel dan Baris
Tabel tak akan menarik jika tak ada warna di setiap sel dan barisnya. Oleh karena itu untuk menambahkan warna berikan atribut bgcolor pada tag <td> atau tag <tr>. Lihat gambar berikut ini:
Untuk mengisi warna pada atribut bgcolor, kamu bisa isi dengan nama warna dalam bahasa Inggris atau kode warna tertentu yang bisa kamu cari di Google. Jika nilai atribut bgcolor kamu isikan seperti di atas, maka akan menghasilkan warna sebagai berikut:
4. Cara Menggabungkan Sel Tabel
Ada dua atribut yang digunakan untuk menggabungkan sel tabel, yaitu atribut rowspan dan atribut colspan. Adapun atribut rowspan berguna untuk menggabungkan baris, sedangkan atribut colspan berfungsi untuk menggabungkan kolom.
Dua atribut tersebut dapat kamu masukkan di tag <td> dan <th> seperti berikut ini:
Sehingga akan menghasilkan tabel sebagai berikut:
5. Menambahkan Elemen Lain dalam Sel
Dalam tabel tertentu ada yang membutuhkan berbagai visual dalam selnya. Jika itu termasuk dalam kebutuhanmu juga, kamu dapat menambahkan elemen html berupa gambar, video, atau link di dalam sel <td> atau <th>. Misalnya seperti gambar di bawah.
Maka, kamu akan menghasilkan tabel yang memiliki elemen gambar sebagai berikut:
Fungsi HTML
Sebenarnya banyak sekali fungsi dari bahasa pemrograman HTML. Akan tetapi berikut ini fungsi-fungsi utama dari HTML:
Membuat halaman web jadi lebih mudah dipahami dan dibaca oleh pengguna.
Menampilkan semua informasi pada suatu browser
Memberikan tanda teks di sebuah halaman, dalam halaman dokumen HTML disisipi dengan tag atau kode tertentu dengan fungsinya masing-masing. Misalnya tag <b> </b> yang membuat teks di dalamnya menjadi tebal. tag <i> </i> membuat teks di dalamnya menjadi miring. Dan masih banyak lagi.
Untuk dasar dalam pembuatan website, pastinya semua website didesain dengan memiliki banyak fitur, yang mana fitur-fitur tersebut dibuat menggunakan bahasa pemrograman Javascript, CSS, PHP. Akan tetapi semua bahasa tersebut hanya bisa diterapkan jika website tersebut didasari dengan bahasa pemrograman HTML.
Memunculkan visual gambar, video dan masih banyak lagi di halaman website.
Dengan kode HTML tertentu, ini berguna untuk membuat link yang menuju menu web lainnya atau menuju halaman web lainnya.
Menandai elemen serta membuat formulir digital. Selain itu bahasa pemrograman HTML juga berfungsi sebagai penanda pada bagian-bagian dalam website, misalnya adalah header, navigation, footer, main, dan lain sebagainya.
Demikianlah ulasan lengkap mengenai cara membuat tabel di HTML yang mudah dan lengkap. Semua akan terasa sulit jika baru pertama mencoba, namun akan menjadi mudah jika sering kamu berlatih. Semoga bermanfaat.
Rekomendasi:
Sering Susah Sinyal? Ini Cara Mengatasi HP Susah Sinyal… Palingit.com - HP Susah Sinyal - Seluruh provider di Indonesia sudah tentu akan memberikan fasilitas layanan terbaik untuk para konsumennya, tidak lain di antaranya ialah kualitas jaringan stabil. Namun sayangnya,…
Cara Mengatasi Wifi Terhubung tapi Tidak ada Internet Palingit.com - Cara mengatasi wifi terhubung tapi tidak ada internet sangat penting diketahui demi melancarkan pekerjaan. Dalam era digital ini, koneksi internet menjadi kebutuhan penting bagi banyak orang. Namun, seringkali…
Manfaat Webcam dan Cara Menyambungkan Webcam ke Laptop Palingit.com - Work from home pernah menjadi opsi perusahaan saat pandemi Covid-19 melumpuhkan dunia. Pasca pandemi, banyak orang ketergantungan dengan laptop dan belajar untuk menguasai cara menyambungkan webcam ke laptop.…
Mengenal Apa Itu Username dan Kegunaannya Palingit.com - Pengertian Username - Selama kita berselancar di dunia Internet tentunya tidak akan dilewatkan untuk memasukkan username dan password seperti halnya di Facebook, Twitter, maupun Instagram. Ya, tujuannya adalah…
3 Cara Melihat Kapasitas RAM HP Android dengan Mudah [100%… Palingit.com - Semakin hari varian spesifikasi yang ditawarkan beberapa vendor HP Android rasanya makin beragam saja. Entah itu dari segi performa, layar, baterai, ketahanan, kapasitas internal, dan fitur menarik lainnya.…
Terapkan 6 Tips Ini Agar Menyerap Ilmu Jadi Lebih Mudah! Palingit.com - Menyerap Ilmu - Siapa di sini kalau belajar materi yang diberikan guru sering sulit konsentrasi? Niat hati buka HP ingin menuntut ilmu, malah pusing setengah mati karena otak…
Cara Menyembunyikan Status Online di Whatsapp Palingit.com - Cara menyembunyikan status online di whatsapp dengan mudah dan aman dengan fitur resmi ini sangat mudah diterapkan. WhatsApp adalah aplikasi yang paling populer digunakan oleh masyarakat Indonesia untuk…
9+ Game Mirip COC Offline Ukuran Kecil Palingit.com - Pernah dengar game Clash of Clans atau yang biasa dikenal dengan COC? Atau memang pernah main game itu? Tahu nggak sih kalau sebenarnya ada game mirip COC offline…
Mudah! Intip Cara Menghemat Baterai HP Oppo Lengkap Palingit.com - Siapa yang tidak kenal brand ponsel Oppo? Salah satu produsen smartphone yang menawarkan kualitas terbaik dengan harga terjangkau. Apalagi ponsel ini sudah dilengkapi dengan dukungan Artificial Intelligence yang…
4+ Cara Ampuh Mengatasi HP Restart Sendiri (100% Work) Palingit.com - HP restart sendiri menjadi masalah cukup banyak yang dialami oleh pengguna HP Android. Pasalnya, HP suka restart sendiri memang sangat mengganggu aktivitas di smartphone kesayangannya. Bayangkan saja, sudah…
Cara Membuat Folder Baru di Laptop Windows, Mac, Linux Palingit.com - Cara membuat folder baru di laptop berbeda-beda tergantung pada sistem operasi yang digunakan oleh pengguna. Pada sistem operasi yang berbeda seperti Windows, Mac, dan Linux, langkah-langkah untuk membuat…
11 Daftar Aplikasi Nonton Film Gratis di Android TV Palingit.com - Perubahan aturan terhadap penggunaan TV digital membuat setiap orang mencari solusinya. Solusi terbaiknya dengan memilih jenis Android TV, sehingga tidak membutuhkan antena analog lagi. Dengan begitu, akan lebih…
Cara Membuat Script HTML Bucin versi Minta Maaf ke Doi Palingit.com - Kali ini saya akan membagikan sebuah cara membuat Script HTML Bucin versi Minta Maaf ke Doi. Berikut ini tautan yang bisa langsung kalian salin dan lihat hasilnya: Demo…
6 Cara Membuat Kamera Laptop Jernih Saat Online Meeting Palingit.com - Pandemi Covid-19 telah mengubah kehidupan kita, terutama dalam dunia kerja. Meski pandemi mulai mereda, masih ada karyawan yang memilih bekerja dari rumah. Mereka harus mencari cara membuat kamera…
10 Aplikasi Resep Masakan Offline yang Direkomendasikan Palingit.com - Di masa sekarang ini keterampilan memasak menjadi salah satu hal yang perlu dipelajari oleh setiap orang. Kamu perlu mengetahui aplikasi resep masakan offline supaya bisa lebih banyak mengeksplor…
Tutorial Canva Lengkap untuk Pemula Palingit.com - Kamu pasti sudah tidak asing dengan nama Canva, bukan? Aplikasi ini memang cukup populer dan sangat membantu dalam dunia desain. Nah, buat kamu yang masih awam dan ingin…
Cara Membuat Link WhatsApp Untuk Grup Dengan Mudah palingit.com - Cara membuat link grup whatsapp - WhatsApp adalah aplikasi pesan instan yang memungkinkan pengguna untuk mengirim pesan teks, suara, gambar, dan video secara gratis. Aplikasi ini pertama kali…
Mudah! Ini Trik Belajar Fotografi HP untuk Pemula Palingit.com - Menghasilkan gambar yang bagus dan estetis kini menjadi salah satu skill yang diperlukan bagi pengguna media sosial. Tak perlu punya kamera mahal, pakai HP saja cukup, kok. Kamu…
Cara Mengubah PDF ke PPT, Kumpulan Cara Cepat dan Mudah Palingit.com - Cara mengubah pdf ke ppt sangat penting diketahui supaya kita bisa dengan mudah mengubah format file saat diperlukan. Dalam dunia yang semakin terhubung secara digital, dokumen digital seperti…
Tutorial Excel Lengkap untuk Pemula Palingit.com - Tidak dapat dipungkiri bahwa selain Microsoft Words, Excel juga menjadi program yang harus kamu kuasai saat ini. Tidak hanya untuk pekerjaan yang sifatnya administratif, ada banyak bidang…
7 Cara Mengecek Kesehatan Baterai Oppo Palingit.com - Siapa yang pengguna HP Android Oppo sejak lama? Eits, jangan asal pakai-cas-pakai-cas, ya. Kamu perlu mengecek kesehatan baterai (battery health) secara berkala untuk tahu performa HP-mu. Butuh tutorial…
Script HTML Bucin 2023 Terbaru Palingit.com - Script HTML Bucin - Merupakan sekumpulan kata-kata untuk mengungkapkan perasaan maupun hanya sekedar memberikan hiburan yang disajikan dalam bentuk HTML. Kumpulan Script HTML Bucin Terbaru Jika Benar…
Harga Ponsel Nokia Android Terbaru 2023 Plus Cek Spesifikasi… Palingit.com - Apakah kamu pernah menjadi pengguna ponsel Nokia? Di penghujung 90-an hingga pertengahan 2000-an, brand ini memang menjadi salah satu pemimpin pasar ponsel dunia. Tidak mau kalah dengan merek…
15 Rekomendasi Laptop Murah di Bawah 5 Juta Palingit.com - Memilih laptop murah yang pas untuk kegiatan kamu memang gampang-gampang susah, karena kamu juga harus mempertimbangkan spesifikasinya. Selain itu kamu juga perlu memperhatikan hal penting lain seperti besaran…
Cara Menggunakan Komputer, Panduan Lengkap Palingit.com - Cara menggunakan komputer dengan benar dan tepat dapat membuat hasil kerja lebih maksimal dan perangkat lebih awet. Komputer telah menjadi salah satu alat penting dalam kehidupan sehari-hari. Dari…
Cara Membuat Script HTML Nembak Cewek Viral TikTok 2022 Palingit.com - Kali ini saya akan membagikan sebuah cara membuat Script HTML Bucin versi Nembak Cewek Viral TikTok 2022. Berikut ini tautan heiyou feeldream repl co yang bisa langsung kalian…
Cara Upgrade Processor Laptop Dengan Mudah dan Aman Palingit.com - Cara upgrade processor laptop sebenarnya sangat mudah, akan tetapi perlu melakukan penyesuaian untuk menghubungkan beberapa komponen sehingga dapat merakit dan juga mempermudah proses upgrade. Mungkin ada beberapa yang…
Cara Blokir Iklan di HP yang Mengganggu Tiba-Tiba [100%… Palingit.com - Cara Blokir Iklan di HP - Suka kesel enggak sih, hp lagi enak dipakai tiba-tiba muncul iklan. Selain mengganggu, munculnya iklan seperti itu sangat tidak baik bagi hp,…
6 Cara Mengisi Formulir PDF di Laptop Gratis & Praktis Palingit.com - Formulir sering kali disimpan dalam format PDF yang tidak bisa diedit supaya isi tidak berubah. Lantas, bagaimana cara mengisi formulir PDF di laptop? Berbagai formulir menggunakan format PDF,…
7+ Cara Agar Baterai HP Awet Kembali [Tips Ampuh] Palingit.com - Baterai HP Tetap Awet - merupakan sebuah hal yang diinginkan banyak pengguna ponsel. Apalagi di era sekarang, HP sudah menjadi gawai yang seakan tak pernah lepas dari genggaman…