HTML Page Break

In Word/Open Office Writer, you can easily insert a Page Break to start a new page. How to make that in webpage?

If you are reading a webpage from monitor, you actually don't care about page break, because you can easily turn page using the keyboard or scroll the page using your mouse. But when you print it out, you get pages like the one on the left. The second table is separated into 2 pages, which makes the printout look weired.

By adding < p style="page-break-before: always" / > before the second form, we can avoid this weired printout because a page break is inserted for printing, and the result is like the one on the right. When you are reading the web page, you can only feel an empty line between the 2 tables; but printout will be different.

page-break-before and page-break-after are standard CSS2 elements. They work fine both in IE and Firefox. A simple way to add page break into your webpage (printout) is to modify H2 element's CSS:

H2 {page-break-before: always; }
H2.nobreak {page-break-before: avoid; }

because it is very likely that you want to start the header in a new page, and H2.nobreak is prepared for the very first header...

W3C site introduces some other CSS elements that can control printout size, margin, and orientation. It's good to take a look.