Membuat header table pada tiap halaman cetak
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 :
- Membuat header tetap diatas halaman
- Mengatur paragraf dengan css
- Membuat efek kotak tulisan dengan css
- Membuat menu dengan CSS
** Bebas disunting dengan menyebutkan sumber **
