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

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

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.

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.

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

Well, thanks for all answers and clues. My conclusion, about colgroup, is
The HTML must be standard (XHTML1.0, XHTML1.1 or HTML4.X) compliant;
... 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.

Related

Table alignment in a single HTML page

This is a theme, HTML or css issue. So please don't leave this when I mention "tiki". I believe it can be solved with a supposedly simple css script.
In our university page, I use the Tiki-wiki platform. Please take a look at the people page. This page consists of multiple tables, in each, there's a group of people listed.
The problem: In the previous version of Tiki, all names in the whole page were aligned without my intervention. Now in the new version of Tiki, you see that all names are not aligned. Every table has its own positioning of the names. This is the case although all tables have exactly the same html tagging and css styling and exactly same image sizes.
The fact that this worked in the previous version of tiki, made me believe that this is nothing but a styling issue, since themes also were updated.
Could you please tell me what I have to do to fix this and make all names aligned? For each table I created my own div with class name "peopletablediv".
If you require any additional information, please ask.
PS: Recreating the whole page isn't a preferred solution.
Just add
.peopletablediv .wikitable {
table-layout: fixed;
}
to your site's CSS and you're done.
In the CSS, you can specify a fixed size for the td conaining pictures :
.wikicell
{
width: 408px; /* or any convenient value here */
}
I'd try to add this to your CSS
.wikitable > tr > .wikicell:first-child{
width: 350px;
}
For an HTML solution, you could add a <colgroup> to each of the tables, just below the <table> tag:
<colgroup>
<col style="width: 380px;" />
<col colspan="2" />
</colgroup>
So the table code might look like this:
<table class="wikitable table table-striped table-hover">
<colgroup>
<col style="width: 380px;">
<col colspan="2" style="background-color:yellow">
</colgroup>
<tbody>
<tr>
<td class="wikicell"><a><img width="120" ...></a>
</td>
<td colspan="2" class="wikicell">Prof. Dmitry Budker <br><a ...>Send e-mail</a>
</td>
</tr>
</tbody>
</table>
Sorry i can't add a comment, not enough "points" still apparently, so this is more of a question than an answer...
Which version of Tiki did you upgrade to and from? (we released 4 new versions the other day) And where is "the people page", sorry, i don't see a link.
If you upgraded from Tiki 12 (say) to 13 or 14 then the whole framework has changed to Bootstrap so some extra custom CSS may well be needed to recreate previous appearances (as you suspected). Can't really tell exactly what without an example.
Hope i can improve my "answer" when i have a little more info, thanks :)

IE ignores one col's width if there is no unspanned cell

My problem is quite easily demonstrated:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
<colgroup>
<col width="75">
<col width="75">
<col width="75">
<col width="75">
</colgroup>
<tr>
<td colspan="2">Cells 1 + 2</td>
<td colspan="2">Cells 3 + 4</td>
</tr>
</table>
</body>
</html>
While Firefox (15.0.1) creates a table with two cell's, each 150 pixels...
... Internet Explorer (9.0.8112.16421) uses only col three for the width:
As soon as the table contains a row with a cell in the fourth column that does not span over another one, the width definitions work as expected.
I guess that IE things to itself "oh, well, there is no other colum behind the third one - let's ignore the col definition". But I have no idea how to avoid this problem. Any suggestions? And, of course, explanations that go beyond tele-introspection are welcome as well :)
To avoid discussions regarding this example's sense: The columns are defined automatically by a function that does not know if the latter cells will be used separately (at least once) or not.
Set a width for the TABLE itself.
<table border="1" width="300">

How to right align text in table cell with <col/>

I want the second column to be right-aligned and I don't want to apply styles to <td> element. From what I've read <col> is the way to go but it does not work for me:
<table>
<col style="width: 20em" />
<col align="right" style="text-align: right" />
<col />
<tbody>
<tr>
<td>123</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>12345678</td>
<td>189</td>
<td>2</td>
</tr>
</tbody>
</table>
Tried <colgroup> with no luck as well. Any ideas?
p.s.
Latest Chrome, FF5
Apparently only IE and Opera allow align.
Update, col should only have border, background, width & visibility. Has to do with css inheritance. http://ln.hixie.ch/?start=1070385285&count=1 (note, I only skimmed this article but it seemed like a decent read).
How exactly do people who set the standards operate? The obvious thing to do would be have the new way working before removing something from the standard. I am disappointed that this is not easy.
People have been right-aligning text in excel for 15 years yet the latest & greatest HTML 5 can't handle it.
This is more of a rant but the answer is get some people on the standards committee who know what they are doing. I'm sure to be slated for my answer but the fact that the question had to be asked on StackOverflow means it it too difficult to align text in HTML
You can apply a class to the col element, and then style however you want.
<col class="something" />
And
col.something
{
text-align: right;
}

