TD WIDTH and CELLPADDING (full post)

[Graham J]

Apologies for the partial post that mysteriously escaped as I was composing.
I shall try again.

For many years I have been happily and successfully coding tables such that
the WIDTH
specified in a TD is the complete column width including any CELLPADDING.
For example for a 400 pixel wide table with four 100 pixel wide columns and
10 pixel cellpadding...

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
</TR>
</TABLE>

This is, to me, intuitive and is clearly how many others think it should be
done too judging by tutorials on the net and actual coding used. However
while using GoLive 6.01 (and this is not something I noticed with earlier
versions) I noticed that it considers that the WIDTH only covers the content
and excludes the CELLPADDING. So it would suggest...

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="80">
<TD WIDTH="80">
<TD WIDTH="80">
<TD WIDTH="80">
</TR>
</TABLE>

....is actually correct and many seem to agree with this too. I'd like to
think Adobe know more about it than I do but...

I have checked text books, the HTML 4.0 reference on w3.org, assorted
tutorials on the net and tried to check through newsgroup archives and I
still can't find a definitive answer. Most just say that the width is the
'column width' but do not say if that is the width of the content or of the
whole cell including padding.

So if we could ignore any factors like bad style and deprecation, I would
like to know which one is considered correct and ideally see some evidence
for why it is correct because I can't find it.
Graham

[Steve Pugh]

"Graham J" <in***************@orangebucket.co.uk> wrote:

For many years I have been happily and successfully coding tables such that
the WIDTH
specified in a TD is the complete column width including any CELLPADDING.
For example for a 400 pixel wide table with four 100 pixel wide columns and
10 pixel cellpadding...

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
</TR>
</TABLE>

This is, to me, intuitive and is clearly how many others think it should be
done too judging by tutorials on the net and actual coding used. However
while using GoLive 6.01 (and this is not something I noticed with earlier
versions) I noticed that it considers that the WIDTH only covers the content
and excludes the CELLPADDING. So it would suggest...

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="80">
<TD WIDTH="80">
<TD WIDTH="80">
<TD WIDTH="80">
</TR>
</TABLE>

...is actually correct and many seem to agree with this too. I'd like to
think Adobe know more about it than I do but...

Adobe is correct.

The HTML 4 spec says nothing on this isssue, probably because width is
deprecated. The HTML 3.2 spec is quite clear however,
http://www.w3.org/TR/REC-html32#table
"width
Specifies the suggested width for a cell content in pixels excluding
the cell padding."

And a simple test shows that
<table cellpadding="20" border="1" cellspacing="0"><tr><td
width="60">Hi!</td></tr></table> is rendered as being 100pixels wide
in Mozilla, IE6, Opera 7 and Netscape 4.

This is a good thing as it makes the move to CSS, where width is the
width of the content (IE bugs excepeted), easier.

Your first example "works" because browsers typically give more weight
to table widths and cellpaddiong values than they do to cell widths.
In other words the width="100" values are being ignored (though
perhaps the browser picks up on the fact that all the cells should be
the same width).

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

[John W.]

"Graham J" <in***************@orangebucket.co.uk>:

Apologies for the partial post that mysteriously escaped as I was composing.
I shall try again.

For many years I have been happily and successfully coding tables such that
the WIDTH
specified in a TD is the complete column width including any CELLPADDING.
For example for a 400 pixel wide table with four 100 pixel wide columns and
10 pixel cellpadding...

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
</TR>
</TABLE>

This is, to me, intuitive and is clearly how many others think it should be
done too judging by tutorials on the net and actual coding used. However
while using GoLive 6.01 (and this is not something I noticed with earlier
versions) I noticed that it considers that the WIDTH only covers the content
and excludes the CELLPADDING. So it would suggest...

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="80">
<TD WIDTH="80">
<TD WIDTH="80">
<TD WIDTH="80">
</TR>
</TABLE>

...is actually correct and many seem to agree with this too. I'd like to
think Adobe know more about it than I do but...

I have checked text books, the HTML 4.0 reference on w3.org, assorted
tutorials on the net and tried to check through newsgroup archives and I
still can't find a definitive answer. Most just say that the width is the
'column width' but do not say if that is the width of the content or of the
whole cell including padding.

So if we could ignore any factors like bad style and deprecation, I would
like to know which one is considered correct and ideally see some evidence
for why it is correct because I can't find it.

The excercise is quite futile I prefer to think because you are not
providing the neccesary info about the kind of content you are putting
inside the cells nor what you want to achieve, i.e. an outside size of
400 or columns with max contentsize of 100 (80?).

And I would assume that after so many years succesfully coding tables
you could do the excercise yourself?

The table principle is that the table will first try to maintain the
width="400" if you insist on specifying that value.

However if you fill the 4 cells as follows:
<TD WIDTH="100"><img src="blue.gif" width="100" height="100"></td>
you will never have a table which is 400 wide.

On the other hand if you specify cells with text like so:
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
your table will attempt to remain at 400 (outside size incl. padding
and spacing).

A combination of 2x img + 2x text will result in 2 wide img cells and
2 narrow txt cells because you specified 400.

On the other hand if you are not specifying a width of 400, then all
combinations will give you the same result because the cells will try
to remain 100.

Copy this into a page and look/measure at the result:
<TABLE WIDTH="400" BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
</TR>
</TABLE>

<TABLE WIDTH="400" BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
</TR>
</TABLE>

