<col> - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

<col>

how to affect a column of td elements

nyteshade

3:51 pm on Aug 17, 2011 (gmt 0)

10+ Year Member

There are some styles involved here but I think my question is primarily about the <col> element. I would like to change the backgroud-color and color of text for each td element under a col element with the html:

<!DOCTYPE HTML>
<html lang="en">
<head><title></title>
<style>
.colhylite{
background-color:orange;
color:white;
}
</style>
</head>
<body>

<table>
<col class="colhylite" /><col style="color:white; background-color:orange;" /><col style="background-color:orange;" />
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
</table>

</body>
</html>

I thought that creating a css class as an attribute for <col> would be the solution but only the background-color property works, the color property is ignored for tdcontent1.

The same is true if I use an inline style on the <col> element, that is, again the color property fails to display in tdcontent2.

Only the tdcontent3 displays as 'I want' but as you see it entails inline styling for each tdcontent td element.

My question is 'what is up with <col>'? Do I just have access to the background-color property with <col>. I've tried several other properties but none of them work if styled by css class or used inline with the <col> element. What am I missing here? Thx all!

penders

4:19 pm on Aug 17, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Yeah, the col (and colgroup) elements aren't quite as flexible as one would like it seems.

I explored this in a thread a few years(!?) ago, has it changed much (if at all) since then?
[webmasterworld.com...]

nyteshade

4:40 pm on Aug 17, 2011 (gmt 0)

10+ Year Member

Thanks penders, that link to the old thread was helpful. Seems too that HTML5 is not supporting most of the old HTML4x optional attributes according to w3c. I will simply adopt the standard and just use background-color and border properties when utilizing <col>. Arrgggh! Thought I knew my HTML. Peace.

nyteshade

7:35 pm on Dec 8, 2011 (gmt 0)

10+ Year Member

I have returned to this thread because I've found new stuff after re-re-reading pender's reply and suggested url. My initial problem was not that <col> element was non-responsive to css property values, fortunately ;) it was my mistake. I had two linked classes:

.css3striping tr:nth-child(odd) { background-color:#FFF; }
.css3striping tr:nth-child(even) { background-color:#E6EBE6; }

...on a <table> element:

<table class="css3striping">

And, was attempting to subsequently highlight columns via DOM scripting like so,

document.getElementById(columnid).setAttribute("class","colhylite");

The DOM script failed, without flagging an error. I'm ASSuming that the rendering engine doesn't allow multiple references to the CSS background property, ie, it accepts only the first reference and ignores subsequent ones? I'm at [w3.org ]snoring my way to an answer. However, it doesn't appear to have a problem with:


table.dashed td {
border-bottom: thin dashed #D1D1E2;
}
tableelement.setAttribute("class","dashed");

It's not the solution I'd like[meinsandkasten.com ], but it'll do until I find an answer.

penders

8:05 pm on Dec 8, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Hi nyteshade, just passing quickly, will stop by again later... but shouldn't this:

document.getElementById(columnid).setAttribute("class","colhylite");

Be...

document.getElementById(columnid).className = "colhylite";

...for cross-browser compatibility?

nyteshade

10:03 pm on Dec 8, 2011 (gmt 0)

10+ Year Member

penders, re: setAttribute, I had no idea the method was not cross-browser compatible. It appears to work in all the latest <em>modern<em> browsers, and IE9 ;) and IE8 (which I use on winXP). But I did a quick search and there is some poo-pooing of setAttribute.

I replaced setAttribute with className in one js file on my domain and it worked under chrome, IE8, opera and my fav ff. Before I do a global replace I need to do more research. Thanks for the heads-up!

nyteshade

10:59 am on Dec 9, 2011 (gmt 0)

10+ Year Member

Best explanation I found: [sitepoint.com ]. I can't test this since I do not have IE6 installed.

Updated links for those interested:[developer.mozilla.org ] and [developer.mozilla.org ]

nyteshade

1:32 pm on Feb 11, 2012 (gmt 0)

10+ Year Member

I can't seem to get setAttribute to fail, as most post say, in every event where I use it in my domain under IE8 compatibility view. The following executes and renders without fail:


var slideshow = d.createElement("div");
slideshow.setAttribute("id","slideshow");
var preview = d.createElement("img");
preview.setAttribute("src","images/bookcovers.jpg");
preview.setAttribute("alt","building blocks of web design");
preview.setAttribute("id","preview");

I don't mean to resurrect the slain here, but I've just about finished adjusting my web pages to account for IE6 and this is the very last thing that's nagging at me.

Is it just that setAttribute('class', classname) is the primary offender re IE6 and never works; and maybe the other attributes get a pass, that is, they work? Or maybe IE6 is simply unpredictable and all setAttribute method calls should be converted to HTML-DOM element.attribute=Xnn?

Thanks all.

penders

9:23 pm on Feb 17, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Hi nyteshade, sorry it's been a few days...

I don't think the problem is specifically with setAttribute() (although it is in a way), but with attempting to set certain HTML attributes, notably "class", "style" and event attributes.

JavaScript defines object properties for all the main HTML attributes. So the HTML attribute can be set by either calling the setAttribute() method or by assigning directly to the appropriate JavaScript property. The JavaScript property does not necessarily have the same name as the HTML attribute. "class" (HTML attribute) and "className" (JS property) is the obvious one. "class" is a reserved word in JavaScript (for future use) so you cannot (or should not) have a property called "class", which is why we have "className" instead.

Now, one of the big problems with IE5-7 is that these browsers do not differentiate between HTML attributes and JavaScript properties. Calling setAttribute('class',<value>) will (in theory) attempt to set the JavaScript property 'class' in these browsers which is clearly wrong and consequently does not work. (I say 'in theory', because you can't read the property back to check!)

It is for these reasons that I believe (for versions of IE before 8) it is considered safer to set the JavaScript property (where available) rather than using the setAttribute() method. However, AFAIK, it is only these few attributes that are affected (if anyone knows more do tell) and you probably don't think about using setAttribute() to set the "style" or event attributes anyway.

nyteshade

10:42 pm on Feb 18, 2012 (gmt 0)

10+ Year Member

Thanks penders, I have a better understanding of it now. I'm using the format:


HTMLElementObject.className=classname;

...for setting class; and a similar syntax for the remaining HTML attributes like so:


HTMLElementObject.id="nnn";
HTMLElementObject.src="dir/nnn.nnn";HTMLElementObject.alt="nnnn";

...just to be on the safe side. This works for IE8- .