Ilustrasi Coding. Foto: Arnold Francisca via Unsplash Show
Saat mempelajari tentang HTML, tentunya tidak asing dengan fungsi Rowspan. Umumnya, fungsi Rowspan digunakan untuk tabel HTML dalam menampilkan sebuah data. Salah satu elemen penting yang ada di HTML adalah tabel. Fungsinya adalah untuk menampilkan data secara rapi dan tertata. Tampilannya pun tidak jauh berbeda dengan tabel pada Excel, yaitu berisi kotak-kotak yang di dalamnya terdapat sebuah data. Dalam membuat tabel juga dibutuhkan metode yang pas. Tak hanya itu, ada elemen tambahan yang diperlukan saat membuatnya, seperti tag <table></table>. Lantas, apa fungsi Rowspan dan Colspan pada pembuatan tabel HTML? Langsung saja simak artikel berikut ini. Pengertian dan Fungsi RowspanJika dalam Excel menggunakan fitur "merge" untuk menggabungkan data dalam satu baris, maka membuat HTML membutuhkan fungsi Rowspan. Rowspan merupakan salah satu atribut yang berkaitan erat dengan pembuatan tabel. Fungsinya adalah untuk menggabungkan beberapa data dalam baris. Sederhananya, menggabungkan baris ke bawah. Mengutip salam satu buku digital yang berjudul Aplikasi Internet Menggunakan HTML, CSS, dan JavaScript yang disusun oleh Koesheryati, Taryana Suryana bahwa untuk menggunakan atribut rowspan maka menyisipkan tag <td rowspan=n>. Dengan keterangan, bahwa “n” merupakan jumlah baris yang akan digabungkan. Contoh Penggunaan Rowspan pada Tabel HTMLIlustrasi Fungsi Rowspan pada HTML. Foto: Florian Olivo via Unsplash Biasanya, tabel digunakan jika kita ingin menampilkan sebuah data dalam bentuk baris dan kolom. Dalam membuat tabel sederhana menggunakan HTML, terdapat empat elemen yang digunakan, seperti Table, TH,TR, dan TD. Tag <table> merupakan elemen untuk membuat tabel kemudian di ikuti dengan tag <th> yaitu "Tabel Header", kemudian <tr> yaitu "Table Rows" yang berfungsi untuk membuat baris pada tabel kemudian tag <td> yaitu "Table Data" untuk membuat kolom pada tabel. Hasil kolom dari tag <tr> dan <td> disebut dengan "Table Cell", yaitu sebagai tempat di mana kamu memasukkan data-data yang akan kamu tampilkan. Berikut adalah contoh pembuatan tabel menggunakan HTML dengan Rowspan. <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td rowspan="4">7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> </table> </body> Berdasarkan sintak di atas, terdapat penggunaan Rowspan yang bisa kamu lihat pada kolom nomor 5 yang artinya menggabungkan sebanyak 4 baris ke bawah. Penggunaan fungsi Rowspan pada HTML di atas berfungsi untuk menampilkan data dalam bentuk baris pada tabel. Tidak jauh berbeda dengan tabel Excel pada umumnya. Umumnya, tabel pada dokumen HTML juga berguna untuk mengontrol sebuah tampilan informasi yang ada dalam halaman website. Kemudian, tabel tersebut juga bisa kamu gunakan untuk menampilkan record-record pada database. Nah, kini kamu sudah tahu apa fungsi Rowspan pada tabel HTML, kan? Dengan begitu, kamu bisa mempraktikkan cara penggunaannya untuk menampilkan data dalam bentuk tabel saat coding. 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. 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 itu rowspan dalam HTML?Atribut rowspan digunakan untuk menggabungkan baris pada tabel.
Apa atribut untuk menggabungkan baris?digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN.
Langkah langkah membuat tabel HTML?Cara Membuat Tabel di HTML
<table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel. <thead> – berfungsi untuk membungkus kepala tabel. <tbody> – berfungsi untuk membungkus tubuh tabel. <tr> – berfungsi untuk membuat baris tabel, singkatan dari Table Row.
Bagaimana cara untuk membuat baris pada table?Klik sel di atas atau di bawah tempat yang ingin Anda tambahkan baris. Di bawah Alat Tabel, di tab Tata Letak, lakukan salah satu hal berikut: Untuk menambahkan baris di atas sel, klik Sisipkan di Atas dalam grup Baris dan Kolom. Untuk menambahkan baris di bawah sel, klik Sisipkan di Bawah dalam grup Baris dan Kolom.
|