How to center XHTML (and/or HTML4) TABLE columns by colgroup?

Question

How to align all columns by colgroup? It works with colspan?

Example

This HTML here was tested with Firefox and Chrome, but no browser renderize the center for all expected columns.

  <table border="1" width="100%">
    <colgroup>
      <col style="text-align:center;background-color:red"/>
      <col align="center" valign="bottom" style="background-color:blue"/>
      <col align="center" valign="top" style="background-color:yellow"/>
    </colgroup>
    <tr>
      <th>ISBN</th>
      <th>Title</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>3476896</td>
      <td>My first HTML</td>
      <td align="center">$53</td>
    </tr>
    <tr>
      <td><big>5869207</big></td>
      <td>My first CSS</td>
      <td><small>$49</small></td>
    </tr>
  </table>

Use this example (copy/paste to) at w3schools.com/tags.

PS: What is wrong with align and valign attributes? Style (by text-align) also not responding.

---

EDIT

As I said above, I need a solution "by colgroup". It can be also "by colgroup or col tags with style attribute".

My template system need to use colgroup (!), not is valid a solution without colgroup. My system not need to compatiple with HTML5, it uses something like "XHTML module" (see ex. DTD).

Related questions

• Is html <COL align> deprecated? : not the same, because my problem is about XHTML, not about HTML5 (that is not XML and is a "plan for future standard").

Rusert

Ops, perhaps this is the problem, not supported except by Opera... But and about use of CSS styling? There are another "HTML setup", like DOCTYPE, that changes table behaviour? – Rusert

I hate to be a debbie downer but you can see the same thing repeated here #5262014 . As you may know google chrome auto updates itself, firefox has been supporting it for several years now, and IE has recently hopped on the bus. The support for colgroups is practically gone. I cant imagine the situation you would be required to use these for but best of luck! – Clown

OK, I add "Related questions": my problem is about XHTML, not non-XML HTML5. – Rusert

where you able to test it in IE7? I wouldnt be surprised if FireFox and Chrome never allowed these attributes in the first place (the only w3c allowed attributes are background-color, border, width, visibility) – Heedless

why does it need to be on colgroup? are you injecting it in some legacy code? you know u can use css without dropping colgroups – Heedless

@Ayyash, can you do colgroup char="character" align? With CSS2? XHTML standard use it, and my XML application use table module of XHTML. – Rusert

Answer 1

Well, thanks for all answers and clues. My conclusion, about colgroup, is

1. The HTML must be standard (XHTML1.0, XHTML1.1 or HTML4.X) compliant;

2. ... but only one browser (Opera) is standard compliant.
   (MS-IE have no "standard compliant" tradiction, we can ignore IE7 surprising case)

"How to center the columns by colgroup?": following the standards instructions... So, my HTML code (at this question introduction) was right all the time! My mistake was wanting to see it at any web-browser!

---

Some "correct questions" are (examples):

• Why another browsers not implemented the colgroup standard behaviour? At @ns47731's answer we see some clues. Perhaps web-browswer developer are expecting HTML5 and not XHTML2. See also @Alohci comment below.

• Why HTML5 and XHTML2 proposals diverge about colgroup? No clues at answers... My supposition: XHTML2 and HTML5 will be not 100% compatible.

• Can I negociate with my "template system developer" (a XSLT developer) to add this "XHTML1 standard compliant feature"? :-) Please help me in a lobby for PMC Article Previewer.

Rusert

Yup, that's more or less it. One of the reasons why new standards get written, is to supersede the bits of existing standards that are not worth the effort of implementation. Alignment by colgroup is one of those features. Note that Opera will almost certainly stop supporting it when it changes to the Blink rendering engine. – Antisocial

Answer 2

If you take a look at http://www.w3schools.com/tags/tag_colgroup.asp you will see that the tag is essentially being phased out as of html5. It is likely that your aligns arent working because your doctype is set to HTML5. In practice it would be not good to use a tag that is going out the door but if you have to use it try setting your doctype to html 4, otherwise I would recommend what Kontakt has said and use the CSS selector :nth-child.

Edit: I looked into it further and did some tests. Set doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Then run it in IE7. You will see it works! It seems many browsers don't support it even if your doctype is set to lower than 4. However good'ol IE7 still renders it. All that can be said is that it is a deprecated tag that doesn't work properly because it became unsupported long ago.

Clown

About HTML5: v5 have some taste of fork version, not the "next HTML"... My template and problems are with XHTML, transforming (rendering) by table module rules of XHTML 1.1 modularization, that is a W3C Recommendation of July 2010. – Rusert

About DOCTYPE: I tried my HTML example with all DOCTYPEs, but no one changes the behaviour of the "no DOCTYPE" test. It was with recent Firefox and Mozilla browsers... Do you try? – Rusert

Thanks -- you find that it works with MS-IE7! confirming my comment that DOCTYPE is a "HTML setup" for colgroup works in some browser --, I done 1 up vote to your question... But not destinate all the bounty. Only 0.8% uses MS-IE7 (Opera, that I indicated, is 1.6 %), so it not add a real (100%) issue... Sorry, I add my conclusion that it was not a good question. – Rusert

Answer 3

Why not use :nth-child(x) on td elements?

Add following code to your example in HEAD section:

<style type='text/css'>
 tr td:nth-child(3) {
  text-align:center;
 }
</style>

and see changes to your third column.

Buddle

Ok, it is the "normal way" to do the thing with CSS, but it is without any use of colgroup... I will reinforce this point in the question. – Rusert

Answer 4

 <table border="1" width="100%">
 <colgroup>
      <col style="text-align:center;background-color:red"/>
      <col align="center" valign="bottom" style="background-color:blue"/>
      <col align="center" valign="top" style="background-color:yellow"/>
 </colgroup>
    <tr>
      <th>ISBN</th>
      <th>Title</th>
      <th>Price</th>
    </tr>
    <tr>
      <th>3476896</th>
      <th>My first HTML</th>
      <th>$53</th>
    </tr>
    <tr>
      <th><big>5869207</big></th>
      <th>My first CSS</th>
      <th><small>$49</small></th>
    </tr>
  </table>

This at least centers your text in the cells, but like ns47731 its a deprecated tag so can't expect too much.

Boomkin

Ops1: you changed all TD tags to TH tags (!)... It is not a solution, the cels are not cel-headers (semantic and layout error). – Rusert

Ops2: HTML5 is not a standard today, and my problem is about XHTML (see DTD link, etc. there when you edited) or "old HTML 4.X". – Rusert

As per the question asked, "How to align all columns by colgroup?" this whether semantically correct or not reaches your resolve – Boomkin

No, your solution was not "by colgroup", was "by replacing all td tags by th tags"... And semantic consistent with the "question title", is not the same as "with the full-question". Title is a synopsis. – Rusert