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

  • 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.
  • Kenapa menggunakan css (Cascading Style Sheets)
    CSS sudah tidak asing lagi dikalangan para blogger atau pengembang website karena css sangat mudah digunakan dan cara penulisannya pun sangat gampang diingat. Tapi tahukah anda masih banyak lagi alasan kenapa css menjadi idola para blogger dan pengembang? Dalam artikel ini saya akan mengemukaan alasan-alasan kenapa menggunakan css.
  • Perbedaan html dengan css
    Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan. Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa perbedaan html dan css? Artikel berikut ini akan membantu anda membedakan HTML dengn CSS dari segi fungsi serta penulisan.
  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
  • Membuat form login dengan css
    Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form

Kiriman terbaru