<p>How to align all columns by <em>colgroup</em>? <strong>It works with <em>colspan</em>?</strong></p> <h3>Example</h3> <p>This HTML here was tested with Firefox and Chrome, but no browser renderize the center for all expected columns.</p> <pre class="prettyprint lang-js prettyprint-override"><code> <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> </code></pre> <p>Use this example (copy/paste to) at w3schools.com/tags.</p> <p>PS: What is wrong with <code>align</code> and <code>valign</code> attributes? Style (by text-align) also not responding.</p> <hr> <h3>EDIT</h3> <p>As I said above, I need a solution "by <em>colgroup</em>". It can be also "by <code>colgroup</code> or <code>col</code> tags with <code>style</code> attribute".</p> <p>My template system need to use <code>colgroup</code> (!), not is valid a solution without <code>colgroup</code>. My system not need to compatiple with HTML5, it uses something like "XHTML module" (see ex. DTD).</p> <h3>Related questions</h3> <ul> <li> 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").</li> </ul>

<p>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.</p> <p>Edit: I looked into it further and did some tests. Set doctype</p> <pre class="prettyprint"><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> </code></pre> <p>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.</p>

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

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").

How to use the <colgroup> tag in HTML?

Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements. Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag. The <colgroup> tag also supports the Global Attributes in HTML.

What are the colgroup and Col elements used for?

The colgroup and col elements are used to style columns in a table. Here is an example of an HTML table with the colgroup and col elements:

How to define different properties to a column within a <colgroup>?

Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag. The <colgroup> tag also supports the Global Attributes in HTML. The <colgroup> tag also supports the Event Attributes in HTML.

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.

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

Tags:

html

xhtml

colgroup

Example

EDIT

Related questions

Peter Krauss

People also ask

1 Answers

ug_

Recent Activity

Donate For Us