Stylesheets - col element in table not working

Author

col element in table not working

Haines Brown

2003-12-14, 11:12 am

I have a table with three columns, and I want the data in the first
column to align left, while that in the remaining columns to align
right:

#testTable { text-align: right; }
#leftcol { text-align: left; }

<table id="testTable">
<col id="leftCol" />
<col span="2" />
<tr>...

Properties defined in ID leftCol are not seen.

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Steve Pugh

2003-12-14, 11:12 am

Haines Brown <brownh@teufel.hartford-hwp.com> wrote:

quote:

>I have a table with three columns, and I want the data in the first
>column to align left, while that in the remaining columns to align
>right:
>
> #testTable { text-align: right; }
> #leftcol { text-align: left; }
>
> <table id="testTable">
> <col id="leftCol" />
> <col span="2" />
> <tr>...
>
>Properties defined in ID leftCol are not seen.

Depends on the properties, there are only a few properties that are
allowed to be defined for columns, and text-align is not one of them:
http://www.w3.org/TR/CSS2/tables.html#q4

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Martin Honnen

2003-12-14, 11:12 am

Haines Brown wrote:

quote:

> I have a table with three columns, and I want the data in the first
> column to align left, while that in the remaining columns to align
> right:
>
> #testTable { text-align: right; }
> #leftcol { text-align: left; }
>
> <table id="testTable">
> <col id="leftCol" />
> <col span="2" />
> <tr>...
>
> Properties defined in ID leftCol are not seen.

See
http://www.w3.org/TR/CSS2/tables.html#q4
on which CSS properties can be applied to table columns, only border,
background, width, visibility.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Rijk van Geijtenbeek

2003-12-14, 11:12 am

On Sun, 14 Dec 2003 11:42:39 GMT, Haines Brown
<brownh@teufel.hartford-hwp.com> wrote:

quote:

> I have a table with three columns, and I want the data in the first
> column to align left, while that in the remaining columns to align
> right:
>
> #testTable { text-align: right; }
> #leftcol { text-align: left; }
>
> <table id="testTable">
> <col id="leftCol" />
> <col span="2" />
> <tr>...
>
> Properties defined in ID leftCol are not seen.

'text-align' is not supported in columns and column-groups. Only a few CSS
properties can be set for columns.

See
http://www.w3.org/TR/CSS21/tables.html#q4
and
http://ln.hixie.ch/?start=1070385285&count=1

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you won't get any
real work done. - J.Nielsen

Haines Brown

2003-12-15, 4:35 pm

Rijk van Geijtenbeek <rijk@opera.com> writes:

quote:

> On Sun, 14 Dec 2003 11:42:39 GMT, Haines Brown
> <brownh@teufel.hartford-hwp.com> wrote:
>
>
> 'text-align' is not supported in columns and column-groups. Only a few
> CSS properties can be set for columns.
>
> See
> http://www.w3.org/TR/CSS21/tables.html#q4
> and
> http://ln.hixie.ch/?start=1070385285&count=1

Rijk and the others who so kindly corrected my mistake.

In reading the documents referenced here, I gather that what I'm
trying to do represents a problem not yet resolved. If so, then do I
have simply to define each cell for which I want text to align left as
members of a class having the property of text-align: left? If so,
that is easy, but not as elegant as I would have hoped.

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Anne van Kesteren

2003-12-15, 4:35 pm

Haines Brown wrote:

quote:

> Rijk van Geijtenbeek <rijk@opera.com> writes:
>
>
>
>
> Rijk and the others who so kindly corrected my mistake.
>
> In reading the documents referenced here, I gather that what I'm
> trying to do represents a problem not yet resolved. If so, then do I
> have simply to define each cell for which I want text to align left as
> members of a class having the property of text-align: left? If so,
> that is easy, but not as elegant as I would have hoped.
>

