TD : Width of col goes haywire when a lengthy data is inserted. Why?

#1 July 20th, 2005, 08:11 PM

Hi folks.

A premature and redundant question maybe... But I have a TABLE
problem.

This is almost something like what I want to acheive.

-----------------------------------------
| | | | |
| Col1 | Col2 | Col3 | Col4 |
| | | | |
-----------------------------------------
| | |
| | Colspan=3 |
| | |
-----------------------------------------

And this is what I have been trying...

<HTML>
<HEAD></HEAD>
<BODY>
<TABLE BORDER=1 ALIGN="CENTER" CELLSPACING="0" WIDTH="744px" STYLE="">

<TR>
<TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
Goods</TD>
<TD WIDTH="126px" ALIGN=CENTER VALIGN=MIDDLE STYLE="">
Quantity(Nos.)</TD>
<TD WIDTH="126px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Rate(Rs.)</TD>
<TD WIDTH="119px" ALIGN=CENTER VALIGN=MIDDLE STYLE="">
Amount(Rs.)</TD>
</TR>

<TR>
<TD HEIGHT="200px" COLSPAN=1 ALIGN=LEFT VALIGN=TOP
STYLE="word-wrap:normal;"> This is an html test to see why the widths
of the columns go haywire when large text is input... </TD>
<TD HEIGHT="200px" COLSPAN=3 ALIGN=LEFT VALIGN=MIDDLE
STYLE="word-wrap:normal;">
This is an html test to see why the widths of the columns go haywire
when large text is input... </TD>
</TR>

</TABLE>
</BODY>
</HTML>

Right, now to my problem.. If the text in the second row is lengthy,
it wraps accordingly, however the widths of the cells go for a toss.
Why so?

I browsed through some of the earlier posts, and they happen to say
that the WIDTH attr for a <TD> is not supported.
The html is generated/rendered through an external app; hence nesting
of tables is out of the question....
This is basically for our intranet, and all systems use IE 5.5+

Anyone out there with an answer?? I hope someone will oblige.

Regards,
Rithish.

#2 July 20th, 2005, 08:11 PM

rithish@dacafe.com (Rithish) wrote:
[color=blue]
>Hi folks.
>
>A premature and redundant question maybe... But I have a TABLE
>problem.
>
>This is almost something like what I want to acheive.
>
> -----------------------------------------
> | | | | |
> | Col1 | Col2 | Col3 | Col4 |
> | | | | |
> -----------------------------------------
> | | |
> | | Colspan=3 |
> | | |
> -----------------------------------------
>
>And this is what I have been trying...
>
><HTML>
><HEAD></HEAD>
><BODY>
><TABLE BORDER=1 ALIGN="CENTER" CELLSPACING="0" WIDTH="744px" STYLE="">
>[/color]
[first row:][color=blue]
><TR>
><TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
>Goods</TD>[/color]
....

[second row:][color=blue]
><TR>
><TD HEIGHT="200px" COLSPAN=1 ALIGN=LEFT VALIGN=TOP
>STYLE="word-wrap:normal;"> This is an html test to see why the widths
>of the columns go haywire when large text is input... </TD>[/color]
....

First: If in the first row you tell the browser that the table's first
column is 372 pixels wide, and then in the second row you tell it that
the first column is 200 pixels wide, what do you *expect* the poor
browser to do?

Second: The HTML "width" attribute is valid in HTML 4.01 transitional
but not in strict. As with all layout characteristics, recommended
practice is to use CSS rather than HTML attributes. The same goes for
alignment, borders, and cell spacing.

Third: The HTML "width" attribute is treated as a minimum width, not a
maximum. If the content is too large for the stated width, the actual
width will be larger than the stated width.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

#3 July 20th, 2005, 08:11 PM

Harlan Messinger wrote:
[color=blue]
> rithish@dacafe.com (Rithish) wrote:
>
>[color=green]
>>Hi folks.
>>
>>A premature and redundant question maybe... But I have a TABLE
>>problem.
>>
>>This is almost something like what I want to acheive.
>>
>>-----------------------------------------
>>| | | | |
>>| Col1 | Col2 | Col3 | Col4 |
>>| | | | |
>>-----------------------------------------
>>| | |
>>| | Colspan=3 |
>>| | |
>>-----------------------------------------
>>
>>And this is what I have been trying...
>>
>><HTML>
>><HEAD></HEAD>
>><BODY>
>><TABLE BORDER=1 ALIGN="CENTER" CELLSPACING="0" WIDTH="744px" STYLE="">
>>[/color]
> [first row:]
>[color=green]
>><TR>
>><TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
>>Goods</TD>[/color]
>
> ...
>
> [second row:]
>[color=green]
>><TR>
>><TD HEIGHT="200px" COLSPAN=1 ALIGN=LEFT VALIGN=TOP
>>STYLE="word-wrap:normal;"> This is an html test to see why the widths
>>of the columns go haywire when large text is input... </TD>[/color]
>
> ...
>
> First: If in the first row you tell the browser that the table's first
> column is 372 pixels wide, and then in the second row you tell it that
> the first column is 200 pixels wide, what do you *expect* the poor
> browser to do?[/color]

