Dulu sekitar tahun 2000-an sebelum standar CSS diterapkan pada setiap web browser, kebanyakan para web developer menggunakan tabel untuk mengatur tata letak sebuah halaman web. Namun untuk sekarang setelah adanya CSS, penerapan table HTML untuk layout tampilan halaman web sudah tidak disarankan kembali. Kamu sangat disarankan untuk menggunakan CSS saat mengatur tampilan halaman web. Show
Umumnya saat kamu menampilkan suatu data yang terstruktur dari database, kamu akan menampilkannya dalam bentuk tabel bukan? HTML sebagai bahasa markup telah menyediakan elemen table yang bisa digunakan saat kamu ingin membuat tabel. Kamu tidak perlu khawatir, karena untuk membuat tabel cukup mudah kok bahkan bisa kurang dari 15 menit.
Sebelum itu mari kenali terlebih dahulu apa itu tabel. Tabel pada dasarnya digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri dari baris, kolom dan sel. Baris, kolom dan sel pada suatu tabel ini sangat membantu dalam melihat informasi keterkaitan di dalamnya. đź’» Mulai Belajar PemrogramanBelajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional. Daftar Sekarang Memahami Elemen HTML dalam Membuat TabelKetika kamu membuat tabel dengan HTML ada beberapa tag atau elemen HTML yang harus kamu ketahui. Akan tetapi pada dasarnya kamu sudah bisa membuat tabel dengan hanya menggunakan 3 elemen HTML berikut :
Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut :
Daripada kamu bingung dengan elemen-elemen tersebut, mari kita praktikkan saja langsung dengan menggunakan 3 elemen yang umum digunakan dalam membuat tabel. Pertama silakan buat file html baru. Beri nama file html tersebut sesuai selera atau dapat kita beri nama “index.html”. Silakan perhatikan contoh kode berikut dan salin ke dalam file index.html.
Hasil dari kode program di atas akan seperti berikut : Menggabungkan Sel pada Tabel HTMLSaat membuat tabel, terkadang kita dihadapkan akan kebutuhan untuk menggabungkan beberapa sel menjadi satu. Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa kamu gunakan seperti berikut :
Atribut tersebut bisa diterapkan pada tag td maupun th. Perhatikan contoh kode program berikut :
Hasil dari kode program diatas seperti berikut : Memberikan Warna dan Jarak Antar Sel pada HTMLPada contoh kode program sebelumnya, tabel yang dihasilkan terkesan saling berdekatan antar satu sel dengan sel yang lain. Untuk mengatasi hal itu HTML telah menyediakan atribut cellpadding yang bisa kamu gunakan untuk mengatur jarak antar sel. Atribut cellpadding ini bisa diterapkan langsung pada tag table seperti berikut :
Menerapkan kode CSS untuk Desain TabelSebelumnya sudah kita bahas bagaimana membuat garis dan memberikan warna serta jarak pada tabel dengan menggunakan atribut yang ada di HTML. Untuk saat ini setelah kehadiran CSS penggunaan atribut tersebut dalam mendesain tabel sudah tidak disarankan lagi. Kamu disarankan menggunakan kode CSS dalam membuat garis dan memberikan warna serta jarak pada tabel. Memasukan kode CSS pada halaman web bisa dengan membuat berkas CSS terpisah atau disimpan dalam elemen head pada HTML. Usahakan jangan disimpan pada elemen HTML yang lain karena bisa membuat kode program terlihat tidak rapi. Selain itu juga dengan menyimpan kode CSS pada file terpisah atau di dalam elemen head akan membuat kode CSS tersebut dapat digunakan secara berulang-ulang. Kode CSS dapat ditulis dengan mendefinisikan terlebih dahulu tag HTML apa yang akan kamu ubah atau beri efek CSS. Lebih jelasnya silakan kamu perhatikan contoh kode program berikut.
Lalu properti CSS yang ada pada kode program di atas berfungsi untuk apa aja? Mari kita ulas sekilas mengenai properti CSS yang digunakan pada kode program di atas.
Hasil dari kode program tersebut maka tabel yang ditampilkan akan seperti berikut : Supaya lebih menarik lagi, kamu bisa menambahkan properti CSS width agar tabel bisa mengikuti ukuran layar. Properti hover digunakan agar baris pada tabel akan memberikan efek warna saat kursor mengarah pada baris tersebut. Sehingga kode CSS yang ada akan seperti berikut ini :
Bagaimana cukup mudah bukan dalam membuat tabel di HTML? Hal yang harus kamu perhatikan saat membuat tabel adalah penggunaan atribut rowspan dan colspan. Karena kamu harus teliti dalam menentukan berapa ukuran sel yang akan diterapkan pada rowspan maupun colspan.
Sering-seringlah berlatih dan terus kembangkan kemampuanmu dengan mengikuti Dicoding academy Front-End Web Developer. Di sini kamu akan diajarkan mulai dari dasar HTML, CSS, Javascript hingga menyusun layout yang responsif, interaktif dan tentunya user friendly. Simak juga artikel lainnya di blog Dicoding yang bisa memperluas wawasan kamu mengenai pemrograman web.
Cara Mudah Membuat Tabel Di HTML Dalam 15 Menit – karya Robby Takdirillah, Intern Junior Content Writer di Dicoding Apa fungsi Bg Color pada HTML?Bgcolor : merupakan attribute untuk menentukan warna pada halaman HTML.
Apa fungsi Bg Color dalam membuat tabel?bgcolor digunakan untuk menentukan warna latar belakang tabel.
Apa itu TR dan TD dalam HTML?Tag <tr> (tabel row) untuk membuat baris. Tag <td> (table data) untuk membuat sel. Tag <th> (table head) untuk membuat judul pada header.
Bagaimana kode HTML untuk menampilkan tabel?Di dalam dokumen HTML, kita bisa menyajikan data dalam bentuk tabel. Tabel didefinisikan dengan tag <table> sebagai kontainer, lalu tag <thead> untuk bagian header, tag <tbody> untuk bagian body table, dan tag <tfoot> untuk bagian footer.
|