Correct. The W3C is currently looking into a solution for this (and
other) problems, maybe you can come up with something ;-). Applying a
'class' is the only way to go :-(

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

Rijk van Geijtenbeek

2003-12-15, 4:35 pm

On Mon, 15 Dec 2003 11:26:34 +0100, Anne van Kesteren
<mail@annevankesteren.nl> wrote:

quote:

> Haines Brown wrote:

...

quote:

[QUOTE][color=darkred]
> Correct. The W3C is currently looking into a solution for this (and
> other) problems, maybe you can come up with something ;-). Applying a
> 'class' is the only way to go :-(

The other option is using TR > TD + TD to select each second cell in a
row, but it depends on your content if that is feasable, and it isn't
supported by MSIE.

Or if you just want to set horizontal alignment, you use <col
align=right>, which is not even deprecated...

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you won't get any
real work done. - J.Nielsen

Christoph Paeper

2003-12-17, 9:41 am

*Haines Brown* <brownh@teufel.hartford-hwp.com>:

quote:

>
> I have a table with three columns, and I want the data in the first
> column to align left, while that in the remaining columns to align
> right:
>
> #leftcol { text-align: left; }

IIRC it works in IE, although it shouldn't, because the cells are not
descendants of the columns but the rows.
By the way: IDs are case-sensitive and it's not good style to include the
element's name in the class or id name.

quote:

> <table id="testTable">
> <col id="leftCol" />
> <col span="2" />

#testTable td {text-align: right}
#testTable td:first-child {text-align: left}

is very close to applying left alignment to the first column only. It's
problematic when 'colspan' and 'rowspan' come into play, though.

--
"You can only find truth with logic
if you have already found truth without it."
G.K. Chesterton

Haines Brown

2003-12-17, 9:41 am

Christoph Paeper <crissov2003Q4@gmx.net> writes:

quote:

>
> By the way. . .it's not good style to include the element's name in
> the class or id name.

Perhaps a little philosophical and OT, but would you explain your
point? The element's name is "col," while I've assigned the ID of
"leftCol." Apparently it is this to which you refer, but I wonder what
is the basis for your objection.
--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Christoph Paeper

2003-12-17, 9:41 am

*Haines Brown* <brownh@teufel.hartford-hwp.com>:

quote:

> Christoph Paeper <crissov2003Q4@gmx.net> writes:
>
>
> Perhaps a little philosophical and OT,

Philosophical maybe, but IMO not off-topic.

quote:

> The element's name is "col," while I've assigned the ID of "leftCol."

Who says, the style will always only be applied to documents with a 'col'
element? And will it always be "left"? Such changes more often happen with
classes over time than with ids, but why not be consistent?
E.g. #first or col#header would be more general and appropriate.

--
"It is not worth an intelligent man's time to be in the majority.
By definition, there are already enough people to do that."
G. H. Hardy

Haines Brown

2003-12-17, 10:22 am

Christoph Paeper <crissov2003Q4@gmx.net> writes:

quote:

> *Haines Brown* <brownh@teufel.hartford-hwp.com>:
[QUOTE][color=darkred]
> Such changes more often happen with classes over time than with ids,
> but why not be consistent?

Not to be argumentative, but why be consistent? I think of ID as
something specific to this particular document and a unique instance,
while class is generic and employed for multiple instances. So if they
are opposite in purpose, why should they be consistent in form?

That's why I tend to be very ad hoc when it comes to the ID
("SecondParagraphPadding-top," "indent2em", etc.), hinting its
specific location or purpose (well, not as ugly as the examples). I
don't want to be generic here.

I'm all in favor of consistency, but not when it comes to things that
refer to unique instances. What do you think?

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Anne van Kesteren

2003-12-18, 8:46 pm

Haines Brown wrote:

quote:

> [snip]

quote:

> Not to be argumentative, but why be consistent? I think of ID as
> something specific to this particular document

So wrong, CSS is invented to be applied to multiple documents. Each
document can have the _same_ ID attirbute.

quote:

> So if they are opposite in purpose, why should they be consistent in

form?

They should have a name that describes the elements content. It is about
markup, not about styling.

quote:

> That's why I tend to be very ad hoc when it comes to the ID
> ("SecondParagraphPadding-top," "indent2em", etc.), hinting its
> specific location or purpose (well, not as ugly as the examples). I
> don't want to be generic here.

That is stupid. What if your boss wants <p id="green"/> to be 'yellow'?
You will have to change the markup in such a case, where it would be
better to just describe the content.

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

Haines Brown

2003-12-18, 8:46 pm

Anne van Kesteren <mail@annevankesteren.nl> writes:

quote:

> Haines Brown wrote:
>
>
> So wrong, CSS is invented to be applied to multiple documents. Each
> document can have the _same_ ID attirbute.

Well, yes, it is true that two different documents might use the same
ID name, but each ID must still refer to a specific instance, as far
as I know.

quote:

> They should have a name that describes the elements content. It is
> about markup, not about styling.

I understand what you are saying. CSS is intended to define the format
of functional elements within a document, and so attributes are
associated with functional identifiers. For example, the functional
identifier of a main heading is <h1> and so we apply attributes to h1,
not to the text that happens to be enclosed by <h1></h1>.

However, not everyingthing has a function, and so how do we accomodate
CSS to other needs, such as aesthetics?

If I want some text to be green, say, for aesthetic reasons without
having green text mean anything, then then I'm faced with defining
format (or "style" as you put it) of the text itself. That may not be
the strength and basic purpose of CSS, but CSS does the job.

It may be that you are talking about principle, and I'm talking about
some practical needs that are hard to reconcile with the principle.

quote:

> That is stupid. What if your boss wants <p id="green"/> to be
> 'yellow'? You will have to change the markup in such a case, where
> it would be better to just describe the content.

That's true. But does it not presume the paragraph here has a
specific function? In otherwords, what would you substitute for the
word "green" if you knew nothing about the paragraph in question? If
my concern were merely format or aesthetics, then I must somehow ask
CSS to provide the needed service.

In principle, I suppose, I could do something like <span
class="Z1">this</span>.

#Z1 {color: green;}

Here I'm not using a name that has any meaning in relation to the span
content, but is abstract, for the text has no particular function. Am
I better off using an abstract name like Z1 than something that is
meaningful to me, such as <span id="SecondExample">this</span>?

I hope all this does not seem too trivial to worry much about.

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Neal

2003-12-18, 8:46 pm

"Haines Brown" <brownh@teufel.hartford-hwp.com> wrote in message
news:873cbjcgui.fsf@teufel.hartford-hwp.com...

quote:

> If I want some text to be green, say, for aesthetic reasons without
> having green text mean anything, then then I'm faced with defining
> format (or "style" as you put it) of the text itself. That may not be
> the strength and basic purpose of CSS, but CSS does the job.

Why do you want the text green? What is significant about the text? I think
Anne is saying that you should try to make names reflect the content, not
the style, so that you don't confuse yourself later.

For overall good design, making text green should be done for more of a
reason than "I felt like it" - perhaps "this text is showing the price of
something on sale, so I want it green" is more accurate. Or "this paragraph
is a sick joke and should be green in color." So your class or id ought to
be "saleprice" or "sickjoke." That way, down the road if the colors ought to
change, you're not stuck having your "green" elements being yellow or olive.

quote:

> In otherwords, what would you substitute for the
> word "green" if you knew nothing about the paragraph in question?

If I didn't know the function, I shouldn't be screwing with the colors,
that's what I gather. Anne's point seems to be that the HTML markup should
not be tied to the visually artistic part of design. If you change font or
add color or whatnot, you should be doing it to differentiate the content
you're marking from content that's marked differently, not because you want
a pretty color.

I'm not saying I agree 100%, but that seems to be Anne's point, and it's a
well-reasoned one.

Alan J. Flavell

2003-12-18, 8:46 pm

On Wed, 17 Dec 2003, Haines Brown wrote:

quote:

>
> Well, yes, it is true that two different documents might use the same
> ID name, but each ID must still refer to a specific instance, as far
> as I know.

Web pages tend to have quite a lot in common. There's no point in
inventing a new name for every banner head, for every navigation area,
for every copyright notice. And by keeping consistent, you can keep
the site looking consistent, and make consistent changes with minimum
effort. But you know this already, right?

Sure, there will also be items on pages that are not typical of
anything found on other pages, but that doesn't stop one from being
consistent when it's possible to be consistent.

quote:

> If I want some text to be green, say, for aesthetic reasons without
> having green text mean anything, then then I'm faced with defining
> format (or "style" as you put it) of the text itself.

If you've no other reason than "aesthetic reasons", then surely it's
just as likely to change at some other time, maybe to reflect autumn
gold rather than spring green? You might as well name the style as
something meaningless, say "cairngorm" or "fishpaste" or whatever, as
call it "green" and risk it being inappropriate when there's a change.

quote:

>
> That's true. But does it not presume the paragraph here has a
> specific function?

I don't think so. Even bosses have been known to have an inexplicable
fad for a colour change, without any specific function ;-)

