Pada posting kali ini Niguru.com akan menjelaskan berbagai instruksi dalam bentuk query pada bahasa pemrograman PHP, yang diperlukan untuk membuat tabel. Show
Sebelumnya kita lihat dulu kondisi database sebelum ditambahkan tabel (dalam contoh kita tampilkan isi dari database "niguru"): Note: Pada database "niguru" hanya terdapat 1 tabel saja dengan nama "tabelku". Berikut ini query untuk membuat tabel: $sql="CREATE TABLE nama_tabel (daftar_field) "; Note: $sql adalah variabel untuk menampung query boleh diganti dengan nama lain. Contoh: $sql="CREATE TABLE DaftarHP ( IDWarga int, Nama varchar(25), NoHP varchar(12) )";
Berikut ini instruksi untuk mengeksekusi query: mysqli_query($sql,$a);
Note: $a adalah variabel untuk menampung data koneksi boleh diganti dengan nama lain. $a mengikuti contoh dari posting sebelumnya yang menjelaskan koneksi MySQL. 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 SekarangMemahami 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. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mengenal Tabel HTML</title> </head> <body> <table border="1"> <tr> <td>Baris ke 1 - Kolom ke 1</td> <td>Baris ke 1 - Kolom ke 2</td> </tr> <tr> <td>Baris ke 2 - Kolom ke 1</td> <td>Baris ke 2 - Kolom ke 2</td> </tr> </table> </body> </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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mengenal Tabel HTML</title> </head> <body> <table border="1"> <tr> <th rowspan="2">Nama</th> <th colspan="3">Nilai</th> </tr> <tr> <th>Kimia</th> <th>Fisika</th> <th>Biologi</th> </tr> <tr> <td>Robby</td> <td>76</td> <td>80</td> <td>81</td> </tr> <tr> <td>Rendi</td> <td>84</td> <td>70</td> <td>75</td> </tr> <tr> <td>Alfian</td> <td>96</td> <td>70</td> <td>71</td> </tr> </table> </body> </html>
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 : 1 2 3 <table border="1" cellpadding="8"> .... </table>
1 2 <th bgcolor="grey" rowspan="2">Nama</th> <th bgcolor="yellow" colspan="3">Nilai</th>
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. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mengenal Tabel HTML</title> <style> table { border-collapse: collapse; } table, th, td { border: 1px solid black; } th, td { padding: 10px; } th { background-color: #4CAF50; color: white; } </style> </head> <body> <table> <tr> <th rowspan="2">Nama</th> <th colspan="3">Nilai</th> </tr> <tr> <th>Kimia</th> <th>Fisika</th> <th>Biologi</th> </tr> <tr> <td>Robby</td> <td>76</td> <td>80</td> <td>81</td> </tr> <tr> <td>Rendi</td> <td>84</td> <td>70</td> <td>75</td> </tr> <tr> <td>Alfian</td> <td>96</td> <td>70</td> <td>71</td> </tr> </table> </body> </html>
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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <style> table { border-collapse: collapse; width: 100%; }
table, th, td { border: 1px solid black; } th, td { padding: 10px; } th { background-color: rgb(19, 110, 170); color: white; } tr:hover {background-color: #f5f5f5;} </style>
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. 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 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.
Apa itu TR dan TD dalam HTML?Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel.
Apa fungsi tag table TR dan TD pada pembuatan tabel?Untuk membuat suatu tabel minimal diperlukan tiga elemen tabel yaitu: 1. Tag Table : Sebagai awal pembuatan tabel. 2. Tag TR : Untuk mendefinisikan berapa banyak baris pada tabel 3. Tag TD : Untuk menampung sel data dari tabel tsb.
|