Re: background shading for even/odd table rows visible when printed?
- From: Mark Hansen <meh@xxxxxxxxxxxxxxxxxx>
- Date: Sat, 13 Dec 2008 13:09:28 -0800
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.
.
- Follow-Ups:
- References:
- background shading for even/odd table rows visible when printed?
- From: Mark Hansen
- Re: background shading for even/odd table rows visible when printed?
- From: Jukka K. Korpela
- background shading for even/odd table rows visible when printed?
- Prev by Date: Re: background shading for even/odd table rows visible when printed?
- Next by Date: Re: background shading for even/odd table rows visible when printed?
- Previous by thread: Re: background shading for even/odd table rows visible when printed?
- Next by thread: Re: background shading for even/odd table rows visible when printed?
- Index(es):
Relevant Pages
|
Loading