quote:

> I hope all this does not seem too trivial to worry much about.

Welcome to usenet ;-))

Haines Brown

2003-12-18, 8:46 pm

Thanks for the comments. Again, I'm carrying this on not to be
insistant, but to explore more deeply an issue that I find a bit
unclear.

"Neal" <neal@spamrcn.com> writes:

quote:

>
> Why do you want the text green?

As I said, for aesthetic reasons, but your example below leads me to
think maybe I can find more appropriate names.

Here are two examples.

Suppose I have an object that casts a shadow. The shadow graphic must
be placed carefully in relation to the object that casts it, but the
shadow has no function in relation to the body content. Suppose I'm
writing an advertisement for avocados, and so want the text to be
avacado green, and I want some other text to be orange because that's
nice color combination.

But you suggest:

quote:

> For overall good design, making text green should be done for more
> of a reason than "I felt like it" - perhaps "this text is showing
> the price of something on sale, so I want it green" is more
> accurate. Or "this paragraph is a sick joke and should be green in
> color." So your class or id ought to be "saleprice" or "sickjoke."
> That way, down the road if the colors ought to change, you're not
> stuck having your "green" elements being yellow or olive.

OK, so the name you would recommend in the above example would be
id="avocado", and so then I'm free to alter the color of avocados as
I will. Or <img id="shadow /> Or id="PrettyText" perhaps.

