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

Rithish

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

Subscribe Post Reply

2423

Harlan Messinger

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

Mark Tranchant

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

Harlan Messinger

"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

C A Upsdell

"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

Karl Groves

"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

James Moe

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

Rithish

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

Rithish

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

Steve Pugh

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

James Moe

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

Similar topics

fixed width without td ?

by: Gabriel | last post by:

HTML / CSS

DOCTYPE Strict uses "correct" box model - so why is 100% width now useless?

by: Shadow Lynx | last post by:

Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>...

HTML / CSS

IE 6 width 100% issues

by: ChitownE | last post by:

Hello, I'm having problems closing the gap on a page in IE6. I want the table on the right to fill 100% of the right_panel container. In IE6, there is a 2px gap on the left. When I try to set...

HTML / CSS

Releationship diagram goes haywire

by: Terry | last post by:

I have added some tables to the MS Access relationship diagram window (2003) and added some relationships. But after a while when I reopen the diagram some of the tables are hidden above the top of...

Microsoft Access / VBA

width of bottom-border?

by: FuzzyLogik | last post by:

By width, I don't mean weight. I have a row of <li>'s, with a bottom-border. I want the bottom-border to only go 90% of the <li> (centered) Is there any way to do this? I have it in this...

HTML / CSS

can fixed the table data with <td> width

by: idsanjeev | last post by:

hello guys how can fixed the table data which display if the word can not be completed in fixed table column then bareak it in new line not expend the column width like when using this table...

HTML / CSS

Update the database only when new data

by: mariaz | last post by:

Hello, I am creating a project where I parse an xml page (feed from a website) in a javabean file and I insert the parsed data in a mysql database. I want this data that gets inserted into the...

MySQL Database

Implied width of implied center column in 3 column table

by: Csaba Gabor | last post by:

I have a table with 3 rows, and two pieces of data to display in each row. However, the first element of the last two rows and the 2nd element of the 1st row are very short. This would seem to...

HTML / CSS

Getting select to properly size width

by: RichardR | last post by:

I have a webpage which has a table that contains a column with several drop down boxes (<SELECT>). The contents of the drop down boxes are dynamically populated so I have no idea what the actually...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice