Cara Membuat Tabel Menggunakan Mootools

Anda pasti sudah pernah coba membuat table dengan tag <table> pada html, dan di situ anda mengetikan <tr> untuk barisnya dan tag <td> untuk kolomnya terkadang anda kesusahan dalam membuat tabel menggunakan salah satu tag pada html yaitu tag <table>. Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Tabel Menggunakan Mootools, mootools adalah salah satu framework javascript.

Kita tau tabel sangat berfungsi untuk membuat data yang kita masukan menjadi rapih dan terstruktur. Maka dari itu saya akan memberikan langkah-langkah Cara Membuat Tabel Menggunakan Mootools supaya anda tidak perlu susah-susah membuat tabel menggunakan kode html. Dan berikut langkah-langkahnya

Pertama buka teks editor teman-teman dan masukan kode html di bawah ini:

<!DOCTYPE html>
<html>

   <head>

   </head>
   
   <body>
  
   </body>
   
</html>

Kedua, teman-teman download file mootoolsnya di website mootools, lalu simpan di dalam folder yang sama dengan file htmlnya.

Ketiga, kita panggil file mootoolsnya dengan menggunkaan kode di bawah ini:

<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

Keempat, kita buat scriptnya dan simpan di dalam tag body, untuk penjelasan scriptnya saya sudah beri commenting di dalam scriptnya, berikut adalah scriptnya:

<script type="text/javascript">
     //myTable adalah variabel untuk menampung class HtmlTable
        var myTable = new HtmlTable({
         //properties di sini berfungsi untuk memberikan style pada tabelnya
    properties: {
        border: 1,
        cellpadding: 1
    },
    //headers sama fungsinya seperti tag <th> pada html
    headers: ['buah', 'warna'],
    //dan rows di sini adalah baris sebagai tempat dari data yang akan kita masukan pada tabel
    rows: [
        ['apel', 'merah'],
        ['anggur', 'ungu']
    ]
});

//memasukan class myTable pada body di html
myTable.inject($(document.body));

// untuk menambahkan data kita menggunakan myTable.push([])
myTable.push(['limun', 'hijau']);
     </script>

Coba teman-teman buka file html di browser untuk melihat hasilnya, maka teman-teman akan melihat hasil seperti gambar di bawah ini:

Setelah teman-teman tahu bagaimana cara membuat tabel menggunakan mootools maka teman-teman dapat membuat tabel lebih cepat dari biasanya dan dapat mengurangi penulisan kode html yang ada karena biasanya kita akan menulis kode html yang panjang untuk sebuah tabel.

Sekian tutorial kali ini tentang Cara Membuat Tabel Menggunakan Mootools. Semoga bermanfaat bagi teman-teman yang ingin mencari alternatif lain dalam membuat tabel.

Cara Membuat Tabel Menggunakan Mootools

Kategori