Cara Membagi halaman hasil cetak printer dengan css

Tips CSSJika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulitkan kita untuk membaca ataupun mengarsipkanya.

Jika anda seorang pengembang aplikasi web, ini juga sering terjadi pada saat anda membuat laporan yang berisi sebuah daftar yang menampilkan banyak record. Jika dicetak pasti hasilnya tidak konsisten jumlahnya bisa halaman pertama 10, halaman berikutnya 12 dan seterusnya. Dan banyak lagi contoh lainya.

Untuk itu kita bisa menggunakan perintah css, agar hasil cetaknya lebih rapi dan konsiten pada setiap halamanya. Silahkan gunakan kode berikut pada halaman html/css anda.

<style type="text/css" media="print">
    .page-break  { display:block; page-break-before:always; }
</style>

Kemudian tambahkan kode berikut pada setiap bagian yang ingin dipisah halaman cetaknya.

<div class="page-break"></div>

Dengan kode diatas otomatis pada saat sebuah halaman web kita cetak maka akan dipisah ke halaman berikutnya.

 

Semoga bermanfaat.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Mengatur gambar dengan css
    CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam kode html baik itu tulisan, tabel dan gambar maupun objek lainya. Kali ini saya akan berbagi cara mengatur gambar dengan css agar dapat disajikan lebih hemat tempat dan hemat kode dan tentunya menarik.
  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Membuat tampilan layout 3 kolom dengan css
    Membuat layout halaman web dengan css sangatlah mudah dan tidak menggunakan perintah yang rumit. Pada artikel singkat berikut ini saya akan menjelaskan bagaiman cara membuat tampilan halaman web dengan susunan tiga kolom. Contoh yang saya buat sengaja dirancang sederhana agar dapat digunakan untuk berbagai keperluan. Lihat kode berikut ini :
  • Membuat bingkai gambar dengan css
    Kemampuan css dalam memperindah tampilan sudah tidak diragukan lagi, apalagi dengan hadirnya css3 sebagai pengembangan dari versi sebelumnya memang menambah kemampuan serta fleksibilitasnya dalam urusan pengaturan tampilan halaman web. Kali ini saya akan sedikit berbagi tentang bagaimana membuat bingkai gambar dengan css.
  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.

Kiriman terbaru