Emulate a table printed on "computer paper"

[David Segall]

I would like to add a table to a web page so that it looks as if it
was printed on the continuous stationery used on early main frame
computers. Here's an example
<http://imghost.indiamart.com/data/O/9/MY-475286/continuous-computer-paper_250x250.jpg>
of how it looked. I would be prepared to omit the sprocket holes if
this makes the task much simpler.

 

[Beauregard T. Shagnasty]

I would like to add a table to a web page so that it looks as if it
was printed on the continuous stationery used on early main frame
computers. Here's an example
<http://imghost.indiamart.com/data/O/9/MY-475286/continuous-computer-paper_250x250.jpg>
of how it looked. I would be prepared to omit the sprocket holes if
this makes the task much simpler.

...and even late-model dot-matrix printers...

For color bars, use CSS to style every other row.

<style type="text/css">
tr.odd { background-color: #ccffcc; }
tr.even { background-color: transparent; }
</style>


<table>
<tr class='odd'><td>blah</td><td>blah</td></tr>
<tr class='even'><td>blah</td><td>blah</td></tr>
....

Or leave out "class='even'" if you don't want to explicitly style the
white bars (the body background should be styled as white). As far as
the holes go, find a graphic of a hole and include an extra <td> on each
end of every row and put the graphic in it.

 

[Lars Eighner]

David Segall wrote:

..and even late-model dot-matrix printers...

For color bars, use CSS to style every other row.

<style type="text/css">
tr.odd { background-color: #ccffcc; }
tr.even { background-color: transparent; }
</style>

<table>
<tr class='odd'><td>blah</td><td>blah</td></tr>
<tr class='even'><td>blah</td><td>blah</td></tr>
...

Or leave out "class='even'" if you don't want to explicitly style the
white bars (the body background should be styled as white). As far as
the holes go, find a graphic of a hole and include an extra <td> on each
end of every row and put the graphic in it.

You can get the computer paper look with one side of the sprocket holes with
a background image, made much longer that it could possibly be in any
resolution, tiled horizontally. The image would not have to be very tall
unless you also wanted to try to do something to indicate the perforations
at the folds. You can also get the other set of sprocket holes in a similar
way, but it is a tad more complicated. The drawback is that you will be
unable to make the text line up with the little lines on the "paper" for any
browser but your own with your own settings. That might or might not be
fatal to what you are trying to do. After all, reports on this type of
paper were seldom lined up with the kind of precision that was used for
preprinted forms. If you just want an impression reminiscent of old
computer stuff, the background idea may work well enough.

 

[dorayme]

..and even late-model dot-matrix printers...

For color bars, use CSS to style every other row.

<style type="text/css">
tr.odd { background-color: #ccffcc; }
tr.even { background-color: transparent; }
</style>


<table>
<tr class='odd'><td>blah</td><td>blah</td></tr>
<tr class='even'><td>blah</td><td>blah</td></tr>
...

Or leave out "class='even'" if you don't want to explicitly style the
white bars (the body background should be styled as white). As far as
the holes go, find a graphic of a hole and include an extra <td> on each
end of every row and put the graphic in it.

Yes, indeed to all. But, just to mention, in case the styling is not so
crucial, and especially if there is a lot of updating (which would
involve careful classing not to bugger the order of the colours up),
there is javascipt - *much easier*!

<script src="table_row_stripe.js" type="text/javascript" charset="utf-8">
</script>

in the head and nothing else, table_row_stripe.js being:

//From http://davious.org/onepagers/anewstripe.html, which was adapted
from http://www.alistapart.com/articles/zebratables/
onload = function() { stripe ('spreadsheet') };
function stripe(id) {
var table = document.getElementById(id);
if (! table) { return; }

var trs = table.getElementsByTagName("tr");

for (var i = 0; i < trs.length; i += 2) {
trs.className += "even";
}
}

and in the CSS at least something like:

#spreadsheet tr.even td {background: #cfc; color: #000;}
#spreadsheet th {background: #cfc; color: #000;}

You might even be able to modify to include the 'oles?

Talking of holes, this might suggest background images to those of us in
semantic mood. Either on the table, the cells or perhaps boldest of all,
the whole lot, stripes and all, the body. There would be line-up
problems but perhaps this is not so crucial...

 

[Adrienne Boswell]

Gazing into my crystal ball I observed dorayme

..and even late-model dot-matrix printers...

For color bars, use CSS to style every other row.

<style type="text/css">
tr.odd { background-color: #ccffcc; }
tr.even { background-color: transparent; }
</style>


<table>
<tr class='odd'><td>blah</td><td>blah</td></tr>
<tr class='even'><td>blah</td><td>blah</td></tr>
...

Or leave out "class='even'" if you don't want to explicitly style the
white bars (the body background should be styled as white). As far as
the holes go, find a graphic of a hole and include an extra <td> on
each end of every row and put the graphic in it.

Yes, indeed to all. But, just to mention, in case the styling is not
so crucial, and especially if there is a lot of updating (which would
involve careful classing not to bugger the order of the colours up),
there is javascipt - *much easier*!

<script src="table_row_stripe.js" type="text/javascript"
charset="utf-8"> </script>

in the head and nothing else, table_row_stripe.js being:

//From http://davious.org/onepagers/anewstripe.html, which was adapted
from http://www.alistapart.com/articles/zebratables/
onload = function() { stripe ('spreadsheet') };
function stripe(id) {
var table = document.getElementById(id);
if (! table) { return; }

var trs = table.getElementsByTagName("tr");

for (var i = 0; i < trs.length; i += 2) {
trs.className += "even";
}
}

and in the CSS at least something like:

#spreadsheet tr.even td {background: #cfc; color: #000;}
#spreadsheet th {background: #cfc; color: #000;}

You might even be able to modify to include the 'oles?

Talking of holes, this might suggest background images to those of us
in semantic mood. Either on the table, the cells or perhaps boldest of
all, the whole lot, stripes and all, the body. There would be line-up
problems but perhaps this is not so crucial...

And this is even easier server side, again set up the colors in your
stylesheet or in the style element, then as you are looping though the
records, if a row number is divisible by 2, then it's even and gets
class even.

 

[Beauregard T. Shagnasty]

Yes, indeed to all. But, just to mention, in case the styling is not
so crucial, and especially if there is a lot of updating (which would
involve careful classing not to bugger the order of the colours up),
there is javascipt - *much easier*!

Easier than manual maintenance to be sure .. but doesn't work if
JavaScript is off (you were waiting for that, right?).

Since my tables are all tabular data - and come from tables in the
server's database - I do it all at the server, with PHP.

print "<table>\n";
print "<tbody>\n";
do {
print "<tr class='" . ($class ? "even" : "odd") . "'>";
print "<td".$cname."</td>";

etc.

*much more easier*

 

[dorayme]

Easier than manual maintenance to be sure .. but doesn't work if
JavaScript is off (you were waiting for that, right?).

Yes, you are right. Perhaps my "in case the styling is not so crucial"
unconsciously gave you the clue on this. <g>