Emulate a table printed on "computer paper"

Discussion in 'HTML' started by David Segall, Sep 25, 2009.

  1. David Segall

    David Segall Guest

    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.
    David Segall, Sep 25, 2009
    #1
    1. Advertising

  2. David Segall wrote:

    > 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.

    --
    -bts
    -Friends don't let friends drive Windows
    Beauregard T. Shagnasty, Sep 25, 2009
    #2
    1. Advertising

  3. David Segall

    Lars Eighner Guest

    In our last episode, <h9in1d$aba$-september.org>, the lovely
    and talented Beauregard T. Shagnasty broadcast on alt.html:

    > David Segall wrote:


    >> 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.


    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.


    --
    Lars Eighner <http://larseighner.com/> September 5869, 1993
    248 days since Rick Warren prayed over Bush's third term.
    Obama: No hope, no change, more of the same. Yes, he can, but no, he won't.
    Lars Eighner, Sep 25, 2009
    #3
  4. David Segall

    dorayme Guest

    In article <h9in1d$aba$-september.org>,
    "Beauregard T. Shagnasty" <> wrote:

    > David Segall wrote:
    >
    > > 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_2
    > > 50x250.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.


    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...

    --
    dorayme
    dorayme, Sep 26, 2009
    #4
  5. Gazing into my crystal ball I observed dorayme
    <> writing in
    news::

    > In article <h9in1d$aba$-september.org>,
    > "Beauregard T. Shagnasty" <> wrote:
    >
    >> David Segall wrote:
    >>
    >> > 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_2 50x250.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.

    >
    > 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.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Sep 26, 2009
    #5
  6. dorayme wrote:

    > 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* :)

    --
    -bts
    -Friends don't let friends drive Windows
    Beauregard T. Shagnasty, Sep 26, 2009
    #6
  7. David Segall

    dorayme Guest

    In article <h9jmno$hvt$-september.org>,
    "Beauregard T. Shagnasty" <> wrote:

    > dorayme wrote:
    >
    > > 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?).


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

    --
    dorayme
    dorayme, Sep 26, 2009
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Alvin Bruney [MVP]

    Re: emulate Win. app lookup in ASP.NET

    Alvin Bruney [MVP], Feb 14, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    397
    Steve Bywaters
    Feb 16, 2004
  2. VB Programmer

    How to emulate Word mail merge in HTML?

    VB Programmer, May 20, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    1,128
    VB Programmer
    May 20, 2004
  3. Forty Two

    Can ASP.NET emulate a Telnet host?

    Forty Two, Dec 24, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    4,710
    Forty Two
    Dec 25, 2004
  4. Brian Bischof

    Emulate HREF Mailto: in a form

    Brian Bischof, Jan 13, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    3,554
    Brian Bischof
    Jan 13, 2005
  5. Jochen Daum
    Replies:
    1
    Views:
    2,715
Loading...

Share This Page