It's the height that is 200px, not the width, but your point is still
valid. Given a fixed rectangular size and an arbitrary amount of text,
what can the browser do?

--
Mark.

#4 July 20th, 2005, 08:11 PM

"Mark Tranchant" <mark@tranchant.plus.com> wrote in message
news:_SUDc.382$Fc7.96361@stones.force9.net...[color=blue]
> Harlan Messinger wrote:
>[color=green]
> > rithish@dacafe.com (Rithish) wrote:
> >
> >[color=darkred]
> >>Hi folks.
> >>
> >>A premature and redundant question maybe... But I have a TABLE
> >>problem.
> >>
> >>This is almost something like what I want to acheive.
> >>
> >>-----------------------------------------
> >>| | | | |
> >>| Col1 | Col2 | Col3 | Col4 |
> >>| | | | |
> >>-----------------------------------------
> >>| | |
> >>| | Colspan=3 |
> >>| | |
> >>-----------------------------------------
> >>
> >>And this is what I have been trying...
> >>
> >><HTML>
> >><HEAD></HEAD>
> >><BODY>
> >><TABLE BORDER=1 ALIGN="CENTER" CELLSPACING="0" WIDTH="744px" STYLE="">
> >>[/color]
> > [first row:]
> >[color=darkred]
> >><TR>
> >><TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
> >>Goods</TD>[/color]
> >
> > ...
> >
> > [second row:]
> >[color=darkred]
> >><TR>
> >><TD HEIGHT="200px" COLSPAN=1 ALIGN=LEFT VALIGN=TOP
> >>STYLE="word-wrap:normal;"> This is an html test to see why the widths
> >>of the columns go haywire when large text is input... </TD>[/color]
> >
> > ...
> >
> > First: If in the first row you tell the browser that the table's first
> > column is 372 pixels wide, and then in the second row you tell it that
> > the first column is 200 pixels wide, what do you *expect* the poor
> > browser to do?[/color]
>
> It's the height that is 200px, not the width,[/color]

Oops. What's the emoticon for "embarrassed"?
[color=blue]
> but your point is still
> valid. Given a fixed rectangular size and an arbitrary amount of text,
> what can the browser do?[/color]

#5 July 20th, 2005, 08:11 PM

"Rithish" <rithish@dacafe.com> wrote in message
news:fdacfdda.0406280350.e748d20@posting.google.co m...[color=blue]
> Hi folks.
>
> A premature and redundant question maybe... But I have a TABLE
> problem.
> And this is what I have been trying...
>
> <HTML>
> <HEAD></HEAD>
> <BODY>
> <TABLE BORDER=1 ALIGN="CENTER" CELLSPACING="0" WIDTH="744px" STYLE="">[/color]

WIDTH="744px" is incorrect. Drop the 'px'. HTML dimensions are always in
pixels.

