New Updates

Pengertian dan Cara Implementasi TABLE pada HTML

April 21, 2020 , , ,
Selamat Datang kembali di blog Sastrika Karya. Pada tulisan saya malam ini saya akan melanjutkan artikel tentang HTML yang sudah saya tulis kira" 2-3 hari yang lalu. Pada artikel kali ini saya akan membahas tentang <tabel> pada HTML, pengertian, penerapan dan contoh implementasi codingnya.



Apa itu Tabel ?

Table atau dalam Bahasa Indonesia biasa disebut dengan Tabel, adalah sekumpulan data yang telah diolah dan dipetakan berdasarkan kriteria tertentu kemudian ditampilkan dalam bentuk baris dan kolom untuk memudahkan manusia dalam membaca dan mengetahui isi dari suatu content.


Gambar Table

Sebelum lompat ke bagian selanjutnya akan saya tekankan terlebih dahulu bahwa tabel itu terdiri dari baris yang menurun, dan kolom yang mendatar. Mengapa saya tekankan? Karena sampai sekarang terkadang saya masih bingung yang mana yang baris dan yang mana yang kolom.



TAG HTML untuk Membuat TABLE

Dalam bahasa pemrograman HTML telah disediakan syntax yang dapat anda gunakan untuk menginterpretasikan data dalam bentuk tabel.

Berikut contoh coding dari table dan hasil interpretasinya yang digambarkan dalam bentuk visual




Gambar Hasil Interpretasi dari Code HTML di Atas

Untuk membuat tabel diperlukan beberapa tag yang digunakan untuk menyusun suatu tampilan dari table yaitu :

Gambar hasil interpretasi dari code HTML di atas dengan visualisasi codenya

  1. table
    table adalah tag yang digunakan untuk menginisialisasikan suatu suatu kerangaka utama dari suatu table.

  2. tr
    tr adalah tag yang digunakan untuk membungkus tiap-taip kolom atau tag <td> menjadi kumpulan kolom dalam satu baris.

  3. td
    td adalah tag yang digunakan untuk menginterpretasikan kolom yang digunakan untuk mengisi masing-masing datanya.

  4. th
    th adalah tang yang difuankan untuk menginisilisakikan suatu kolom untuk content yang dibungkus dengan thead. Dengan dibedakan dengan td memberikan keuntungan yaitu memungkinkan perbedaan ketika styleing dengan CSS.

  5. tbody
    tbody adalah tag yang digunakan untuk mewadahi content / isi dari table, setiap data / text yang akan di-interpretasi-kan sebagai isi diletakan dalam tag <tr> <td> kemudian tiap-tiap tag <tr> dimasukkan bungkus dengan tag <tbody>.

  6. thead
    thead sama seperti tbody untuk digunakan untuk membungkus suatu konten hanya saja thead dikususkan untuk heading dari table (untuk judul tiap barisnya). Dengan dibedakan dengan tbody memberikan keuntungan yaitu memungkinkan perbedaan ketika styleing dengan CSS.

  7. tfoot
    tfoot merupakan tag yang jarang digunakan, fungsinya sama seperti tboay dan thead, hanya saja digunakan sebagai footer dari suatu table.

  8. caption
    adalah tag yang digunakan tntuk membuat judul suatu table atau dapat juga diguankan untuk membuat penjelasan dari tabel yang anda buat dalam membuat table.




ATTRIBUTE yang Dapat Diterapkan untuk Membuat TABLE

Attribute adalah suatu komponen yang diterapkan pada suatu Tag untuk memberikan effect atau fungsi tertentu pada tag tersebut.

