Beranda
FrontEnd

[WEB] Kustomisasi Tabel dan Menampilkan Data Tabel Dengan Kombinasi PHP & HTML


Tabel merupakan susunan data dalam baris dan kolom, dalam aplikasi Sistem Informasi tabel tidak pernah absen untuk tampil. Pada pembelajaran Pemrogaman Web membuat tabel pasti diajarkan termasuk cara kustomisasinya seperti Colspan, Rowspan, Border, Padding dan lain sebagainnya. Dasar membuat tabel perlu untuk dipelajari karena walaupun saat ini sudah banyak template tabel bagus, namun terkadang tidak sesuai dengan apa yang dibutuhkan sehingga perlu dikustomisasi sendiri. Jika tidak tau dasarnya bagaimana bisa mengkustomisasinya?

  Kustomisasi tabel yaitu Colspan dan Rowspan sering kali yang banyak memakan waktu untuk dipahami para pelajar Pemrograman Web. Masalah ini dapat dimaklumi karena PHP tidak menyediakan kustomisasi Drag & Drop seperti 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 tentang penerapan CSS
- Demi pengalaman yang bagus, uji cobalah tampilkan kode yang ada pada setiap langkah yang ada agar mengerti kode tersebut untuk apa, efeknya apa


Langkah Membuat Tabel
1.
Jika terdapat colspan dan rowspan maka cara termudah adalah dengan buat desain menggunakan excel atau yang aplikasi yang ada tabelnya

Contoh tabel yang akan dibuat adalah seperti dibawah ini
2.
Setelah dibuat pada excel maka akan terlihat mana yang perlu di colspan dan rowspan serta berapa banyak jumlahnya seperti 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  menggunakan Code Editor yang memiliki syntax highlighter jelas antara PHP dengan HTML, contohnya Notepad++.

Coding jika ditambah menampilkan data tabel adalah seperti 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 jelas adalah untuk mengantisipasi adanya tag yang belum tertutup karena untuk menampilkan datanya memadukan PHP dan HTML. Lihat yang ditandai Awal dan Akhir. Dimana setelah pembuka perulangan "{" PHP ditutup "?>" dan adanya tag PHP lagi saat menutup perulangan. 

  Adanya syntax highlighter jika ada tag yang belum tertutup menjadi lebih mudah untuk mencarinya. Selain syntax perlu untuk membiasakan diri membuat tab-space yang jelas agar rapi dan mudah dibaca.

  Mungkin ada yang bertanya bagian foreach() bagian ini bisa diganti mengganti kode yang umum digunakan untuk pengenalan pemrograman web adalah dibawah ini, karena foreach() biasa digunakan ketika sudah menggunakan 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 bisa tampil namun bentuk tabel belum jelas, bisa dilihat dibawah ini.
  
  Tampilan apa adanya tentu saja tidak menarik, maka tabel tersebut perlu di kustomisasi. Kustomisasi yang akan dilakukan adalah menambahkan garis / border, memberi padding (cari di google kalau belum tau), membuat tulisan di tengah dan memberi warna tabel.

Langkah Kustomisasi Tabel
Kustomisasi dilakukan dengan menggunakan 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 adalah tebal garis, tipe garis, dan warna garis. Contohnya adalah tebal garis 1px, tipe garis solid, dan warna garis menggunakan code hex bisa dicari di google. Kode CSS jadi seperti dibawah ini
td{
   border-width: 1px
   border-style : solid;
   border-color : #ececec;
}
2.
  Jika diterapkan langkah nomor 1 tadi sebetulnya masih ada jarak antar cell sehingga kurang enak dipandang maka perlu untuk menghilangkan jarak tersebut. Caranya sama seperti langkah nomor 1 yaitu dengan Override tag <table>.Selain itu juga sekalian menambahkan attribut untuk membuat tulisan tabel berada di tengah. Kode CSS jadi seperti dibawah ini
table{
   text-align: center; 
   border-collapse: collapse;
}
3.
  Mewarnai Cell dapat dilakukan dengan cara CSS maupun dengan attribut bgcolor yang akan diwarnai adalah 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 seperti dibawah ini.
.mhs{
   background: #c6e2ff;
   color: white;
}
.buku{
   background: #a5c7e9;
   color: black;
}
4. Kode akhir setelah nomor 3 diterapkan adalah menjadi seperti 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 dapat dilihat langsung melalui tautan ini.
  
  Kustomisasi Tabel membuat tampilan menjadi lebih enak dilihat walaupun sudah banyak template tabel HTML namun tak ada salahnya jika tau dasarnya dan caranya mengkustomisasi sendiri tabel yang dibuat. Jika ada yang kurang jelas atau pertanyaan bisa ditanyakan melalui media sosial yang ada pada widget blog ini.


TERIMAKASIH TELAH BERKUNJUNG
SEMOGA BERMANFAAT

Saya seorang programmer dengan fokus developer Web dan Android.