But let me raise a practical question. Suppose I have something lke
this, whic is a list of links prefaced by an arrow graphic:

<p class="links" id="child">
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-a.html">child a</a>
<br />
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-b.html">child b</a>
<br />
<img class="arrow" src="../bin/arrow.png" alt=" " />
<a href="doc-1.html">child 1</a>
</p>

Now, let's assume there's a categorical distinction between the child
links that are listed alphabetically, and the one listed numerically,
and so a want to insert, say 0.4em; padding between the second and
third link. What would you recommend? This actually lies behind why I
raised the issue in the first place.

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Haines Brown

2003-12-18, 8:46 pm

"Alan J. Flavell" <flavell@ph.gla.ac.uk> writes:

quote:

> On Wed, 17 Dec 2003, Haines Brown wrote:
>
>
> Web pages tend to have quite a lot in common. There's no point in
> inventing a new name for every banner head, for every navigation
> area, for every copyright notice. And by keeping consistent, you
> can keep the site looking consistent, and make consistent changes
> with minimum effort. But you know this already, right?
>
> Sure, there will also be items on pages that are not typical of
> anything found on other pages, but that doesn't stop one from being
> consistent when it's possible to be consistent.

You jump at this point to discuss the subject I just debated in my
previous mewssage, so won't burden you with it here. I think I
concluded that in principle one should use names that refer to the
function or identification of the content rather than its format, so
Anne is probably right. If I cook up a strange example where that is
not true, I can certainly use an abstract identifier (id="Z1") that at
least does not violate the principle.

However, your point above seems to be left hanging. Yes, one should
try to be consistent. However, how is one consistent in dealing with
something unique? For example, we try to make our pages uniform, but
often I've made pages that have little in common with anything else,
and which do not have many repeated elements in them. This is where
id= comes in.

But I'm having difficulty understanding how one can be consistent
about what is unique. I can think of one or more answers to this
question, but wonder what you had in mind.

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Christoph Paeper

2003-12-18, 8:46 pm

*Haines Brown*:

quote:

>
> whic is a list of links prefaced by an arrow graphic:

It's not, at least in HTML terms.

quote:

> <p class="links" id="child">
> <img class="arrow" src="../bin/arrow.png" alt=" " />
> <a href="doc-a.html">child a</a><br />
> <img class="arrow" src="../bin/arrow.png" alt=" " />
> <a href="doc-b.html">child b</a><br />
> <img class="arrow" src="../bin/arrow.png" alt=" " />
> <a href="doc-1.html">child 1</a>
> </p>
>
> Now, let's assume there's a categorical distinction between the child
> links that are listed alphabetically, and the one listed numerically,
> and so a want to insert, say 0.4em; padding between the second and
> third link. What would you recommend?

<ol class="links" id="child">
<li><a href="doc-a.html">child a</a></li>
<li><a href="doc-b.html">child b</a></li>
</ol><ol class="links">
<li><a href="doc-1.html">child 1</a></li>
</ol>

.links {list-style: disc url("../bin/arrow.png");
margin: 0; padding: 0.2em 0}

--
"Opportunity is missed by most people
because it is dressed in overalls and looks like work."
Thomas Alva Edison

