Membuat header table pada tiap halaman cetak

Membagi halaman printout dengan CSS

Format cetak laporan yang baik tentunya sangatlah penting  dalam membuat sebuah aplikasi komputer, baik jenis aplikasi desktop maupun berbasis web. Sebuah laporan biasanya disajikan dalam bentuk tabel yang menampilkan sekumpulan data yang disimpan dalam database. Jumlah data yang tersimpan semakun lama pasti semakin bertambah seiring banyaknya proses pendataan yang dilakukan. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda. Lihat contoh berikut :

No. Nama Tempat Lahir Tanggal lahir Jenis Kelamin Agama Pendidikan Pendapatan
1. ALI Sungai Bilu 15-10-1989 Laki-Laki Islam S1 Rp.3.000.000
2. RUDI Martapura 12-01-1981 Laki-Laki Islam S2 Rp.3.500.000
3. dst dst dst dst dst dst dst

Misal data yang ditampilkan ada 1000 (lebih banyak dari contoh diatas) sehingga laporan jika dicetak akan melebihi dari ruang yang tersedia di kertas. Dan laporan tersebut jika anda cetak akan menghasilkan beberapa lembar laporan. Hasilnya cetaknya, baris pertama yang berisikan no, nama, alamat dst hanya tercetak sekali yaitu pada halaman awal. Halaman berikutnya hanya mencetak data pada baris selanjutnya. Hal ini tentunya akan terlihat kurang baik dan bahkan menyulitkan kita dalam membaca laporan tersebut. Bagaimana membuat laporan hasil cetak agar tabel header diulang pada setiap halaman?

Untu menghasilkan laporan cetak dengan tabel header pada tiap halaman, kita bisa mengguanakan css. Caranya :

Pertama anda harus susun kode html untuk membuat tabel laporan seperti berikut (anda bisa juga sesuaikan kolom-kolom laporanya):

<table cellspacing="1" cellpadding="5" border="1">
    <thead>
  <tr>
  <th>No.</th>
  <th>Nama</th>
  <th>Tempat Lahir</th>
  <th>Tanggal lahir</th>
  <th>Jenis Kelamin</th>
  <th>Agama</th>
  <th>Pendidikan</th>
  <th>Pendapatan</th>
  </tr>
    </thead>
    <tbody>
  <tr>
  <td>1.</td>
  <td>ALI</td>
  <td>Sungai Bilu</td>
  <td>15-10-1989</td>
  <td>Laki-Laki</td>
  <td>Islam</td>
  <td>S1</td>
  <td>Rp.3.000.000</td>
  </tr>
  <tr>
  <td>2.</td>
  <td>RUDI</td>
  <td>Martapura</td>
  <td>12-01-1981</td>
  <td>Laki-Laki</td>
  <td>Islam</td>
  <td>S2</td>
  <td>Rp.3.500.000</td>
  </tr>
  <tr>
  <td>3.</td>
  <td>dst</td>
  <td>dst</td>
  <td>dst</td>
  <td>dst</td>
  <td>dst</td>
  <td>dst</td>
  <td>dst</td>
  </tr>
....tambahkan baris berikutnya disini
    </tbody>
</table>

Kemudian tambahkan kode css berikut pada halaman laporan di bagian <head>..</head>

<style type="text/css" media="print">
   table thead 
   {
    display: table-header-group;
   }
</style>

Kode diatas berfungsi untuk mengulang menampilkan header tabel (thead) pada setiap lembar halaman cetak anda. Mudah kan? Sekarang semua halaman laporan akan memiliki bagian judul tabel dan tentunya memudahkan kita menganalisa hasil laporanya.

Semoga bermanfaat

Zainal Hakim

Baca juga :

 

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).
  • Membuat halaman web dengan latar background bintang dengan css
    Website atau halaman web biasanya dibuat semenarik mungkin, bisa dengan menggunakan gambar, tulisan, animasi ataupun dengan hiasan objek lainnya. Berikut ini saya akan berbagi tentang bagaimana membuat halaman web dengan latar atau background bintang dengan perintah CSS
  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.

Kiriman terbaru