Table columns align

[Manuel Collado]

The following page attempts to use <col align="right"> to align columns
of numbers inside a table:

http://lml.ls.fi.upm.es/~mcollado/temp/tablealign.html

Sadly, it is rendered left-aligned in Firefox (it claims to be rendering
in standards mode).

Opera and Internet Explorer (in standards mode) render the numbers
right-aligned.

Is there any flaw in the markup? Please don't complain about using
XHTML instead of HTML. The page code validates with not even a single
warning, and is served as text/html.

Is this a bug in Firefox? Is there an alternate simple markup that could
ensure proper alignment in most modern browsers?

Thanks in advance.
--
Manuel Collado - http://lml.ls.fi.upm.es/~mcollado

[David Stone]

In article <k92vgg$a0r$1...@speranza.aioe.org>,

Manuel Collado <m.co...@domain.invalid> wrote:

> The following page attempts to use <col align="right"> to align columns
> of numbers inside a table:
>
> http://lml.ls.fi.upm.es/~mcollado/temp/tablealign.html
>
> Sadly, it is rendered left-aligned in Firefox (it claims to be rendering
> in standards mode).
>
> Opera and Internet Explorer (in standards mode) render the numbers
> right-aligned.
>
> Is there any flaw in the markup? Please don't complain about using
> XHTML instead of HTML. The page code validates with not even a single
> warning, and is served as text/html.
>
> Is this a bug in Firefox? Is there an alternate simple markup that could
> ensure proper alignment in most modern browsers?

Ancient bug in FireFox (actually two, one related to html align, and
one related to CSS). Essentially, FF doesn't let you to this on col, so
you have to do alignment through the actual table cell instead.

[Jukka K. Korpela]

2012-11-27 20:06, Manuel Collado wrote:

> The following page attempts to use <col align="right"> to align columns
> of numbers inside a table:
>
> http://lml.ls.fi.upm.es/~mcollado/temp/tablealign.html
>
> Sadly, it is rendered left-aligned in Firefox (it claims to be rendering
> in standards mode).

There is a discrepancy between HTML specifications and CSS
specifications here. By the HTML 4.01 spec, the <col align="right"> tag
should have an effect on cells that do not have their alignment
specified otherwise:
http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2.1
However, modern browsers behave along the principles of CSS, which mean
that cells can "inherit" only four properties (background, border,
visibility, width) from <col> elements:
http://www.w3.org/TR/CSS21/tables.html#columns

The rationale behind this is explained in Hixie's treatise:
http://ln.hixie.ch/?count=1&start=1070385285

>Opera and Internet Explorer (in standards mode) render the numbers
> right-aligned.

As far as I can see, this only applies to IE 7 and older. In standards
mode, IE 8 and newer don't do that in standards mode (though in quirks
mode, they do).

> Is there any flaw in the markup?

Not in terms of HTML, in this issue. But HTML specifications don't quite
reflect the reality.

> Is there an alternate simple markup that could
> ensure proper alignment in most modern browsers?

Yes, add align="right" to the cells you want to have right-aligned. It's
simple, though not nice and convenient. In this case, when all cells
should be aligned, you could use shorter markup by using the
align="right" attribute in each <tr> element, not in each cell.

Alternatively, you can keep what you have now (it handles some old
browsers OK) and add the following style sheet, for modern browsers:

<style type="text/css">
th, td { text-align: right; }
</style>

This is very easy when all cells need to be right-aligned. If you wanted
to align, say, only the data cells in the 3rd column, you would use

td:nth-child(3) { text-align: right; }

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

[Manuel Collado]

El 27/11/2012 19:52, Jukka K. Korpela escribió:
> 2012-11-27 20:06, Manuel Collado wrote:
>
>> The following page attempts to use <col align="right"> to align columns
>> of numbers inside a table:
>>
>> http://lml.ls.fi.upm.es/~mcollado/temp/tablealign.html
>>
>> Sadly, it is rendered left-aligned in Firefox (it claims to be rendering
>> in standards mode).
>
> There is a discrepancy between HTML specifications and CSS
> specifications here. By the HTML 4.01 spec, the <col align="right"> tag
> should have an effect on cells that do not have their alignment
> specified otherwise:
> http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2.1
> However, modern browsers behave along the principles of CSS, which mean
> that cells can "inherit" only four properties (background, border,
> visibility, width) from <col> elements:
> http://www.w3.org/TR/CSS21/tables.html#columns
>
> The rationale behind this is explained in Hixie's treatise:
> http://ln.hixie.ch/?count=1&start=1070385285

