using "col" and "colgroup" tags in firefox?!?

A

Ask Josephsen

Hi NG

I'm having trouble aligning text in my tables, I would really like to use
the col- and colgroup-tags to do this, but I cant seem to make it work in
firefox 1.5 :(

Here is an example with two ways of aligning, but neither work:

<table border="1" width="600">
<colgroup>
<col span="2" width="75" />
<col span="2" width="150" style="background-color: red; text-align:right;"
/>
<col align="right" />
</colgroup>
<tbody>
<tr><th>One
</th><th>Two
</th><th>Three
</th><th>Four
</th><th>Five
</th></tr>
<tr><td>Green
</td><td>Blue
</td><td>Yellow
</td><td>Purple
</td><td>Orange
</td></tr>
</tbody>
</table>

Hope you can help me...

Thanx

--


Venlig hilsen

Ask Josephsen
Partner & IT

tlf.: 28 957031
mail: (e-mail address removed)

MinReklame ApS
Dronning Olgas Vej 39 B
2000 Frederiksberg

web: www.minreklame.dk
 
?

=?iso-8859-1?Q?Dav=E9mon?=

Ask Josephsen arranged shapes to form:
I'm having trouble aligning text in my tables, I would really like to use
the col- and colgroup-tags to do this, but I cant seem to make it work in
firefox 1.5 :(

unfortunately firefox is obeying the w3c guidelines on the style method:
http://www.w3.org/TR/REC-CSS2/tables.html#q4

the attribute align="left" should work fine, but validate your document and
make sure the table is well-formed.

hth
 
J

Jukka K. Korpela

Davémon said:
Ask Josephsen arranged shapes to form:

unfortunately firefox is obeying the w3c guidelines on the style method:
http://www.w3.org/TR/REC-CSS2/tables.html#q4

What's so unfortunate about it? If a specification is unsatisfactory, would
it really help to make some browsers behave against it, knowing that some
browsers will keep behaving according to it anyway.
the attribute align="left" should work fine,

Pardon? For what?
but validate your document and
make sure the table is well-formed.

And brush your teeth at least once a day.

Anyway, putting align="right" into individual <th> and <td> elements is the
most effective way of aligning cell contents to the right. This is admittedly
awkward especially if the table is right.

It is possible to make standards-conforming browsers align the cells using
just CSS, without need to throw attributes here and there and mess up the
markup. However, the CSS code gets verbose, e.g.

td:first-child + td + td,
td:first-child + td + td + td ,
td:first-child + td + td + td + td {
text-align: right; }

And you would need to add stuff for th if you really want to right-align
header cells, too.

P.S. Setting widths in pixels is an almost sure indicator of lack of good
reasons for using tables or lack of basic knowledge about how to use tables.
 
?

=?iso-8859-1?Q?Dav=E9mon?=

Jukka K. Korpela arranged shapes to form:
What's so unfortunate about it? If a specification is unsatisfactory, would
it really help to make some browsers behave against it, knowing that some
browsers will keep behaving according to it anyway.

I meant unfortunate for the OP.
Pardon? For what?

Aligning text left, or "right".
It is possible to make standards-conforming browsers align the cells using
just CSS, without need to throw attributes here and there and mess up the
markup.

Have attributes been depreciated or something? Perfectly clean and
legitimate last time I looked.
However, the CSS code gets verbose, e.g.

td:first-child + td + td,
td:first-child + td + td + td ,
td:first-child + td + td + td + td {
text-align: right; }

That's just bonkers, surely just throwing a class attribute in and single
css declaration would be cleaner.
 
J

Jukka K. Korpela

Davémon said:
Aligning text left, or "right".

I still don't see how you would align text right (as requested by the OP)
using align="left".
Have attributes been depreciated or something?

Yes. Didn't you know this? The align attribute in <td> does not belong to the
deprecated (sic) attributes at present, but it's still a presentational
attribute and therefore frowned upon in structured HTML authoring. That was
not my point, though. My point was that adding an attribute into a large
number of <td> elements makes the markup less legible and is inconvenient to
produce and manage in many situations, though good authoring tools might
help. Think about a table with a hundred rows and ten columns, with most
columns in need of aligning to the right.
That's just bonkers,

I said it's verbose. But the awkwardness is isolated into one part of a style
sheet, and the markup can be simple and logical: just <td>42</td> instead of
surely just throwing a class attribute in and single
css declaration would be cleaner.

How would <td class="numeric"> be cleaner than <td align="right">? It would
be (arguably) more structured and more logical, but it's not shorter.
 
D

David Dorward

That's just bonkers, surely just throwing a class attribute in and single
css declaration would be cleaner.

The CSS would be cleaner, the markup rather less so.
 
?

=?iso-8859-1?Q?Dav=E9mon?=

Jukka K. Korpela arranged shapes to form:
I still don't see how you would align text right (as requested by the OP)
using align="left".


Yes. Didn't you know this? The align attribute in <td> does not belong to the
deprecated (sic) attributes at present,

So "no they haven't been deprecated" is the answer to the question.
but it's still a presentational
attribute and therefore frowned upon in structured HTML authoring.

unfortunately purely structural HTML limits what is achievable, therefore
the need to /occasionally/ use presentational markup, /when required/.
That was
not my point, though. My point was that adding an attribute into a large
number of <td> elements makes the markup less legible and is inconvenient to
produce and manage in many situations, though good authoring tools might
help. Think about a table with a hundred rows and ten columns, with most
columns in need of aligning to the right.

then td {text-align:right} then make a class for the left-aligned ones.
I said it's verbose. But the awkwardness is isolated into one part of a style
sheet,

unless the table is being built dynamically, when it would be completely
unworkable. Or if the table was hundreds of rows/columns long when you'd
need to have a hugely bloated css file full of +td, which is only going to
work in the most modern browsers anyway.
and the markup can be simple and logical: just <td>42</td> instead of
<td align="right">42</td> or <td class="numeric">42</td> for (perhaps)
hundreds of cells.

Why is it more important to have "simple and logical" HTML than both
"simple and logical" CSS and HTML?
How would <td class="numeric"> be cleaner than <td align="right">?

I didn't say it would be. I said it would be cleaner than +td *1000 in the
CSS, but the class method is more flexible and semantic, so preferable.
 
J

Jukka K. Korpela

Davémon said:
So "no they haven't been deprecated" is the answer to the question.

No, not to the question you asked. "Yes" is the correct answer to the
question you actually asked. You asked "Have attributes been depreciated or
something?", not "Have the attributes been deprecated?"
unfortunately purely structural HTML limits what is achievable, therefore
the need to /occasionally/ use presentational markup, /when required/.

In this case, the attribute has a CSS counterpart, so I have no idea of what
you are referring to here.
Or if the table was hundreds of rows/columns long when you'd
need to have a hugely bloated css file full of +td, which is only going
to work in the most modern browsers anyway.

You seem to keep missing the point. The issue was how to do things on
standards-conforming browsers, given that IE can be handled with the
technique described originally.
 
A

Ask Josephsen

Hi

Thank you for the discussion, very interesting. David, you caught my problem
nicely "...a table with a hundred rows and ten columns...". My tables are
rather big and has various needs for aligning each column. My wish is to
define how each column should align once for each table and save as much
markup as possible in each row. For this the <colgroup> and <col> tags seems
to be a fine solution - except it does not really work in firefox. The
number of columns is fixed (different from table to table though) so the
stylesheet solution might be a solution.

--


Venlig hilsen

Ask Josephsen
Partner & IT

tlf.: 28 957031
mail: (e-mail address removed)

MinReklame ApS
Dronning Olgas Vej 39 B
2000 Frederiksberg

web: www.minreklame.dk
 
A

Alan J. Flavell

Thank you for the discussion, very interesting. David, you caught my
problem nicely "...a table with a hundred rows and ten columns...".
My tables are rather big and has various needs for aligning each
column. My wish is to define how each column should align once for
each table and save as much markup as possible in each row. For this
the <colgroup> and <col> tags seems to be a fine solution - except
it does not really work in firefox.

Wrong conclusion. It does not work *in CSS* (the cells are not
descendants of the col/colgroup elements). Firefox is just doing its
job (unlike some browser-like objects that one might mention).

See http://www.w3.org/TR/CSS21/tables.html#q4 to learn just how much
(or how little) can be influenced by styling the col/colgroup
elements.
The number of columns is fixed (different from table to table
though) so the stylesheet solution might be a solution.

If most of the cells use a specific alignment then (provided you
define your selectors sufficiently restrictively, e.g as above) you
can define that to be the default alignment for a parent element (tr
or table), and only define a different alignment for those columns
which are exceptions.

It seems to me, on the other hand, that an alternative approach is to
omit the first-child condition, just coding selectors for td, td+td,
td+td+td etc.

There was a discussion in early November which led to these test
documents of mine:

http://ppewww.ph.gla.ac.uk/~flavell/tests/poules.html
http://ppewww.ph.gla.ac.uk/~flavell/tests/poules2.html

and their associated stylesheets. They're just working tests based on
what the original poster had provided - nothing finished or polished,
but they might illustrate what I'm getting at.

In *that* case, if you don't code a selector for column 4, say, then
col.4 is going to match the selector for column 3, rather than
defaulting to the style for the row or table as a whole.

h t h
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Ask Josephsen wrote :
Hi

Thank you for the discussion, very interesting. David, you caught my problem
nicely "...a table with a hundred rows and ten columns...". My tables are
rather big and has various needs for aligning each column.

I wonder if you are using tables appropriately here. Remember that
tables should be used to present tabular data and nothing else.

"Tables should not be used purely as a means to layout document content
as this may present problems when rendering to non-visual media.
Additionally, when used with graphics, these tables may force users to
scroll horizontally to view a table designed on a system with a larger
display. To minimize these problems, authors should use style sheets to
control layout rather than tables."
HTML 4.01, section 11.1
http://www.w3.org/TR/html401/struct/tables.html#h-11.1

HTML 4.01, ATAG 1.0, WCAG 1.0/2.0 and several usability/accessibility
recommend to use tables only for tabular data.

You may want to read my post in this forum in the thread with subject
line "Layout using CSS vs. tables" and

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

My wish is to
define how each column should align once for each table and save as much
markup as possible in each row. For this the <colgroup> and <col> tags seems
to be a fine solution - except it does not really work in firefox.

That's bug 915 actually:

Bug 915: implement inheritance of alignment attributes from columns
(align, valign, char, charoff, (lang, dir)?)
https://bugzilla.mozilla.org/show_bug.cgi?id=915

You may try the -moz-box-align property (not tried so far) to
compensate/workaround this issue:

http://www.xulplanet.com/references/elemref/ref_StyleProperties.html

Otherwise, Jukka's workaround is excellent.
The
number of columns is fixed (different from table to table though) so the
stylesheet solution might be a solution.

Gérard
 
J

Jose

Ok, so out of the list of resources I pick:

Interestingly, it's taken from here.

My (netscape 7.2) browser is set to about 400 pixels wide. Not very
generous, but not very stingy on a laptop where I'm also working on
something else at the same time (why don't webmasters realize this??)

The search window is on top of the title "alt.html", blocking it. (at
least it has priority). There is a blue top and a black bottom
(background) to the header, which is broken up, putting the list of
"recommended resources" and such (blue links) mostly on top of the black
background. On the left is the primary content. It goes as follows:
Very
Simple,
tables
are
for
structuring
tabular
data
..... and so on for about sixteen screens. One word per line, the rest
of the window (on the right) is white space. I can widen the window
some, and get (sometimes) two or three words per line, but I have to
allocate 600 pixels of width first. By the time I allocate 1200 pixels
of width I get reasonable column width, but easily a third of the
remainder is blank space on the right. At least it's not blank space on
the left. But even at 1200 pixels, if I increase the font size (thank
you for allowing the font size to be increased!) I'm back to a five or
six word column, and the entire right half of my window wasted (below
the recommended resources list).

This is not a good reccomendation of CSS.

What I would have done (with tables) is put in a table with two columns,
100% width. The right column would contain the reomended resources.
The left column would contain the first two paragraphs of "why I should
sometimes use tables even though CSS is the in thing". It would end
with "continued below", and would be continued below the table, allowing
the full width of the browser to be used for the rest of the long article.

Using a column of the browser for something that doesn't extend down to
forever is poor form. The fix is for browsers to support something like
"flow" but since the webmaster has no control over the user's browsers,
workarounds will always be needed. Tables make a good workaround in
some cases, and should -not- be deprecated. They should not be used
indiscrimenently, but they have their place, so long as the web is
imperfect.

Jose
 
J

Jose

?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Jose wrote :
Ok, so out of the list of resources I pick:



Interestingly, it's taken from here.

My (netscape 7.2) browser is set to about 400 pixels wide. Not very
generous, but not very stingy on a laptop where I'm also working on
something else at the same time (why don't webmasters realize this??)

Creating a web page which will be scalable for visual media and for
small screen devices (media="mobile") is still quite difficult, rare on
the web. I'd say you need a special stylesheet for such webpage.
The search window is on top of the title "alt.html", blocking it. (at
least it has priority). There is a blue top and a black bottom
(background) to the header, which is broken up, putting the list of
"recommended resources" and such (blue links) mostly on top of the black
background. On the left is the primary content. It goes as follows:
Very
Simple,
tables
are
for
structuring
tabular
data
.... and so on for about sixteen screens. One word per line, the rest
of the window (on the right) is white space. I can widen the window
some, and get (sometimes) two or three words per line, but I have to
allocate 600 pixels of width first. By the time I allocate 1200 pixels
of width I get reasonable column width, but easily a third of the
remainder is blank space on the right. At least it's not blank space on
the left. But even at 1200 pixels, if I increase the font size (thank
you for allowing the font size to be increased!) I'm back to a five or
six word column, and the entire right half of my window wasted (below
the recommended resources list).

You describe what you see here when you resize the viewport (or do
something) of your NS 7.2. I am not by your side looking at your screen,
you know. So it's not obvious being able to follow what you say.
Addendum: I re-read the whole thing again and I think I understand what
you're saying. What if the page was intended for visual browsers with a
minimum of 800x600 or 640x480 scr. res.? (ie. body {min-width: 620px;})
And not for devices with Small Screen Resolution (SSR)?
This is not a good reccomendation of CSS.

What I would have done (with tables) is put in a table with two columns,
100% width. The right column would contain the reomended resources. The
left column would contain the first two paragraphs of "why I should
sometimes use tables even though CSS is the in thing". It would end
with "continued below", and would be continued below the table, allowing
the full width of the browser to be used for the rest of the long article.

You want *_blocks_* (block-level elements) to line-wrap, not just inline
elements.

Using a column of the browser for something that doesn't extend down to
forever is poor form.

Well, I disagree. At least, my and your opinion would be debattable.
Filling up a viewport all the time is one reason (among others) why
people do not like/visit back some webpages.
The fix is for browsers to support something like
"flow"

Browsers (modern ones; 2001 and later) all do support normal flow of the
root element and line-wrapping, you know. What some do not understand is
that absolutely positioned elements (including fixed positioned
elements) are taken out from normal flow, therefore can not wrap like in
normal flow. Floats do not line-wrap by definition; you can use floats
to create a CSS 2 or 3 column webpage. Floats could be a better solution
in some cases but then MSIE 6 has many implementation bugs. inline-block
elements, run-in blocks, etc. could also possibilities but browser
support is close to nil.
but since the webmaster has no control over the user's browsers,
workarounds will always be needed.

I disagree. It would take me a lot of time, explanations to explain
myself here.
I think what's important for now is to make good bug reports (along with
good reduced testcases) to browser manufacturers and then hope/wait they
will understand and fix those bugs.

Tables make a good workaround in
some cases, and should -not- be deprecated. They should not be used
indiscrimenently, but they have their place, so long as the web is
imperfect.

Jose

I tried to understand to the best of my ability your post and couldn't
figure out some parts of your post.

Nevertheless I can say that all of the available CSS templates are not
done the same way. There are many types of CSS templates.

Some CSS templates use negative margins, some use floats, some use
position: absolute, some use a bit of all. You can even find some that
rely on javascript to position page elements... which is definitely not
recommendable.

Some templates are based on fixed, rigid columns, therefore not scalable
when the browser viewport is resized. Some templates are fluid, scalable
when the browser viewport is resized. Some are not scalable when the
font-size is increased: in such cases, the width of blocks increase and
eventually create an overflow of the document box. So, right here, you
have 2 ways (2 types of page scalability) to make a CSS template
scalable, fluid and both may not work well together. Etc..

Some CSS templates have both elements: 1 fluid column and 1 rigid column
(just like that page
http://www.html-faq.com/csspositioning/?csslayout
you visited). Floats, abs. pos. and negative margins still have not been
implemented in all modern browsers (MSIE 6, Firefox 1.5, Opera 8.5+,
Safari 2.x, etc.) the same way or according to web standards: so there
are still problems to be worked around.

Gérard
 
J

Jose

Creating a web page which will be scalable for visual media and for small screen devices (media="mobile") is still quite difficult, rare on the web. I'd say you need a special stylesheet for such webpage.

Tables work, and are pretty universally supported.
What if the page was intended for visual browsers with a minimum of 800x600 or 640x480 scr. res.? (ie. body {min-width: 620px;}) And not for devices with Small Screen Resolution (SSR)?

It would be impolite. Websites should resize gracefully - even if
somebody has the requisite screen area, they may not want to (or be able
to) devote the entire screen to the webmasters wonderful creation. They
may actually be doing other things too.

For example, if I am compiling a list of whatever, I may copy and paste
from the website into Notepad or a word processor, and run both programs
side by side. 800x600 becomes 400x600 right away.
Well, I disagree. At least, my and your opinion would be debattable. Filling up a viewport all the time is one reason (among others) why people do not like/visit back some webpages.

Well, then we disagree. And I'm not sure we can debat it since baseball
season is over. :)

One of my pet peeves is websites that have all their content on the
right. When the left third of the viewport is empty (having finished
with the four entry navigation bar), all that space is wasted and I have
to shrink the viewport and scroll right, or hang the window off the edge
of the screen, in order to read what the website says. As for your
contention that "filling the viewport" is a reason why people don't like
certain sites, I'd say that the problem is rather that long lines are
harder to read than short ones, and it would be nice if the presentation
could be in columns, like a newspaper. That would be a nice trick for
the browser to be able to perform (and actually, there is no reason I
can see why a browser should not have a user preference to present text
in columns like that under certain circumstances (columnize if width>120em)
I think what's important for now is to make good bug reports

Well, sure, but bug reports don't make my site flow. At best, they help
future browsers work better, and maybe some of my viewers will have
those browsers in the future (but the old ones will be around for a long
while).

Sometimes the simple cludge is better than the elegant solution.

Not always. Sometimes.

Jose
 
D

David Dorward

Jose said:
As for your contention that "filling the viewport" is a reason why people
don't like certain sites, I'd say that the problem is rather that long
lines are harder to read than short ones

Thankfully we have max-width. Shame IE doesn't support it yet.
, and it would be nice if the presentation could be in columns, like a
newspaper. That would be a nice trick for the browser to be able to
perform (and actually, there is no reason I can see why a browser should
not have a user preference to present text in columns like that under
certain circumstances (columnize if width>120em)

A user preference? Certainly. I'd much rather just scroll down. As for
people who use screen magnification software ...

http://blog.dorward.me.uk/2005/11/15/multicol.html
 
A

Alan J. Flavell

I don't agree. There's a reason that newspapers do what they do - and
it doesn't have any relevance to on-screen displays. Multi-column
presentations might be ok for a print-only stylesheet, but they're
madness for projection or handheld, and, speaking personally, I
heartily dislike them for conventional screen display also.

On the rare occasions that I've made available a browser window that's
uncomfortably wide for lines of text, I'd expect max-width (specified
in em units, of course) to solve that problem for me. Those who
choose to use a browser-like object which omits to implement max-width
must make their own arrangements, as far as I'm concerned - CSS is
meant to be optional, after all.

So no - in a general WWW context, IMO it would *not* be nice if the
presentation was "like a newspaper".

Columnar presentation *can* be useful when the columns are meant to be
read alongside each other, e.g an original text and its translation,
or an original text and a comprehensive commentary on it. But that
then stands to be rated as "tabular data" and presented using table
markup, quite different from the usual situation "like a newspaper".
A user preference? Certainly. I'd much rather just scroll down. As for
people who use screen magnification software ...

http://blog.dorward.me.uk/2005/11/15/multicol.html

Count me in on that argument!

cheers
 
J

Jose

Thankfully we have max-width. Shame IE doesn't support it yet.

What does max-width do? If all it does is limit the width, no matter
what the user wants, that's Bad. The user should be able to dictate
terms. However, if it forms two columns out of one, then that's ok.

Jose
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,834
Latest member
BuyCannaLabsCBD

Latest Threads

Top