I need need to use page break inside table rows. But the problem is when i use page break after row(tr), that row(tr) is drawing till end of page when printing. Any ideas to fix this problem.
source:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<table border="1" >
<thead>
<tr><th>heading</th><th>heading 2</th></tr>
</thead>
<tfoot>
<tr><td>footer 1</td><td>footer 2</td></tr>
</tfoot>
<tr>
<td>x</td> <td>x1</td>
</tr>
<tr>
<td>x</td> <td>x2</td>
</tr>
<tr>
<td></td> <td>
<div style="page-break-after: always;"></div>
</td>
</tr>
<tr>
<td>x</td> <td>x3</td>
</tr>
</tbody>
</table>
</body>
</html>
screen shot:
first page,
second page,
the reason is <div style="page-break-after: always;"></div>
always - Always insert a page break after the element
For instance, with avoid value the issue is not observed on the print page.
CSS page-break-after Property
Related
EDIT: The following outlined example works in thunderbird as well.
I'm currently learning how to create emails using foundation for emails. What I currently want to do is to create an "expanded button" within a grid. I've come up with the following HTML by referencing the examples outlined for grid here and examples outlined for expanded button here.
The following is what I came up with, my thinking based on what I have read thus far is that I have to add the "expanded button" within the column of my grid, so I have the following HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
</head>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="columns first last">
<table>
<tr>
<table class="row">
<tbody>
<tr>
<column>
<table class="button expanded">
<tr>
<td>
<table>
<tr>
<td>
<center data-parsed><a href="#"
align="center"
class="float-center">Reset Password</a>
</center>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
<table class="button small-expanded">
<tr>
<td>
<table>
<tr>
<td>Expand small only</td>
</tr>
</table>
</td>
</tr>
</table>
</column>
</tr>
</tbody>
</table>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>
It looks exactly as I expect it to look like in Firefox, however it looks incorrect in outlook. For example, this is what it appears as in Firefox:
Here is what it looks like in outlook when I send an email:
For context, I'm trying to create an typical "Reset Password" email template. Do note that I have run the HTML through the CSS inliner located here, as instructed by the documentation.
This issue is resolved in version 2.3.1, but their official download link was not updated to serve the latest version of the code, hence I spent time trying to resolve an issue that was already rectified. While the button is now expanded, there is an issue with the anchor link in outlook.
See https://github.com/foundation/foundation-emails/issues/415 for more information.
I have attached this photo to show you what the question is asking with correct formatting.
Click here to see my output with the code used below.
<h1>7.
<table>
<tr>
<th colspan="3">1</th>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</h1>
I used the rowspan and colspan as instructed, and yet my table is still missing the larger spaces as the example shows is needed, so I am looking for guidance on what I am missing. The numbers are aligned correctly, just missing the spaces. I know the code should seem fine, but the program checker is saying it's wrong.
<!DOCTYPE html>
<html>
<head>
<style>
table.td {
bold: normal;
}
</style>
</head>
<body>
<h1>7</h1>
<table style="text-align:center;">
<tr >
<th colspan="3"><h1>1</h1></th>
</tr>
<tr>
<td rowspan="2"><h1>2</h1></td>
<td><h1>3</h1></td>
<td><h1>4</h1></td>
</tr>
<tr>
<td><h1>5</h1></td>
<td><h1>6</h1></td>
</tr>
</table>
</body>
</html>
Making a simple table and I noticed something odd when I was trying to do something with alternate rows and javascript and it did not work. When I looked at the page in inspector in Firefox and Chrome I noticed extra rows between each one of my rows. It even does it when I just have the table with no CSS or JS.
I can work around this it's not not a problem I am just wondering why they are there?
This is my page:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>table test</title>
</head>
<body>
<table>
<tr>
<th>title 01</th>
<th>title 02</th>
</tr>
<tr>
<td>thing 01</td>
<td>attribute 01</td>
<tr>
<tr>
<td>thing 02</td>
<td>attribute 02</td>
<tr>
<tr>
<td>thing 03</td>
<td>attribute 03</td>
<tr>
</table>
</body>
</html>
This is what the code looks like in Firefox inspector:
On the 2nd, 3rd and 4th rows you're using an opening <tr> where you should be using a closing </tr>
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>table test</title>
</head>
<body>
<table>
<tr>
<th>title 01</th>
<th>title 02</th>
</tr>
<tr>
<td>thing 01</td>
<td>attribute 01</td>
</tr> <!-- CHANGED TO CLOSING </tr> -->
<tr>
<td>thing 02</td>
<td>attribute 02</td>
</tr> <!-- CHANGED TO CLOSING </tr> -->
<tr>
<td>thing 03</td>
<td>attribute 03</td>
</tr> <!-- CHANGED TO CLOSING </tr> -->
</table>
</body>
</html>
I have to make a table using the table element in HTML. The table should look like this: required Table image
But at the moment my table looks like this: My Table image
I've tried to fix it numerous times. but I just can not figure it out.
heres my HTML code aswell.
Please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td> Advertisement Space </td>
<td> Blog Links </td>
</tr>
<tr>
<td> Main Content Area</td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
The HTML below creats a table like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td colspan=2> Advertisement Space </td>
</tr>
<tr>
<td> Main Content Area</td>
<td> Blog Links </td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
What you need to change:
Set colspan for the "Advertisment Space"
Move "Blog Links" to the same row as "Main Content Area"
Although I must say that tables are absolutely not state of the art when it comes to designing a website layout. <table> is used do display data (like a list or, well, a table).
<div> and <span> should be used to apply a layout to a website
Just correct with:
<td rowspan="2"> Blog Links </td>
Side comment: you seem to be building the layout of the page using html tables. Bad idea, read this.
Also, html attributes, to be correct, require quotes, i.e. <elem attrib="value">
Close off your table:
<table border="1" width>Table data...</table>
Give menu rowspan 4 and change accordingly.
How can I write a stylesheet to make a particular div element be repeated at the top of every page of a print out?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
thank you
"i was wondering if there is any way to print a div in all of printing html pages". As I understand you need to google for master pages. If you want header for multiple pages you should use PHP to deliver it.