Thank you very much for the pointers. They clarify things a lot. But I
don't agree with the arguments given by Hixie, and feel that col
specifiers could be just handled as some equivalent CSS specifiers. See
below.

>
>> Opera and Internet Explorer (in standards mode) render the numbers
> > right-aligned.
>
> As far as I can see, this only applies to IE 7 and older. In standards
> mode, IE 8 and newer don't do that in standards mode (though in quirks
> mode, they do).

On the contrary, my finding is that IE8 honors the col specifier in
standards mode and not in quirks mode. Or perhaps I don't understand the
meaning of the menu option "tools -> compatibility view + compatibility
vew options" (sorry, rough translation of the labels in my Spanish IE8).

>
>> Is there any flaw in the markup?
>
> Not in terms of HTML, in this issue. But HTML specifications don't quite
> reflect the reality.
>
>> Is there an alternate simple markup that could
>> ensure proper alignment in most modern browsers?
>
> Yes, add align="right" to the cells you want to have right-aligned. It's
> simple, though not nice and convenient. In this case, when all cells
> should be aligned, you could use shorter markup by using the
> align="right" attribute in each <tr> element, not in each cell.
>
> Alternatively, you can keep what you have now (it handles some old
> browsers OK) and add the following style sheet, for modern browsers:
>
> <style type="text/css">
> th, td { text-align: right; }
> </style>
>
> This is very easy when all cells need to be right-aligned. If you wanted
> to align, say, only the data cells in the 3rd column, you would use
>
> td:nth-child(3) { text-align: right; }

Yes. And perhaps col specifiers like:

<table id="t0001">
<col align="left" />
<col align="center" />
<col align="right" />

can be automatically converted to some equivalent CSS2 rules:

table#t0001 > tbody > tr td {
text-align: left;
}
table#t0001 > tbody > tr > td + td {
text-align: center;
}
table#t0001 > tbody > tr > td + td +td {
text-align: right;
}

Or to CSS3 rules using :nth-child(), as you point out.

They certainly work in Firefox. See:

http://lml.ls.fi.upm.es/~mcollado/temp/tablealign2.html

So my question is: why FF ignores col specifiers, instead of converting
them to their equivalent CSS rules and apply the CCS rendering model?
IMHO this seems a FF bug.

We can do the translation explicitly, but it certainly would be very
nice if the browser did the translation itself.

Thanks you for your clarifications.

[David E. Ross]

See bug #915 at <https://bugzilla.mozilla.org/show_bug.cgi?id=915>.
This is 14 years old.

--

David E. Ross
<http://www.rossde.com/>

Anyone who thinks government owns a monopoly on inefficient, obstructive
bureaucracy has obviously never worked for a large corporation.
© 1997 by David E. Ross

[Swifty]

On 27/11/2012 18:52, Jukka K. Korpela wrote:
> If you wanted to align, say, only the data cells in the 3rd column, you
> would use
>
> td:nth-child(3) { text-align: right; }

This would right align the 3rd column in all tables on the page. I tried
to add a class, so I could select the specific table where I wanted this
to apply, but haven't worked out the syntax (or if this is even
possible). I tried using "c3r" as a class:

td.c3r:nth-child(3) {text-align:right;)
td:nth-child.c3r(3) {text-align:right;)
td:nth-child(3).c3r {text-align:right;)


I seems to have exhausted all the possibilities, or have I missed something?

--
Steve Swift
http://www.swiftys.org.uk/

[Osmo Saarikumpu]

On 28.11.2012 8:01, Swifty wrote:

>> On 27/11/2012 18:52, Jukka K. Korpela wrote:
>> If you wanted to align, say, only the data cells in the 3rd column, you
>> would use

>> td:nth-child(3) { text-align: right; }

> This would right align the 3rd column in all tables on the page. I tried
> to add a class, so I could select the specific table where I wanted this
> to apply, but haven't worked out the syntax (or if this is even
> possible). I tried using "c3r" as a class:
>
> td.c3r:nth-child(3) {text-align:right;)

Selects any td element with a class attribute that contains the word c3r
and that is a third child.

> td:nth-child.c3r(3) {text-align:right;)

Syntax error.

> td:nth-child(3).c3r {text-align:right;)

Selects any td element that is a third child and with a class attribute
that contains the word c3r.

What you need is (untested):

.c3r td:nth-child(3) {text-align:right;)

or the more specific:

table.c3r td:nth-child(3) {text-align:right;)

HTH, Osmo

[David E. Ross]

Your two examples end with right parentheses ) instead of right braces }.

[Osmo Saarikumpu]