Also, you should specify the width in CSS as well, since browsers honour
CSS-specified widths better than HTML-specified widths. (And in CSS, note
that you do NOT drop the 'px', since CSS supports units other than pixels.

#6 July 20th, 2005, 08:11 PM

"Rithish" <rithish@dacafe.com> wrote in message
news:fdacfdda.0406280350.e748d20@posting.google.co m...[color=blue]
> Hi folks.
>
> A premature and redundant question maybe... But I have a TABLE
> problem.[/color]

[color=blue]
> Right, now to my problem.. If the text in the second row is lengthy,
> it wraps accordingly, however the widths of the cells go for a toss.
> Why so?[/color]

A table cell is a slave to its contents. That's the way it goes.

-Karl

#7 July 20th, 2005, 08:11 PM

Rithish wrote:[color=blue]
> <TABLE BORDER=1 ALIGN="CENTER" CELLSPACING="0" WIDTH="744px" STYLE="">
>
> <TR>
> <TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
> Goods</TD>
> <TD WIDTH="126px" ALIGN=CENTER VALIGN=MIDDLE STYLE="">
> Quantity(Nos.)</TD>
> <TD WIDTH="126px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Rate(Rs.)</TD>
> <TD WIDTH="119px" ALIGN=CENTER VALIGN=MIDDLE STYLE="">
> Amount(Rs.)</TD>
> </TR>
>[/color]
You can use
<colgroup>
<col width="372" />
...
</colgroup>

Given the number of attributes you are using a few CSS classes would
make layout easier to develop.

--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

#8 July 20th, 2005, 08:11 PM

James Moe <jmm-list.TRSPAMTR@sohnen-moe.com> wrote in message news:<cbpit6$ihh$0@216.39.176.218>...[color=blue]
> Rithish wrote:[color=green]
> > <TABLE BORDER=1 ALIGN="CENTER" CELLSPACING="0" WIDTH="744px" STYLE="">
> >
> > <TR>
> > <TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
> > Goods</TD>
> > <TD WIDTH="126px" ALIGN=CENTER VALIGN=MIDDLE STYLE="">
> > Quantity(Nos.)</TD>
> > <TD WIDTH="126px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Rate(Rs.)</TD>
> > <TD WIDTH="119px" ALIGN=CENTER VALIGN=MIDDLE STYLE="">
> > Amount(Rs.)</TD>
> > </TR>
> >[/color]
> You can use
> <colgroup>
> <col width="372" />
> ...
> </colgroup>
>
> Given the number of attributes you are using a few CSS classes would
> make layout easier to develop.[/color]

Right.. Thanks.. But can't it be done just with TD? I checked the
style attribute property list of TD, and "width" is not one of them.

Regards,
Rithish.

#9 July 20th, 2005, 08:11 PM

Harlan Messinger <hmessinger.removethis@comcast.net> wrote in message news:<9640e0tg97bejjvoum3re6n5s5pel14e77@4ax.com>. ..[color=blue]
> rithish@dacafe.com (Rithish) wrote:
>[color=green]
> >Hi folks.
> >
> >A premature and redundant question maybe... But I have a TABLE
> >problem.
> >
> >This is almost something like what I want to acheive.
> >
> > -----------------------------------------
> > | | | | |
> > | Col1 | Col2 | Col3 | Col4 |
> > | | | | |[/color]
> -----------------------------------------[color=green]
> > | | |
> > | | Colspan=3 |
> > | | |
> > -----------------------------------------
> >
> >And this is what I have been trying...
> >
> ><HTML>
> ><HEAD></HEAD>
> ><BODY>
> ><TABLE BORDER=1 ALIGN="CENTER" CELLSPACING="0" WIDTH="744px" STYLE="">
> >[/color]
> [first row:][color=green]
> ><TR>
> ><TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
> >Goods</TD>[/color]
> ...
>
> [second row:][color=green]
> ><TR>
> ><TD HEIGHT="200px" COLSPAN=1 ALIGN=LEFT VALIGN=TOP
> >STYLE="word-wrap:normal;"> This is an html test to see why the widths
> >of the columns go haywire when large text is input... </TD>[/color]
> ...
>
> First: If in the first row you tell the browser that the table's first
> column is 372 pixels wide, and then in the second row you tell it that
> the first column is 200 pixels wide, what do you *expect* the poor
> browser to do?
>
> Second: The HTML "width" attribute is valid in HTML 4.01 transitional
> but not in strict. As with all layout characteristics, recommended
> practice is to use CSS rather than HTML attributes. The same goes for
> alignment, borders, and cell spacing.
>
> Third: The HTML "width" attribute is treated as a minimum width, not a
> maximum. If the content is too large for the stated width, the actual
> width will be larger than the stated width.[/color]

Thanks Harlan.. I am still a novice at this.. I had no inkling about
the min/max characteristics of the width attribute.

Regards,
Rithish.

#10 July 20th, 2005, 08:11 PM

rithish@dacafe.com (Rithish) wrote:
[color=blue]
>Right.. Thanks.. But can't it be done just with TD?[/color]

Doesn't matter whether you do it with <td> or with <col>; doesn't
matter whether you do it with HTML attributes or CSS - cell/column
widths are always minima unless you have table-layout: fixed;
specified for the table as a whole.
[color=blue]
>I checked the
>style attribute property list of TD, and "width" is not one of them.[/color]

Then either your checking is faulty or the source you were checking is
faulty. See http://www.w3.org/TR/CSS2/visudet.html#propdef-width
"Applies to: all elements but non-replaced inline elements, table
rows, and row groups"

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

#11 July 20th, 2005, 08:11 PM

Rithish wrote:[color=blue][color=green][color=darkred]
>>>[/color]
>> You can use
>><colgroup>
>> <col width="372" />
>> ...
>></colgroup>
>>[/color]
>
> Right.. Thanks.. But can't it be done just with TD? I checked the
> style attribute property list of TD, and "width" is not one of them.
>[/color]
Width is certainly a valid attribute for td.
The advantage of colgroup is that the column widths can be changed at
different places in the table.

--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

What is Bytes?

Popular Articles