Geek Answers Handbook

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

How to align all columns using colgroup? Does it work with colspan?

Example

This HTML code was tested using Firefox and Chrome, but no browser displayed a 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 in) at w3schools.com/tags .

PS: What is wrong with the align and valign ? The style (text alignment) is also not responding.

EDIT

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

My template system should use colgroup (!), Is not a valid solution without colgroup . My system does not need HTML5 compatibility, it uses something like an "XHTML module" ( see DTD Example ).

Related Questions

  • Is html <col align> deprecated? : not the same because my problem is with XHTML and not with HTML5 (this is not XML and is the "plan of the future standard").
+7
source share
4 answers

Ok, thanks for all the answers and tips. My conclusion, about colgroup ,

  • HTML must be standard (XHTML1.0, XHTML1.1 or HTML4.X) compatible ;

  • ... but only one browser ( Opera ) complies with the standard .
    (MS-IE does not have a "standard match", we can ignore the unexpected case of IE7)

“How to center colgroup columns?”: Following the instructions of the standard ... So, my HTML code (with this introduction of the question) was right all the time! My mistake was to see it in any web browser!

Some “right questions” (examples):

  • Why didn't other browsers implement the standard colgroup behavior? In response to @ ns47731 we see some clues. Perhaps the web-browswer developer expects HTML5 rather than XHTML2. See also @Alohci comment below.

  • Why do HTML5 and XHTML2 sentences differ about colgroup ? No hints in the answers ... My guess: XHTML2 and HTML5 will not be 100% compatible.

  • Can I discuss with my "template system developer" (XSLT developer) to add this "standard compatible XHTML1 function"? :-) Please help me in the lobby for the PMC Preview article .

+1
source

If you look at http://www.w3schools.com/tags/tag_colgroup.asp , you will see that the tag is essentially flattened with html5. Your alignment probably works because your doctype is installed in HTML5. In practice, it would be nice to use a tag that goes outside the door, but if you need to use it, try setting your doctype to html 4, otherwise I would recommend that Kontakt say and use the CSS: nth-child selector.

Edit: I looked at it further and did some tests. Install 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 that it works! It seems that many browsers do not support it, even if your doctype is installed below 4. However, good'ol IE7 still does this. All that can be said is an obsolete tag that does not work properly, because it has not been supported for a long time.

+5
source

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

Add the following code to your example in the HEAD section:

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

and see the changes in the third column.

+4
source 
  <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 cells, but like ns47731, its obsolete tag cannot expect too much.

+1
source

More articles:


All Articles