Kustomisasi Tabel Dan Menampilkan Data Tabel Dengan Kombinasi Php & Html

Safelinkdroid

5 Jun, 2019

Tabel merupakan susunan data dalam baris dan kolom, dalam aplikasi Sistem Informasi tabel tidak pernah mangkir untuk tampil. Pada pembelajaran Pemrogaman Web menciptakan tabel niscaya diajarkan termasuk cara kustomisasinya menyerupai Colspan, Rowspan, Border, Padding dan lain sebagainnya. Dasar menciptakan tabel perlu untuk dipelajari sebab walaupun ketika ini sudah banyak template tabel bagus, namun terkadang tidak sesuai dengan apa yang diharapkan sehingga perlu dikustomisasi sendiri. Jika tidak tau dasarnya bagaimana sanggup mengkustomisasinya?

Kustomisasi tabel yaitu Colspan dan Rowspan sering kali yang banyak memakan waktu untuk dipahami para pelajar Pemrograman Web. Masalah ini sanggup dimaklumi sebab PHP tidak menyediakan kustomisasi Drag & Drop menyerupai pemrogaman lain. Pada artikel ini akan dibahas bagaimana kustomisasi tabel khususnya Colspan dan Rowspan serta menampilkan data tabel.

Persamaan Persepsi
- Artikel tidak membahas Query pembaca dianggap sudah paham mengenai Query dan koneksi database pada Pemrogaman Web.
- Pembaca sudah paham struktur HTML
- Mengerti minimal sedikit wacana penerapan CSS
- Demi pengalaman yang bagus, uji cobalah tampilkan arahan yang ada pada setiap langkah yang ada semoga mengerti arahan tersebut untuk apa, efeknya apa

