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 **

Komentar

Halaman Lainya

  • 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 efek kotak tulisan dengan css
    Panduan Cara Membuat efek kotak tulisan dengan css
  • Cara membuat css dengan dreamweaver
    Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver.
  • Membuat efek gambar di blog dengan css
    CSS sangat felxibel bisa digunakan untuk banyak keperluan, berbagai media, semua platform dan semua sistem pengelola konten (wordpress, blogger, joomla dll). Penggunaanya juga sangat mudah sehingga kita bisa brekreasi dengan tulisan maupun gambar. Kali ini saya akan berbagi cara bagaimana menyisipkan efek gambar dengan css pada blogger.
  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.

Kiriman terbaru