On 28.11.2012 9:06, David E. Ross wrote:

>> On 11/27/12 10:31 PM, Osmo Saarikumpu wrote:
>> table.c3r td:nth-child(3) {text-align:right;)

> Your two examples end with right parentheses ) instead of right braces }.

TY, I was focusing too much on the selectors.

Note to Swifty: error due to copy & paste from your attempts.

--
Best wishes, Osmo

[Manuel Collado]

Quoting myself (from a previous post):

... perhaps col specifiers like:

<table id="t0001">
<col align="left" />
<col align="center" />
<col align="right" />

can be automatically converted to some equivalent CSS2 rules:

table#t0001 > tbody > tr td {
text-align: left;
}
table#t0001 > tbody > tr > td + td {
text-align: center;
}
table#t0001 > tbody > tr > td + td +td {
text-align: right;
}

Adapting them to CSS3 by using nth-child() seems straightforward.

Note the use of ID for tables, so the rules apply just to the content of
a specific table.

[Andreas Prilop]

On Wed, 28 Nov 2012, Manuel Collado wrote:

> <col align="left" />
> <col align="center" />
> <col align="right" />

You can suit all browsers from IE 6 to modern ones
if you include both "col align" and "td+td".
(There is no need for CSS 3 here, only CSS 2.)
Example:
http://www.user.uni-hannover.de/nhtcapri/table8.text

Style sheet is used on
http://www.user.uni-hannover.de/nhtcapri/urdu-alphabet.html
 
 
Note that comma and period are both decimal separators.
Only a space may be used as thousands separator.

http://physics.nist.gov/Pubs/SP811/sec10.html#10.5.3

http://www2.cem.es:8081/cem/es_ES/documentacion/generales/SIU8edes.pdf
section 5.3.4

--
Outgoing mail is certified free from defamation of Islam™
and insult of the Prophet™.
Checked by Thinkpol anti-obscenity system v. 6.66.

[Swifty]

On 28/11/2012 07:24, Osmo Saarikumpu wrote:
> Note to Swifty: error due to copy & paste from your attempts.

An example of cascading blame... David points out your mistake, you
point out my mistake, and I'm left with nothing to blame. Not even my
keyboard; ")" and "}" are not close enough for a simple typo. :-(

Can I see if I understand correctly:

table.c3r td:nth-child(3) {text-align:right;}

... says that inside a TABLE tag, which applies class c3r, any TD tag
which is the 3rd child would be right-aligned?

Presumably this would apply to the "wrong" column if either of the two
preceding TD tags contained COLSPAN=2? I've tried this in practice, and
(of course) it applies to the 3rd TD tag, not the 3rd column.

So, I'll have to use the CSS solution with caution. The <COL> tag avoids
this issue, where it works (the original topic of this thread), so it's
not surprising that browsers don't want to turn <COL> into the
corresponding CSS (internally). I suspect there is no CSS that would cope.

[Swifty]

On 28/11/2012 10:49, Manuel Collado wrote:
> perhaps col specifiers like:
...

> can be automatically converted to some equivalent CSS2 rules

The <COL> tag (where it works at all) applies to actual columns in a
table. The CSS that I've seen so far applies to the Nth <TD> tag, but
this doesn't define column N, when preceding <TD> tags have COLSPAN > 1

See http://swiftys.org.uk/columns.html where the "Oh!" has appeared in
the 4th column and been styled as the third TD.

[Swifty]

On 28/11/2012 10:49, Manuel Collado wrote:
> perhaps col specifiers like:
...

> can be automatically converted to some equivalent CSS2 rules

The <COL> tag (where it works at all) applies to actual columns in a
table. The CSS that I've seen so far applies to the Nth <TD> tag, but
this doesn't define column N, when preceding <TD> tags have COLSPAN > 1

See http://swiftys.org.uk/columns.html where the "Oh!" has appeared in
the 4th column and been styled as the third TD.

[Swifty]

On 28/11/2012 10:49, Manuel Collado wrote:
> perhaps col specifiers like:
...

> can be automatically converted to some equivalent CSS2 rules

The <COL> tag (where it works at all) applies to actual columns in a
table. The CSS that I've seen so far applies to the Nth <TD> tag, but
this doesn't define column N, when preceding <TD> tags have COLSPAN > 1

See http://swiftys.org.uk/columns.html where the "Oh!" has appeared in
the 4th column and been styled as the third TD.

[Osmo Saarikumpu]

On 29.11.2012 9:30, Swifty wrote:

> An example of cascading blame... David points out your mistake, you
> point out my mistake, and I'm left with nothing to blame.

Well, I hear that many newcomers to CSS/USENET are confused by
style/blame inheritance... this should set them straight :)