Sebelumnya saya pernah belajar banyak atribut yang dapat diterapkan pada beberapa tag diatas, namun setelah release nya HTML 5, banyak Attribute yang tidak digunakan lagi, karena fungsi-fungsi attribute tersebut dapat diatur dengan CSS. Berikut ini attribute yang masing sering saya implemantasikan dalam membuat table :
  1. border
    Border, sama seperti namanya border berfungsi untuk memberikan garis tepi / bingkai pada tiap-tiap baris, dan kolom pada suatu table.

    Contoh code penerapan attribute border :
    <table border="1">
    ...
    </table>


  2. colspan
    colspan adalah atribut yang digunakan untuk menginisilaisaikan jumlah ruang suatu kolom pada table.

    contoh code penerapan attribute colspan, menggunakan 2 kolom secara horizontal :
    <td colspan="2"></td>


  3. rowspan
    rowspan adalah atribut yang digunakan untuk menentukan jumlah ruang yang dimiliki suatu baris
    pada table.

    contoh code penerapan attribute rowspan, menggunakan 3 kolom secara vertikal :
    <td rowspan="3"></td>

Berikut contoh coding html yang menerapkan atibut colspan dan rowspan pada baris dan kolomnya :

Kode

Gambar hasil interpretasi code tabel yang menerapkan attribute rowspan dan colspan



Contoh Kasus Penerapan Table HTML

Dalam pembuatan website tabel sangat banyak sekali kegunaannya contoh :
  1. Dalam project Sistem Informasi biasanya digunakan untuk menampilkan data dalam bentuk log atau catatan, misal Transaksi Penjualan, dan Presensi / User Login dll.
  2. Menampilkan data spesifik yang ter struktur Daftar Barang, Daftar User, dsb.
  3. Menampilkan data yang di-return dari Database, dalam bentuk laporan, nota, dan lain sebagainya.
  4. Saya biasanya juga menggunakan tabel untuk mengatur gambar pada Positng-an saya di Blogger supaya bisa bersebelahan, atau membuat posting artikel  yang memungkinkan memuat gambar dalam bentuk gallery, maka saya akan membuat mini gallery dengan HTML.
  5. Bahkan ada juga website yang menerapkan table sebagai kerangka-nya, namun sekarang sudah jarang digunakan karena kurang responsive.



Cara Mengimplementasikan Table pada HTML

Berikut ini langkah-langkah pembuatan Tabel HTML :
  1. Silahkan buka Code Editor  anda pada PC / Laptop anda. Jika belum ada silahkan anda bisa mendownlaodanya melalui masing-masing official pagenya berikut : notepad++, Sublime Text, VS Code. Atau jika anda tidak ingin menginstall code editor anda dapat menggunakan text editor notepad, atau gedit.

  2. Dalam pembuatan table kali ini saya akan membuat daftar posting dari blog sebelah "LangIT Tutorial". Berikut ini coding-an Table  sederhana, silahkan copykan code berikut ini ke text edito anda :

  3. Save menjadi file dengan extention *.html. misalkan saya akan menyimpannya dengan nama table.html

  4. Untuk melihat hasilnya silahkan buka file HTML yang baru saja anda simpan di web browser. Berikut ini hasil tabel.html yang telah di interpretasikan :


Sebenarnya anda dapat mengiterpretasikan coding-an di atas itu pada content blogger hanya saja biasanya hasil tabel yang di-interpretasi-kan sudah terpengaruh oleh default CSS pada Template Blog. Misalkan berikut  contoh hasil table yang telah di-interpretasi-kan :

Tabel HTML | SkyLight_Animation
Last Update Article
No Title Date
1 Database Self Relationship (Relasi Antara Suatu Tabel dengan Tabel itu Sendiri) 2020/04/15
2 Cara Membuat Halaman Loading (Preload) pada Website dengan HTML, CSS, dan JQuery
3 Cara Menggunakan Google Hangout Meet untuk Work from Home dan Kegiatan Belajar dengan Program Jarak Jauh 2020/03/12
4 Perancangan Database dengan ERD (Entity Relation Diagram) 2019/11/10
5 ...



Referensi :

w3school.com



Sekian artikel dari kami banyak kurangnya kami mohon maaf...

Terima Kasih
~Semoga Bermanfaat~

No comments

Subscribe to: Post Comments ( Atom )