Table with Alternating Color Columns and Colspan

[cho.cabot]

Is there a way to create a table that does the following:

- has columns with alternating color backgrounds
- has a cell with a colspan of 2 and contains an image with a
transparent background that still maintains the alternating background
colors of the columns

Thanks for your help.

 

[Jukka K. Korpela]

Scripsit cho.cabot:

Is there a way to create a table that does the following:

- has columns with alternating color backgrounds

Just use

<col>
<col class="even">
<col>
<col class="even">
etc.

as needed to cover all the columns (no, there's no shortcut) in HTML, right
after the <caption> element, before the <thead> element, and something like
the following in CSS:

col { background: white; color: black; }
col.even { background: #ffc; color: black; }

- has a cell with a colspan of 2 and contains an image with a
transparent background that still maintains the alternating background
colors of the columns

That sounds somewhat weird, but maybe there's a reason. Anyway, since such a
cell spans two columns, the column structure is continued after it as if it
had been two cells. So if, say, the 2nd cell of a row has colspan="2", then
the cell itself counts as being in an even column (according to _first_
column of the span), and the next cell of that row will be in an even column
too, since it is counted as the 4th cell. Thus, there will be two adjacent
cells with the same (even column) background, and after that, things go on
normally, so that the pattern of column background alteration is not
disturbed. It is impossible for me to guess whether this is what you mean by
"still maintains the alternating background colors of the columns". You
cannot, of course maintain it both for the table as a whole and for the two
adjacent cells, after breaking the normal "flow" of columns.

I'm not sure what the expression "with a transparent background" refers to.
The image? If it has transparent parts, then the background of the image
itself may be significant, but it's normally transparent by default, i.e. in
this case the background of the cell shines through. You can of course
explicitly set background: transparent for the cell, without affecting
anything else, but then you'll get whatever happens to be the table's
background _or_ the column's background. Browsers disagree on this.

 

[mclagett]

There isn't a way to automatically do it with HTML. You could do it
using PHP or something do use a counter to keep track of how many rows
there are, then do something like:

if($rowcount % 2 == 0 )
class = even
else
class = odd

that's just pseudo-code, but it should put you in the right direction.

 

[Jonathan N. Little]

There isn't a way to automatically do it with HTML. You could do it
using PHP or something do use a counter to keep track of how many rows
there are, then do something like:

if($rowcount % 2 == 0 )
class = even
else
class = odd

that's just pseudo-code, but it should put you in the right direction.

No. But what you describe in pseudo-code could be done with a
server-side script.