> Can I see if I understand correctly:
>
> table.c3r td:nth-child(3) {text-align:right;}
>

> .... says that inside a TABLE tag, which applies class c3r, any TD tag

> which is the 3rd child would be right-aligned?

I'll try to be as precise as I can:

The selector selects any td element that is a third child that is a
descendant of a table element with a class attribute that contains the
word c3r. To such an element the text-align property is assigned with
the keyword value right, which sets a rule describing how the
inline-level content of such a td (block container) is to be aligned if
it does not get overruled by other rule(s) or settings.

Phew, I wonder who to blame if I messed up that one. Luckily in USENET
blame inheritance everything can be dumped on the OP :)

> So, I'll have to use the CSS solution with caution.

There's always the robust <td align="right"> approach, as Mr. Korpela
suggested, or you could assign a class to the TDs directly, e.g.:

td.currency {text-align:right;}

A little overhead, but best CSS support and not much trouble, at least
when designing new tables.

--
Best wishes, Osmo

[Andreas Prilop]

On Thu, 29 Nov 2012, Osmo Saarikumpu wrote:

> There's always the robust <td align="right"> approach, as Mr. Korpela
> suggested, or you could assign a class to the TDs directly, e.g.:
> td.currency {text-align:right;}

It is a bit more complicated.

td.currency { text-align: right }

has lower cascading order than

td:first-child+td { text-align: left }

You need something like

.zzz td.currency { text-align: right }

[Andreas Prilop]

On Thu, 29 Nov 2012, Swifty wrote:

> Presumably this would apply to the "wrong" column if either of the two
> preceding TD tags contained COLSPAN=2? I've tried this in practice,
> and (of course) it applies to the 3rd TD tag, not the 3rd column.

Quite so. Inspect the source text of
http://www.user.uni-hannover.de/nhtcapri/arabic-alphabet.html#vowels
http://www.user.uni-hannover.de/nhtcapri/table7.css
for an example. You need to insert another class or ID
to override td:first-child+td+td .

[Thomas 'PointedEars' Lahn]

Osmo Saarikumpu wrote:

> On 29.11.2012 9:30, Swifty wrote:
>> Can I see if I understand correctly:
>>
>> table.c3r td:nth-child(3) {text-align:right;}
>>
>> .... says that inside a TABLE tag, which applies class c3r, any TD tag
>> which is the 3rd child would be right-aligned?
>
> I'll try to be as precise as I can:
>
> The selector selects any td element that is a third child that is a
> descendant of a table element with a class attribute that contains the
> word c3r. To such an element the text-align property is assigned with
> the keyword value right, which sets a rule describing how the
> inline-level content of such a td (block container) is to be aligned if
> it does not get overruled by other rule(s) or settings.
>
> Phew, I wonder who to blame if I messed up that one. Luckily in USENET
> blame inheritance everything can be dumped on the OP :)

IMHO:

s/class attribute/`class' attribute value/

s/word/class name/ ("word" is ambiguous, but for "class name" there is a
production in the CSS grammar)

s/To/For/
s/property/property value/
s/assigned with/declared to be/

s/block container/table-cell box/ (the prevalent interpretation is that
contrary to CSS3 Box Model [WD] `table-*' elements are not block elements,
which was the rationale Mozilla.org used to remove `overflow: scroll'
support for tbody – shame on them).

"settings" would have to be expressed as CSS rules, so there is redundance.

Otherwise correct (unless I overlooked something). Congratulations.


PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

[Swifty]

On 29/11/2012 09:16, Osmo Saarikumpu wrote:
> There's always the robust <td align="right"> approach, as Mr. Korpela
> suggested, or you could assign a class to the TDs directly

It goes against the grain to specify right alignment on every TD in a
particular column. Even more so when COL is almost perfect for the job
(apart from not working in Firefox).

Having a computer then managing the alignment yourself is like owning a
dog and doing the barking yourself (and I should know; I own 4 dogs, and
people have called me "barking mad").

Anyway, thanks for all the various suggestions in this thread; I've
learned something useful, always a sign of a day that wasn't wasted.

[Swifty]

On 29/11/2012 08:02, Swifty wrote:
> The <COL> tag (where it works at all) applies to actual columns in a
> table.

...

My Thunderbird 17 would like to apologise for posting the same article
three times when Swifty pressed "Send" only once.

--
Steve Swift's troublesome Thunderbird 17.
http://www.swiftys.org.uk/