Neal

2003-12-18, 8:46 pm

"Haines Brown" <brownh@teufel.hartford-hwp.com> wrote in message
news:87u13yc052.fsf@teufel.hartford-hwp.com...

quote:

> But let me raise a practical question. Suppose I have something lke
> this, whic is a list of links prefaced by an arrow graphic:
>
> <p class="links" id="child">
> <img class="arrow" src="../bin/arrow.png" alt=" " />
> <a href="doc-a.html">child a</a>
> <br />
> <img class="arrow" src="../bin/arrow.png" alt=" " />
> <a href="doc-b.html">child b</a>
> <br />
> <img class="arrow" src="../bin/arrow.png" alt=" " />
> <a href="doc-1.html">child 1</a>
> </p>

Well, there is:

list-style-image: url(URI);

where URI is the location of an image that serves as a bullet.

quote:

> Now, let's assume there's a categorical distinction between the child
> links that are listed alphabetically,

What is that distinction? I'll use "one" and "two" as placeholders.

quote:

> and the one listed numerically,
> and so a want to insert, say 0.4em; padding between the second and
> third link. What would you recommend? This actually lies behind why I
> raised the issue in the first place.

li.one, li.two {
list-style-image: url(arrow.png);
padding: 1em;
}

li.two {
padding-top: 1.4em;
padding-bottom: 1.4em;
}

<ul>
<li class="one"><a href="doc-a.html">child a</a></li>
<li class="one"><a href="doc-b.html">child b</a></li>
<li class="two"><a href="doc-1.html">child 1</a></li>
</ul>

Or, you could do two ul's in a row, and set the ul padding .4 em larger than
the padding between li's. Actually, I think that might be better.

Haines Brown

2003-12-18, 8:46 pm

Yes, you and Neal provided obvious answers, but only by changing the
parameters of the question. I was avoiding a "list" in HTML terms, but
instread created one in terms of its format. My example used lines
separated by <br /> because such lines are not contained in an element
that can be identified.

I could also have divided my example list into separate paragraphs,
identify one of them, and then play with their spacing. You and Neal
divide my list into two lists, and so can identify them with the names
"child" and "links". Both are functional names, which satisfies the
naming convention. But note that all the list items are simultaneously
a child and a link, and so I suppose child-a and child-b is their
equivalent. Neal does this with link-1 and link-2.

These names are essentially abstract distinctions among links and
therefore not much different from my purely abstract example of
"Z1". Such a name satisfies the recommendation that names _not_
reflect format, but fail to satisfy the recommendation that names do
_distinguish_ function or content.

Why I offered an example with lines separated by <br /> is that the
lines have no container that can be so identified. I've found through
playing that I can do something like this

#vspace { line-height: 2em; }

Line 1
<br />
Line 2
<br id="vspace" />
Line 3

This creates extra space between Line 1 and Line 2. However, I've
never used this because I'm not sure all browsers will associate the
<br /> with Line 2 and so give their shared line the extra height
instead oif Line 3. But the question is, the name "vspace" here does
in a sense refer to a kind of content, although also format, just as
<br /> itself does. So is "vspace" acceptable as a name? This may be
the same as my <img id="shadow"... /> example.

Again, sorry to pursue a picky question at such length, but I find
that issues that are not driven into the ground have a way of biting
me in the butt when I'm not looking.

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Haines Brown

2003-12-18, 8:46 pm

Neal,

Somewhat OT, but the thought occured to me.

"Neal" <neal@spamrcn.com> writes:

quote:

> li.one, li.two {
> list-style-image: url(arrow.png);
> padding: 1em;
> }
>
> li.two {
> padding-top: 1.4em;
> padding-bottom: 1.4em;
> }
>
> <ul>
> <li class="one"><a href="doc-a.html">child a</a></li>
> <li class="one"><a href="doc-b.html">child b</a></li>
> <li class="two"><a href="doc-1.html">child 1</a></li>
> </ul>

What would you do if you needed to name "arrow.png" in order to
specify its size or relative position?

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

Neal

2003-12-19, 9:45 pm

"Haines Brown" <brownh@teufel.hartford-hwp.com> wrote in message
news:87brq6b2ws.fsf@teufel.hartford-hwp.com...

quote:

> What would you do if you needed to name "arrow.png" in order to
> specify its size or relative position?

More classes pointing to other sizes, perhaps.