<TABLE WIDTH="400" BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
</TR>
</TABLE>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
</TR>
</TABLE>

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
</TR>
</TABLE>

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><img src="pics/dot_blue.gif" width="100"
height="100"></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
<TD WIDTH="100"><p>M M M M M M M M M M M M M M </p></td>
</TR>
</TABLE>

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

[Graham J]

> The HTML 4 spec says nothing on this isssue, probably because width is

deprecated. The HTML 3.2 spec is quite clear however,
http://www.w3.org/TR/REC-html32#table
"width
Specifies the suggested width for a cell content in pixels excluding
the cell padding."
[...snip...]

Thankyou, that was exactly what I wanted. I knew it must be there somewhere
:-)

[Graham J]

> The excercise is quite futile I prefer to think because you are not

providing the neccesary info about the kind of content you are putting
inside the cells nor what you want to achieve, i.e. an outside size of
400 or columns with max contentsize of 100 (80?).
I think you are adding unnecessary complexity to the question and the simple
example code that was intended to clarify exactly what I was asking (should
it have been necessary).

Of course the content could affect the rendering but there is an
inconsistency in the code regardless of the content. The first example
would need a table width of 480 to be consistent with the cell widths.
And I would assume that after so many years succesfully coding tables
you could do the excercise yourself?

That relies on my knowing what the correct rendition is and I can't rely on
web browsers for that as they often do their own thing. For example I had a
page with a number of similar tables. Each had the same fixed width for the
tables and each had the width of the last three columns specified but I
hadn't specified the width of the first column (this wasn't deliberate, it
was just how it evolved). GoLive didn't have a problem in sizing the
columns on all the tables identically and nor did Safari. However Opera 7
and IE 6 rendered each table differently based on the (all textual) content.

[John W.]

"Graham J" <in***************@orangebucket.co.uk>:

The excercise is quite futile I prefer to think because you are not
providing the neccesary info about the kind of content you are putting
inside the cells nor what you want to achieve, i.e. an outside size of
400 or columns with max contentsize of 100 (80?).
I think you are adding unnecessary complexity to the question and the simple
example code that was intended to clarify exactly what I was asking (should
it have been necessary).

Believe me, your sample:
<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
</TR>
</TABLE>
as I have proven in the previous post, is quite insufficient in
answering questions about tables even I did not mentioning the missing
</td>'s.
Of course the content could affect the rendering but there is an
inconsistency in the code regardless of the content. The first example
would need a table width of 480 to be consistent with the cell widths.
That's what I showed you, now where's your useless 400 and what is it
(not) doing?

And I would assume that after so many years succesfully coding tables
you could do the excercise yourself?

That relies on my knowing what the correct rendition is and I can't rely on
web browsers for that as they often do their own thing.

If someone knows how to write tablesource and believe me I know howto
code multiple nested tables by hand, without the use of a WYSIWYG
thingy, my webbrowsers from IE 3.x or N 4.x (the first I used) untill
the newest like Moz 1.4 or Opera 7.11 or even IE 6.0 will show the
same visual result.
For example I had a
page with a number of similar tables. Each had the same fixed width for the
tables and each had the width of the last three columns specified but I
hadn't specified the width of the first column (this wasn't deliberate, it
was just how it evolved). GoLive didn't have a problem in sizing the
columns on all the tables identically and nor did Safari.
Golive is not a browser.period.
However Opera 7
and IE 6 rendered each table differently based on the (all textual) content.

Even without examples I believe you, but in the case of tables, the
sourcecode actually used is the only way to explain why there was a
difference and what went wrong if there was a difference.

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

[Graham J]

> Believe me, your sample:

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
<TD WIDTH="100">
</TR>
</TABLE>
as I have proven in the previous post, is quite insufficient in
answering questions about tables even I did not mentioning the missing
</td>'s.
As </TD> is optional according to the HTML 4.01 recommendation I don't think
you can say they are "missing". Desirable perhaps and in this case just
left out through oversight but not "missing".

I still maintain that code was 100% sufficient for illustrating the point.
It doesn't matter what the content is, the code would still be wrong.
However we obviously disagree on that. Thanks for your input anyway.
That's what I showed you, now where's your useless 400 and what is it
(not) doing?
It isn't useless because the idea was to illustrate incorrect code (though
code which a number of users are not aware is incorrect). If I left it out
or made it 480 the code would have been self-consistent and so totally
pointless as an example.

I know some feel that if you have widths specified for all the columns then
the table width will look after itself and is redundant and that is of
course true. However it can be useful in a WYSIWYG development environment
when first laying out tables, especially if the detail of the table is yet
to be finalised, and also for consistency checking of the numbers. Each to
their own.
Golive is not a browser.period.

No, but it renders HTML visually which is the important issue in this case.

[Andrew Fedoniouk]

> And a simple test shows that

<table cellpadding="20" border="1" cellspacing="0"><tr><td
width="60">Hi!</td></tr></table> is rendered as being 100pixels wide
in Mozilla, IE6, Opera 7 and Netscape 4.

This is a good thing as it makes the move to CSS, where width is the
width of the content (IE bugs excepeted), easier.

Yep.But there is also <TD height=something > case.
Mozilla and IE will treat this something as a height of outer margin of the
cell (including padding).
Only Opera is consistent treating width and height in the same manner.
Your first example "works" because browsers typically give more weight
to table widths and cellpaddiong values than they do to cell widths.
In other words the width="100" values are being ignored (though
perhaps the browser picks up on the fact that all the cells should be
the same width).

To be precize this values will be used as weights (as like percentage) for
real column width computation.

Andrew Fedoniouk.
http://blocknote.net