Langkah Membuat Tabel
1.	Jika terdapat colspan dan rowspan maka cara termudah ialah dengan buat desain memakai excel atau yang aplikasi yang ada tabelnya Contoh tabel yang akan dibentuk ialah menyerupai dibawah ini
2.	Setelah dibentuk pada excel maka akan terlihat mana yang perlu di colspan dan rowspan serta berapa banyak jumlahnya menyerupai dibawah ini
3.	Mulai buat coding tabelnya <table> <tr> <td rowspan="2">No.</td> <td colspan="2">Mahasiswa</td> <td colspan="3">Buku</td> </tr> <tr> <td>NIM</td> <td>Nama</td> <td>Judul</td> <td>Pengarang</td> <td>Penerbit</td> </tr> </table>
4.	Menampilkan data dengan PHP dan HTML, untuk mengeksekusi ini sangat disarankan memakai Code Editor yang mempunyai syntax highlighter terang antara PHP dengan HTML, misalnya Notepad++. Coding jika ditambah menampilkan data tabel ialah menyerupai dibawah ini. <table> <tr> <td rowspan="2">No.</td> <td colspan="2">Mahasiswa</td> <td colspan="3">Buku</td> </tr> <tr> <td>NIM</td> <td>Nama</td> <td>Judul</td> <td>Pengarang</td> <td>Penerbit</td> </tr> <?php include 'data.php'; $data = datapinjaman(); $i = 1; foreach($data as $pinjaman){ <!-- AWAL PERULANGAN --> ?> <tr> <td><?php echo $i++ ?></td> <td><?php echo $pinjaman['nim'] ?></td> <td><?php echo $pinjaman['nama'] ?></td> <td><?php echo $pinjaman['judul'] ?></td> <td><?php echo $pinjaman['pengarang'] ?></td> <td><?php echo $pinjaman['penerbit'] ?></td> <?php } <!-- AKHIR PERULANGAN --> ?> </table> Fungsi syntax highlighter yang terang ialah untuk mengantisipasi adanya *tag* yang belum tertutup sebab untuk menampilkan datanya memadukan PHP dan HTML. Lihat yang ditandai Awal dan Akhir. Dimana sehabis pembuka perulangan "{" PHP ditutup "?>" dan adanya tag PHP lagi ketika menutup perulangan. Adanya syntax highlighter jika ada tag yang belum tertutup menjadi lebih gampang untuk mencarinya. Selain syntax perlu untuk membiasakan diri menciptakan tab-space yang terang semoga rapi dan gampang dibaca. Mungkin ada yang bertanya kepingan foreach() bagian ini sanggup diganti mengganti arahan yang umum dipakai untuk pengenalan pemrograman web ialah dibawah ini, karena foreach() biasa dipakai ketika sudah memakai framework seperti Code Igniter dan Laravel. include "koneksi.php"; $query = "query untuk ambildata"; $getdata = mysqli_query($konek, $query) or die(mysqli_error($konek)); $i = 1; while($peminjaman = mysqli_fetch_array($getdata)){
5.	Selesai, data sudah sanggup tampil namun bentuk tabel belum jelas, sanggup dilihat dibawah ini.

Tampilan apa adanya tentu saja tidak menarik, maka tabel tersebut perlu di kustomisasi. Kustomisasi yang akan dilakukan ialah menambahkan garis / border, memberi padding (cari di google kalau belum tau), menciptakan goresan pena di tengah dan memberi warna tabel.

Langkah Kustomisasi Tabel Kustomisasi dilakukan dengan memakai CSS
1.	Membuat Garis Pada Tabel Garis di buat pada semua baris & kolom / cell data ditandai dengan tag <td> dengan cara menulis ulang tag <td> pada CSS atau dalam konsep Pemrograman Berorientasi Objek disebut Override atau mengganti isi dari method yang sudah ada. Attribut yang perlu diubah ialah tebal garis, tipe garis, dan warna garis. Contohnya ialah tebal garis 1px, tipe garis solid, dan warna garis memakai code hex sanggup dicari di google. Kode CSS jadi menyerupai dibawah ini td{ border-width: 1px border-style : solid; border-color : #ececec; }
2.	Jika diterapkan langkah nomor 1 tadi gotong royong masih ada jarak antar cell sehingga kurang lezat dipandang maka perlu untuk menghilangkan jarak tersebut. Caranya sama menyerupai langkah nomor 1 yaitu dengan Override tag <table>.Selain itu juga sekalian menambahkan attribut untuk menciptakan goresan pena tabel berada di tengah. Kode CSS jadi menyerupai dibawah ini table{ text-align: center; border-collapse: collapse; }
3.	Mewarnai Cell dapat dilakukan dengan cara CSS maupun dengan attribut bgcolor yang akan diwarnai ialah 1 Cell yaitu "No." dengan attribut bgcolor , 3 Cell yaitu "Mahasiswa" "NIM" "Nama", dan 4 Cell yaitu "Buku" "Judul" "Pengarang" "Penerbit" dengan CSS sedangkan untuk mewarnai teks dengan menambahkan attribut color Kode CSS jadi menyerupai dibawah ini. .mhs{ background: #c6e2ff; color: white; } .buku{ background: #a5c7e9; color: black; }
4.	Kode final sehabis nomor 3 diterapkan ialah menjadi menyerupai dibawah ini <html> <head> <title>Data Pinjaman</title> <style type="text/css"> table{ text-align: center; border-collapse: collapse; } td{ border-width: 1px; border-style : solid; border-color : #ececec; } .mhs{ background: #c6e2ff; color: white; } .buku{ background: #a5c7e9; color: black; } </style> </head> <body> <center> <h1>Data Pinjaman</h1> <table cellpadding="10"> <tr> <td rowspan="2" bgcolor="#e9ebee">No.</td> <td colspan="2" class="mhs">Mahasiswa</td> <td colspan="3" class="buku">Buku</td> </tr> <tr> <td class="mhs">NIM</td> <td class="mhs">Nama</td> <td class="buku">Judul</td> <td class="buku">Pengarang</td> <td class="buku">Penerbit</td> </tr> <?php include 'data.php'; $data = datapinjaman(); $i = 1; foreach($data as $pinjaman){ ?> <tr> <td><?php echo $i++ ?></td> <td><?php echo $pinjaman['nim'] ?></td> <td><?php echo $pinjaman['nama'] ?></td> <td><?php echo $pinjaman['judul'] ?></td> <td><?php echo $pinjaman['pengarang'] ?></td> <td><?php echo $pinjaman['penerbit'] ?></td> <?php } ?> </table> </center> </body> </html> Hasil sanggup dilihat eksklusif melalui tautan ini.

Kustomisasi Tabel menciptakan tampilan menjadi lebih lezat dilihat walaupun sudah banyak template tabel HTML namun tak ada salahnya bila tau dasarnya dan caranya mengkustomisasi sendiri tabel yang dibuat. Jika ada yang kurang terang atau pertanyaan sanggup ditanyakan melalui media umum yang ada pada widget blog ini.