background shading for even/odd table rows visible when printed?

I'm trying to learn the use of CSS. I have a tabular set of data which I
would like to display with each row shaded differently (even/odd) to make
it easier to see along each row.

I'm using CSS style information in the HTML page (rather than a separate
CSS file. I've laid out the data so that it uses the following format:

table
odd table row
hr
even table row
hr
...

When I view the page in a Gecko-based browser (I'm using SeaMonkey), the
even/odd shading appears just fine. When I print the document, they don't
show up. I've tried print preview, and even printing to a PDF, and still
the rows just have a white background.

The data is very specific, so I'm using some specific widths for data
columns. This is because the size of the data will never change.

If you need me to post the enire HTML file somewhere, I'll try to find
a place to do that (I've haven't done it before). Hopefully, the snippets
I've included below will be enough?

Thanks for any help.

Here is the style info:

..table {
padding-top: 00px;
padding-bottom: 00px;
padding-left: 00px;
padding-right: 00px;
border: 1px solid;
}
..even-tr {
background-color: #bbbbbb;
}
..odd-tr {
background-color: #dddddd;
}

td.hr hr {
display: none;
}

td.hr {
border-top: solid 1px black;
}

..td-day {
text-align: center;
padding-left: 0px;
padding-right: 0px;
border-right: 0px;
border-left: 0px;
line-height: 14px;
width: 40px;
font-family: "Courier New";
font-size: 12px;
}
..td-data {
text-align: center;
padding-left: 0px;
padding-right: 0px;
border-right: 0px;
border-left: 0px;
line-height: 14px;
width: 40px;
font-family: "Courier New";
font-size: 12px;
}
..td-center {
padding-left: 0px;
padding-right: 0px;
border-right: 0px;
border-left: 0px;
line-height: 14px;
width: 5px;
}


And here is a sample of the table:

<table class="table" cellpadding="0" cellspacing="0">
<tr class="odd-tr">
<td class="td-day" ></td>
<td class="td-data" colspan="4">Jan</td>
<td class="td-data" colspan="4">Feb</td>
<td class="td-data" colspan="4">Mar</td>
<td class="td-data" colspan="4">Apr</td>
<td class="td-data" colspan="4">May</td>
<td class="td-data" colspan="4">Jun</td>
<td class="td-data" colspan="4">Jul</td>
<td class="td-data" colspan="4">Aug</td>
<td class="td-data" colspan="4">Sep</td>
<td class="td-data" colspan="4">Oct</td>
<td class="td-data" colspan="4">Nov</td>
<td class="td-data" colspan="4">Dec</td>
</tr>
<tr >
<td class=hr colspan=49 height=0><HR size=1 /></td>
</tr>
<tr class="even-tr" style="bottom-padding: solid 1px black">
<td class="td-day" >01</td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
<td class="td-center"></td>
<td class="td-data">0725</td>
<td class="td-data">1656</td>
<td class="td-center"></td>
</tr>
</table>

Mark Hansen wrote:

I'm trying to learn the use of CSS. I have a tabular set of data which I
would like to display with each row shaded differently (even/odd) to make
it easier to see along each row.

I'm using CSS style information in the HTML page (rather than a separate
CSS file. I've laid out the data so that it uses the following format:

When I view the page in a Gecko-based browser (I'm using SeaMonkey), the
even/odd shading appears just fine. When I print the document, they don't
show up. I've tried print preview, and even printing to a PDF, and still
the rows just have a white background.

Browsers typically do not print backgrounds unless the user has
configured an option to do so. Perhaps you have not configured it to do so?

If you use SeaMonkey, do File, Page Setup, and you will see the option.

On 12/13/08 12:19, C A Upsdell wrote:

Mark Hansen wrote:
I'm trying to learn the use of CSS. I have a tabular set of data which I
would like to display with each row shaded differently (even/odd) to make
it easier to see along each row.

I'm using CSS style information in the HTML page (rather than a separate
CSS file. I've laid out the data so that it uses the following format:

When I view the page in a Gecko-based browser (I'm using SeaMonkey), the
even/odd shading appears just fine. When I print the document, they don't
show up. I've tried print preview, and even printing to a PDF, and still
the rows just have a white background.

Browsers typically do not print backgrounds unless the user has
configured an option to do so. Perhaps you have not configured it to do so?

If you use SeaMonkey, do File, Page Setup, and you will see the option.

Thanks, I just caught that :-\

It is printing the shading now.

Thanks,

Mark Hansen wrote:

I have a tabular set of data
which I would like to display with each row shaded differently
(even/odd) to make it easier to see along each row.

You need to use classes, e.g. <tr class="even"> for evenly-numbered rows.
Then styling gets easy. To add the class attributes, maybe you can use a
nice programmable editor (like Emacs), or maybe you can modify the program
code that generates the markup.

There's no way in CSS as currently defined and implemented to refer to odd
or even rows using selectors other than based on class attributes. Well, you
could use a selector list like
tr:first-child, tr:first-child tr tr, tr:first-child tr tr tr tr, ...
to refer to odd rows, but a) it isn't supported by IE 6 and b) it isn't
really any easier than adding the class attributes, as a rule.

I'm using CSS style information in the HTML page (rather than a
separate CSS file.

Why?

I've laid out the data so that it uses the
following format:

table
odd table row
hr
even table row
hr

If that's what it looks like, you have malformed tag soup, so all bets are
off. You cannot just throw hr elements between table rows. And if you do, a
browser may legitimately throw your document at you, start playing towers of
Hanoi, and say "oink oink".

If you need me to post the enire HTML file somewhere, I'll try to find
a place to do that (I've haven't done it before).

You should really learn how to upload an HTML document onto a web server, if
you plan to author web pages. And you'll be surprised, several times, when
you'll learn why posting a URL is essential. For example, you'll meet Quirks
Mode, Doctype sniffing, and HTTP headers, as well as some complicated
issues.

Hopefully, the
snippets I've included below will be enough?

Oh well... one can see that you _are_ using class attributes (somewhat
redundantly really, since you can use them for even rows only - odd rows can
be covered by your general declarations for tr elements) and you are using
<hr> elements inside table cells, which is valid but clumsy. If you want
borders between rows, for example, set borders for cells suitably. The
readability of the table in a reasonably wide (say, 500 pixels) browser
window is poor since the cells run together - you should set some cell
padding to prevent that.

.even-tr {
background-color: #bbbbbb;
}

You should always set text color when you set background, and vice versa.

td.hr hr {
display: none;
}

td.hr {
border-top: solid 1px black;
}

I think I see what you are up to, but it's really pointless. Drop the hr as
it purely a visual divider here. For visual tuning, it's OK to rely on CSS
in most cases.

Regarding the problem you described, "When I print the document, they don't
show up", the answer is that this is how things are supposed to work. When
you set background color (or background image), it will normally not be used
on print. If you are not happy with the print rendering, you have to work on
it taking this into account.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

On 12/13/08 12:51, Jukka K. Korpela wrote:

Mark Hansen wrote:

I have a tabular set of data
which I would like to display with each row shaded differently
(even/odd) to make it easier to see along each row.

You need to use classes, e.g. <tr class="even"> for evenly-numbered rows.
Then styling gets easy. To add the class attributes, maybe you can use a
nice programmable editor (like Emacs), or maybe you can modify the program
code that generates the markup.

I am using classes. My "tr" element looks like this:

<tr class="tr-even">...

A sample was included in my OP.

There's no way in CSS as currently defined and implemented to refer to odd
or even rows using selectors other than based on class attributes. Well, you
could use a selector list like
tr:first-child, tr:first-child tr tr, tr:first-child tr tr tr tr, ...
to refer to odd rows, but a) it isn't supported by IE 6 and b) it isn't
really any easier than adding the class attributes, as a rule.

I'm using CSS style information in the HTML page (rather than a
separate CSS file.

Why?

It was easier for this specific task.

I've laid out the data so that it uses the
following format:

table
odd table row
hr
even table row
hr

If that's what it looks like, you have malformed tag soup, so all bets are
off. You cannot just throw hr elements between table rows. And if you do, a
browser may legitimately throw your document at you, start playing towers of
Hanoi, and say "oink oink".

If you need me to post the enire HTML file somewhere, I'll try to find
a place to do that (I've haven't done it before).

You should really learn how to upload an HTML document onto a web server, if
you plan to author web pages. And you'll be surprised, several times, when
you'll learn why posting a URL is essential. For example, you'll meet Quirks
Mode, Doctype sniffing, and HTTP headers, as well as some complicated
issues.

Thanks, I've since found a free web-hosting service. I agree it would have
been better to post a link to the actual page. I just didn't know if it
was necessary in this case.

Hopefully, the
snippets I've included below will be enough?

Oh well... one can see that you _are_ using class attributes (somewhat
redundantly really, since you can use them for even rows only - odd rows can
be covered by your general declarations for tr elements) and you are using
hr> elements inside table cells, which is valid but clumsy. If you want
borders between rows, for example, set borders for cells suitably. The
readability of the table in a reasonably wide (say, 500 pixels) browser
window is poor since the cells run together - you should set some cell
padding to prevent that.

.even-tr {
background-color: #bbbbbb;
}

You should always set text color when you set background, and vice versa.

Oh, right. I remember reading that. I'll fix it.

td.hr hr {
display: none;
}

td.hr {
border-top: solid 1px black;
}

I think I see what you are up to, but it's really pointless. Drop the hr as
it purely a visual divider here. For visual tuning, it's OK to rely on CSS
in most cases.

When I drop the HR, then the line between rows disappears. I tried setting
the bottom border on the "td" elements, but could never get it to appear.

Regarding the problem you described, "When I print the document, they don't
show up", the answer is that this is how things are supposed to work. When
you set background color (or background image), it will normally not be used
on print. If you are not happy with the print rendering, you have to work on
it taking this into account.

Yes, I had the browser set to not print the backgrounds (doh!).

To be honest, I started using the even/odd shading before I was able to get
the lines between rows to show up. Now that I have the lines between rows,
I don't really need the shading.

By the way, the only "customer" for this page is me, but I am doing it as
a learning experience, so I appreciate all the comments and will go through
them and see what I can apply.

Thanks again for all your help.

In article <1d4df$49442489$414ebc3d$15747 (AT) EVERESTKC (DOT) NET>,
Mark Hansen <meh (AT) NOSPAMwinfirst (DOT) com> wrote:

When I drop the HR, then the line between rows disappears. I tried setting
the bottom border on the "td" elements, but could never get it to appear.

Use your new found free server to show us.

even/odd shading ...

As far as screen appearance, if it is not super important and you don't
mind if a few people don't see the striping effect, you can use
javascript and leave your HTML uncluttered by classes.

--
dorayme

On 12/13/08 13:39, dorayme wrote:

In article <1d4df$49442489$414ebc3d$15747 (AT) EVERESTKC (DOT) NET>,
Mark Hansen <meh (AT) NOSPAMwinfirst (DOT) com> wrote:

When I drop the HR, then the line between rows disappears. I tried setting
the bottom border on the "td" elements, but could never get it to appear.


Use your new found free server to show us.

Here it is:

<http://www.markehansen.07x.net/sunset.html>

As I said before, I really new to CSS and am reading books and trying my
hand at it. There's a lot to learn, and it seems to be going very slowly
for me (old dog, new tricks and all that).

What I was really trying to do here was make it easer to follow a row
across the page. I start with the day of the month on the left edge,
then follow along to the proper month.

This is working for me now, but I am of course interested in anything
I should be doing differently.

Thanks (to all) for all the help.

even/odd shading ...

As far as screen appearance, if it is not super important and you don't
mind if a few people don't see the striping effect, you can use
javascript and leave your HTML uncluttered by classes.

I see. Thanks.

Mark Hansen wrote:

Here it is:

http://www.markehansen.07x.net/sunset.html

With narrower windows or larger font sizes, spaces between the table
elements get smaller and smaller, to the point that the numbers can end
being a continuous series of digits with nothing to indicate where
numbers begin and end.

You should create some horizontal padding between the numbers, and/or
vertical lines between them.

On 12/13/08 17:11, Jonathan N. Little wrote:

Mark Hansen wrote:
On 12/13/08 13:39, dorayme wrote:
In article <1d4df$49442489$414ebc3d$15747 (AT) EVERESTKC (DOT) NET>,
Mark Hansen <meh (AT) NOSPAMwinfirst (DOT) com> wrote:

When I drop the HR, then the line between rows disappears. I tried setting
the bottom border on the "td" elements, but could never get it to appear.

Use your new found free server to show us.

Here it is:

http://www.markehansen.07x.net/sunset.html

As I said before, I really new to CSS and am reading books and trying my
hand at it. There's a lot to learn, and it seems to be going very slowly
for me (old dog, new tricks and all that).

What I was really trying to do here was make it easer to follow a row
across the page. I start with the day of the month on the left edge,
then follow along to the proper month.

This is working for me now, but I am of course interested in anything
I should be doing differently.

Thanks (to all) for all the help.

even/odd shading ...
As far as screen appearance, if it is not super important and you don't
mind if a few people don't see the striping effect, you can use
javascript and leave your HTML uncluttered by classes.

I see. Thanks.

Why are you futzing with those HR elements in spanned TDs just to create
horizontal row line?

Yes, I wasn't able to get lines between the rows otherwise.

Just set top and bottom borders on the cells...
Much simpler CSS:

Wow, Thanks! Not only is this much simpler CSS, but the printed version
looks much better than with what I was done.

Best Regards,

By the way, here's the finished document:

<http://www.markehansen.07x.net/sunset.html>

In case your interested, I'm a pilot and use this information to determine
when I can log certain flight operations, etc. I laminate the table and
keep it in my flight bag.

I did make a couple changes to get the output the way I wanted it. I
added a height element to the ht, td classes and changed the padding. I
also added some font information to the table class.

I really appreciate your help.

Best Regards,