By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,955 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
ri*****@dacafe.com (Rithish) wrote:
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="">
[first row:]<TR>
<TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
Goods</TD> ....

[second row:]<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>

....

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.
Jul 20 '05 #2

P: n/a
Harlan Messinger wrote:
ri*****@dacafe.com (Rithish) wrote:

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="">

[first row:]
<TR>
<TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
Goods</TD>


...

[second row:]
<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>


...

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?


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.
Jul 20 '05 #3

P: n/a

"Mark Tranchant" <ma**@tranchant.plus.com> wrote in message
news:_S*****************@stones.force9.net...
Harlan Messinger wrote:
ri*****@dacafe.com (Rithish) wrote:

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="">
[first row:]
<TR>
<TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
Goods</TD>


...

[second row:]
<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>


...

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?


It's the height that is 200px, not the width,


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


Jul 20 '05 #4

P: n/a
"Rithish" <ri*****@dacafe.com> wrote in message
news:fd*************************@posting.google.co m...
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="">


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.

Jul 20 '05 #5

P: n/a

"Rithish" <ri*****@dacafe.com> wrote in message
news:fd*************************@posting.google.co m...
Hi folks.

A premature and redundant question maybe... But I have a TABLE
problem.
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?


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

-Karl
Jul 20 '05 #6

P: n/a
Rithish wrote:
<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>

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)
Jul 20 '05 #7

P: n/a
James Moe <jm***************@sohnen-moe.com> wrote in message news:<cb**********@216.39.176.218>...
Rithish wrote:
<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>

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.


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.
Jul 20 '05 #8

P: n/a
Harlan Messinger <hm*******************@comcast.net> wrote in message news:<96********************************@4ax.com>. ..
ri*****@dacafe.com (Rithish) wrote:
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="">

[first row:]
<TR>
<TD WIDTH="372px" ALIGN=CENTER VALIGN=MIDDLE STYLE=""> Description of
Goods</TD>

...

[second row:]
<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>

...

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.


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

Regards,
Rithish.
Jul 20 '05 #9

P: n/a
ri*****@dacafe.com (Rithish) wrote:
Right.. Thanks.. But can't it be done just with TD?
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.
I checked the
style attribute property list of TD, and "width" is not one of them.


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #10

P: n/a
Rithish wrote:

You can use
<colgroup>
<col width="372" />
...
</colgroup>


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.

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)
Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.