Berikut ini adalah tutorial cara membuat tabel di html dengan mudah, ada banyak fungsi dalam penggunaan tabel, misalnya jaman dahulu tabel di manfaatkan untuk pembuatan kolom pada website, hanya saja sekarang di era web modern hal itu tentu sangat jadul sekali. Sedangkan tabel bisa juga di manfaatkan untuk menampilkan data terstruktur yang di ambil langsung dari database, misalnya jika ingin menampilkan sebuah artikel di halaman backend, tentu tidak semua ditampilkan, biasanya hanya judul dan deskripsi singkat yang disusun di tabel tabel, sehingga mempermudah programmer dalam membentuk susunan yang rapih. Show
Penulisan Tabel di HTMLUntuk dapat membuat tabel di HTML menggunakan tag Perlu pembaca ingat bahwa tabel di atas tidak sepenuhnya lengkap, pembaca dapat mencari referensi di website lain seperti w3schools dan lain-lain. Contoh Membuat Tabel di HTMLBerikut ini adalah contoh untuk membuat tabel di html dengan sederhana, silahkan buka text editor kesukaan anda, lalu ketikan kode dibawah ini.
Dari kode tabel html diatas maka seharusnya akan muncul seperti gambar di bawah ini. Menambahkan Atribut Cellspacing pada TabelSelain itu anda juga dapat mengatur jarak antara sel dengan tabel, dimana akan ada ruang yang dapat disesuaikan antara garis utama bagian luar dan garis antar sel dengan menggunakan atribut cellspacing, berikut ini contoh kode nya.
Silahkan lihat hasilnya, seharusnya seperti gambar dibawah ini. Menambahkan Atribut Cellpadding Pada TabelSelain cellspacing, ada juga atribut cellpadding untuk penjelasan silahkan lihat tabel diatas, contoh penulisan kode seperti dibawah ini.
Maka akan tampil seperti gambar di bawah ini.
Membuat Judul Tabel Dengan HTMLSelain mengatur jarak tabel, biasanya dalam apapun tabel memiliki sebuah judul, judul dalam tabel ini sebenarnya sama saja seperti pada Ms. Word, caranya adalah dengan menambahkan tag 0 tepat dibawah tag 1 diluar dari table row, silahkan lihat kode dibawah ini.
Berikut ini adalah penampakan sebuah judul pada tabel dengan kode html diatas. Menggabungkan Sel-sel pada TabelJika anda pernah menggunakan Ms. Excel tentu tau tentang merge cell, dimana anda dapat menggabungkan dua atau lebih sel dalam satu sheet, begitupun pada html. Kali ini dalam menggabungkan sel-sel pada tabel kita tidak menggunakan tag table, melainkan memberikan atribut-atribut di tag td, yaitu dengan menambahkan atribut rowspan dan colspan, berikut ini contohnya.
Dari contoh di atas seharusnya tampil seperti gambar dibawah ini. Tutorial di atas adalah dasar, anda masih bisa berkreasi dalam pembuatan tabel di html, tetapi setidaknya ini adalah gambaran bagaimana cara pembuatan tabel pada html, semoga tulisan ini dapat berguna bagi saya dan pembaca. Apa perintah HTML untuk membuat tabel?Tag untuk Membuat Tabel di HTML
Tag <table> untuk membungkus tabelnya. Tag <thead> untuk membungkus bagian kepala tabel. Tag <tbody> untuk membungkus bagian body dari tabel. Tag <tr> (tabel row) untuk membuat baris.
Bagaimana cara membuat tabel pada HTML tuliskan strukturnya?Struktur dasar membuat tabel pada HTML adalah tag <table>, <tr> dan <td>. Artinya, hanya dengan 3 tag tersebut kita sudah bisa menampilkan tabel pada web browser.
Jika ingin membuat sebuah tabel di dalam HTML tag Apakah yang pertama di buat?<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.
Manakah dari tag berikut yang digunakan untuk menambahkan baris dalam tabel?Tag <tr> (tabel row) untuk membuat baris. Tag <td> (table data) untuk membuat sel.
|