Firefox 4/5 table border issue with rules=all

Here is a simple table example of using table rules=all with cell borders
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<table rules="all">
<tr>
<td style="border: red solid 1px;">
Title
</td>
</tr>
</table>
</body>
</html>
In most browsers (including Firefox 3.6) it comes out with a red border round the cell, but in Firefox 5 (and IIRC also Firefox 4) there is no cell border.
Is this a bug in Firefox or is there some variation allowed by the specification?
On a related point, is there any point in using the table rules attribute? It doesn't seem to be deprecated but I can't see it does anything that you couldn't do in CSS. In this case, ASP.NET was generating it automatically otherwise I would never have used it.
There is no spec for what rules="all" actually does yet, so pretty much any behavior is "correct".
That said, the current Firefox behavior is to map rules="all" to some border styles in the collapsed border model. Given the details of that mapping (which are currently in the HTML5 draft at http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#tables ), the observed behavior is correct.
The 'rules' are only displayed if there are other td's to separated it from. And then the style information is partly overwritten by the adjacent cells. If you create a 3x3 table like this
<table rules="all">
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
<td>foo</td>
<td style="border: red solid 1px;">
Title
</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
</table>
FF5 will draw red lines at the right and bottom of the "Title" cell and the others black. Seems like the style information of upper and more left cells is more powerful.
Hope this helps
Cheers
tannerli
I can't answer the first part - although I was able to make it work by adding some kind of border to the table tag: http://pastehtml.com/view/b35h9852w.html
According to w3schools, you are recommended to only use CSS for this sort of styling (and I agree).
It does appear to be a bug in Firefox, though. I can't find a clear explanation either way.

Reset.css is overriding colgroup background in IE7/IE6

I have a table where the columns have a different background set by a colgroup. However, in IE6/7 it's completely ignoring the colgroup background and taking the reset.css background value for the cell (which is background:transparent). How can I fix this without having to go to each cell and manually entering a background value?
HTML
<table id="services-table" border="0" cellpadding="0" cellspacing="0" width="100%">
<colgroup>
<col class="services-oddcolumn" />
<col class="services-evencolumn" />
</colgroup>
<tbody>
<tr>
<td>Column #1, Row #1</td>
<td>Column #2, Row #1</td>
</tr>
<tr>
<td>Column #1, Row #2</td>
<td>Column #2, Row #2</td>
</tr>
</tbody>
RESET(this is placed above the main CSS file)
html,body, table,tr,th,td {background:transparent;} //it's taking this background value for TD and column
CSS
.services-oddcolumn{background-color:#000 !important; width:10%;}
.services-evencolumn{background-color:#fff !important; width:10%;}
EDIT - In the end there's no "clean" fix, I just had to change the reset.css file so table,tr,th,td tags were excluded from background:transparent property
Firstly, congratulations on even knowing about the <colgroup> tag, let alone using it. It's not exactly the most well-known element in the HTML developers arsenal.
Sadly however, one of the reasons it's not very well known is that it is not very well supported, and it sounds like you've hit upon a bug which you're not going to be able to work around.
Have a look at this page: http://marc.baffl.co.uk/bugs.php and search for the word 'colgroup'. You'll find a description of various bugs you'll encounter, along with a table of which browsers support it properly at all. Unfortunately for you, IE6 and IE7 have the word "no" in every column of that table.
You may have a hard time getting this working if you plan to support IE6 and IE7.
[EDIT]
It's worth noting that this lack of support in IE is particularly ironic given that <colgroup> was originally an IE-specific extension back in the IE4 days.
If you want to support older IEs, my suggestion would be to abandon <colgroup> and simply use classes on your <td> elements to achieve the same effect.