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

  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • 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.
  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.
  • Cara membuat dan menyisipkan CSS
    Panduan Cara membuat dan menyisipkan CSS pada halaman web

Kiriman terbaru