PDA

View Full Version : Using <COL> to define width (in %) and alignment



Uqbar
Mar 20th, 2009, 04:19 PM
I admit I'm a newbie: please don't laugh (too much).

I need to generate html by code and this is what I'd like to produce:


<html>
<body>
<table border="box">
<col width="10%" align= "right">
<col width="20%" align= "left">
<col width="10%" align="center">
<col width="20%" align= "left">
<col width="40%" align= "right">
<thead>
<tr>
<th>Col #1
<th>Col #2
<th>Col #3
<th>Col #4
<th>Col #5
<tfoot>
<tr>
<th colspan="5">Just 1!
<tbody>
<tr>
<td>Datum 1.1
<td>Datum 1.2
<td>Datum 1.3
<td>Datum 1.4
<td>Datum 1.5
<tr>
<td>Datum 2.1
<td>Datum 2.2
<td>Datum 2.3
<td>Datum 2.4
<td>Datum 2.5
</table>
</body>
</html>

Somehow I would expect to define both the column alignment and width once and for all with the <COL> tags.
While the "width" property seems to be honoured, the "align" doesn't, at least with Firefox ("Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.0.7) Gecko/2009030423 Ubuntu/8.10 (intrepid) Firefox/3.0.7"), the browser I need to support.
I have tested also a WebKit based client called Epiphany ("Mozilla/5.0 (X11; U; Linux x86_64; en-us) AppleWebKit/525.1+ (KHTML, like Gecko, Safari/525.1+) epiphany-webkit") with the same results.
My expectations seem to be driven by the official HTML v4.01 documentation. Nonetheless something is wrong.

Any hint?
Thanks.

abduraooft
Mar 20th, 2009, 04:30 PM
Um.. too close, check http://htmldog.com/reference/htmltags/col/

btw, closing your tags is always a good practice to avoid confusions and in xHTML, you need to close all tags.

Also, don't use deprecated align or width attribute. Make use of CSS.

.col1{
width:10%;
text-align:right;
}
.col2{
width:20%;
text-align:left;
}
.col3{
width:10%;
text-align:center;
}
.col4{
width:20%;
text-align:left;
}
.col5{
width:40%;
text-align:right;
}

<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
</colgroup>

Uqbar
Mar 20th, 2009, 04:37 PM
Thanks for the support, but I don't see any help more than the one I have from the W3.org document (http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4).

Does your browser honour the alignment definition in my HTML code?

Finally I do agree that closing the tags is nicer, but as I'm generating the HTML from code, I keep things simpler to avoid unneeded tags whenever possible.

Thanks again.

abduraooft
Mar 20th, 2009, 04:41 PM
Does your browser honour the alignment definition in my HTML code?
It should be like

<table border="box">
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
</colgroup>
<thead>
<tr>
<th>.........

Uqbar
Mar 20th, 2009, 04:49 PM
hmmm ...
I see your point and it seems to work.
And I actually found the deprecation statement of the property "align" far far away from the description of the <COL> tag. Even by following the link that's there to the "align" explanation there's no deprecation.

Thanks a lot.

abduraooft
Mar 20th, 2009, 04:52 PM
Check http://www.w3.org/TR/REC-html40/index/attributes.html

Uqbar
Mar 21st, 2009, 11:37 AM
My fault: it doesn't work.
My browser window was too small to appreciate the difference.
While the width is correctly set accordingly to the style, the alignment is not.
Of course, I've also tried a hand made HTML file with all the needed closing tags.
Nope. The alignment is not working.
Any further hint?

abduraooft
Mar 21st, 2009, 11:38 AM
Of course, I've also tried a hand made HTML file with all the needed closing tags.
Nope. The alignment is not working. Cold you post your current code?

Uqbar
Mar 21st, 2009, 11:51 AM
I've put the style in line with the <COL> tags as it makes more sense to my application to define the table details while creating the table.
Putting the stuff in the <STYLE> tag doesn't provide any difference, though.


<html>
<body>
<table border="1" frame="box">
<colgroup>
<col style="width:10%;text-align:right;">
<col style="width:20%;text-align:right;">
<col style="width:10%;text-align:right;">
<col style="width:20%;text-align:right;">
<col style="width:40%;text-align:right;">
</colgroup>
<thead>
<tr>
<th>Col #1</th>
<th>Col #2</th>
<th>Col #3</th>
<th>Col #4</th>
<th>Col #5</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5">Just 1!
</tr>
</tfoot>
<tbody>
<tr>
<td>Datum 1.1</td>
<td>Datum 1.2</td>
<td>Datum 1.3</td>
<td>Datum 1.4</td>
<td>Datum 1.5</td>
</tr>
<tr>
<td>Datum 2.1</td>
<td>Datum 2.2</td>
<td>Datum 2.3</td>
<td>Datum 2.4</td>
<td>Datum 2.5</td>
</tr>
</tbody>
</table>
</body>
</html>


Thanks for the patience.