Menu
How to align all columns by colgroup? It works with colspan?
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.
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).
485
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.
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:
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.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
