What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

need help with html for printing

cwdavi1

New member
I'm creating html for printing only. It will be converted to pdf. The screenshot is what I want, a table displayed wrapped in 4 columns, legal landscape ,I copied/pasted to show column wrap I want.. The columns in my html don't work, output is in a single column no matter how I view it. I've been retired for 15 years and forgotten html. I've spent several days trying to figure this out. I have been able to fix this in word by modifying the layout then saving as html but I can't figure out how they're doing it. Word html is a mess.

The html is created by python from json data. I probably should have just written a wordpress plugin for this but don't know wordpress and thought python to html would be easier.

I will greatly appreciate any pointers, including how I should have done this. Thank you. This is my sample code,.

<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: legal landscape;
margin: 0.5cm;
}
.container {
column-count: 4;
column-width: 25%;
column-fill: auto;
column-span: none;
break-inside: avoid;
margins: 2px;
padding: 0px;
orphans: 3;
}
table {
border-collapse:separate;
border-spacing: 0;
cellspacing=0;
font-family:"Arial Narrow",sans-serif;
font-size: 9.0pt;
}
tr {
width: 25%;
float: left;
height: auto;
vertical-align: text-top;
break-inside: avoid;
}
th {
column-span: 3;
text-align: center;
font-size: large;
font-weight: bold;
column-break-after: avoid;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr><td colspan="3";><center>Revised 03/08/2023<br><b><font size="+2";>Acme Widgets Inc.<br>
Road Runner Division<br>
Road Runner Sightings<br>
</center></td></tr>
<tr><th>Sunday</th></tr>
<tr><td >7:30 am</td>
<td>Near the big rock.<br>US-441</td>
<td><b>El Paso</></td></tr>
<tr><td >8:00 am</td>
<td>On top of big rock.><br>Rte 666</td>
<td><b>Little Rock</></td></tr>
<tr><td >8:00 am</td>
<td><b>Under the bridge<br>SE 44th Ave</td>
<td><b>Yuma</></td></tr>
<tr><th>Monday</th></tr>
<tr><td >7:00 am</td>
<td>Near the big rock.<br>US-441</td>
<td><b>El Paso</></td></tr>
<tr><td >9:00 am</td>
<td>On top of big rock.><br>Rte 666</td>
<td><b>Little Rock</></td></tr>
<tr><td >10:00 am</td>
<td><b>Under the bridge<br>SE 44th Ave</td>
<td><b>Yuma</></td></tr>
</div></table></body></html>
 

Attachments

  • SharedScreenshot.jpg
    SharedScreenshot.jpg
    192.6 KB · Views: 3
I'm creating html for printing only. It will be converted to pdf. The screenshot is what I want, a table displayed wrapped in 4 columns, legal landscape ,I copied/pasted to show column wrap I want.. The columns in my html don't work, output is in a single column no matter how I view it. I've been retired for 15 years and forgotten html. I've spent several days trying to figure this out. I have been able to fix this in word by modifying the layout then saving as html but I can't figure out how they're doing it. Word html is a mess.

The html is created by python from json data. I probably should have just written a wordpress plugin for this but don't know wordpress and thought python to html would be easier.

I will greatly appreciate any pointers, including how I should have done this. Thank you. This is my sample code,.

<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: legal landscape;
margin: 0.5cm;
}
.container {
column-count: 4;
column-width: 25%;
column-fill: auto;
column-span: none;
break-inside: avoid;
margins: 2px;
padding: 0px;
orphans: 3;
}
table {
border-collapse:separate;
border-spacing: 0;
cellspacing=0;
font-family:"Arial Narrow",sans-serif;
font-size: 9.0pt;
}
tr {
width: 25%;
float: left;
height: auto;
vertical-align: text-top;
break-inside: avoid;
}
th {
column-span: 3;
text-align: center;
font-size: large;
font-weight: bold;
column-break-after: avoid;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr><td colspan="3";><center>Revised 03/08/2023<br><b><font size="+2";>Acme Widgets Inc.<br>
Road Runner Division<br>
Road Runner Sightings<br>
</center></td></tr>
<tr><th>Sunday</th></tr>
<tr><td >7:30 am</td>
<td>Near the big rock.<br>US-441</td>
<td><b>El Paso</></td></tr>
<tr><td >8:00 am</td>
<td>On top of big rock.><br>Rte 666</td>
<td><b>Little Rock</></td></tr>
<tr><td >8:00 am</td>
<td><b>Under the bridge<br>SE 44th Ave</td>
<td><b>Yuma</></td></tr>
<tr><th>Monday</th></tr>
<tr><td >7:00 am</td>
<td>Near the big rock.<br>US-441</td>
<td><b>El Paso</></td></tr>
<tr><td >9:00 am</td>
<td>On top of big rock.><br>Rte 666</td>
<td><b>Little Rock</></td></tr>
<tr><td >10:00 am</td>
<td><b>Under the bridge<br>SE 44th Ave</td>
<td><b>Yuma</></td></tr>
</div></table></body></html>
Nice graph. I'm used to reading it horizontal, day to day. Then time, up to down. Location. But this is you. A runner? So you set the time first on the first column. Good. How do you print it? Just use a print software and print it on your pc.
First set the global attributes on body tag elements to width="100%" height="100% or how much space you think it will take up". Then you code the html page starting from that judge on your own screen. It automatically adjust with software to other screens and pcs.
 
Last edited:
Back
Top