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

Unwanted Table Padding

P: n/a
Tom
I am having a problem where an extra gap (whitespace, padding) appears
in a table cell where I don't want it. The data fed in the table is
via dynamic HTML, so the amount in the middle cell may vary. When the
data in the middle table cell is little and that cell's height is
small, an unwanted gap appears in the first table cell. I would prefer
to have all additional blank space at the bottom of the table (last
row) and not have any in the top row.

I don't know how to get rid of the unwanted padding in the first row,
and have it all appear in the last row.

Here is the HTML, Tom

<html>
<head>
<title>Test</title>
</head>
<body>
<p>Trying to solve problem when too little messages in Message
Console row (loaded by
JavaScript) causes a gap to appear in the botttom of the 24 Hour
section (before the
Left Hotspot and Message Console row).</p>

<table border="1px" width="100%" >
<tr>
<td valign="top" colspan="2" width="780" style="vertical-align:
top; padding-bottom: 0px;" >
<p style="background-color: cyan; padding-bottom: 0px; "24 Hour
Section - Do not want
any padding/white area between here and console.
</p>
</td>
<td valign="top" rowspan="2" width="220px" ><p
style="background-color: cyan;">Right Hotspot</p>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<p>Any padding after here is okay</p>
</td>
</tr>
<tr valign="top">
<td valign="top" width="220px"><p style="background-color:
cyan;">Left Hotspot</p>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<p>Any empty padding after here is okay</p>
</td>
<td valign="top" width="804" >
<table width="100%">
<tr><td><p style="background-color: cyan;">Message
Console</p></td></tr>
<tr><td style="background-color: #8888ff;">Message # 4</td></tr>
<tr><td style="background-color: #ffbb88;">Message # 3</td></tr>
<tr><td style="background-color: #8888ff;">Message # 2</td></tr>
<tr><td style="background-color: #ff8888;">Message # 1. Any padding
after here is okay.</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Sep 3 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
On 2006-09-03, Tom wrote:
I am having a problem where an extra gap (whitespace, padding) appears
in a table cell where I don't want it. The data fed in the table is
via dynamic HTML, so the amount in the middle cell may vary. When the
data in the middle table cell is little and that cell's height is
small, an unwanted gap appears in the first table cell. I would prefer
to have all additional blank space at the bottom of the table (last
row) and not have any in the top row.

I don't know how to get rid of the unwanted padding in the first row,
and have it all appear in the last row.
You would be better off using CSS for the layout instead of tables.

However, try this:

<td valign="top" colspan="2" style="vertical-align: top;
padding-bottom: 0px; height: 1em;" >
<table border="1px" width="100%" >
<tr>
<td valign="top" colspan="2" width="780" style="vertical-align:
top; padding-bottom: 0px;" >
<p style="background-color: cyan; padding-bottom: 0px; "24 Hour
Section - Do not want
any padding/white area between here and console.
</p>
</td>

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Sep 3 '06 #2

P: n/a
Gazing into my crystal ball I observed "Tom" <th*****@sygration.com>
writing in news:11**********************@74g2000cwt.googlegro ups.com:
I am having a problem where an extra gap (whitespace, padding) appears
in a table cell where I don't want it.
No, you have a problem abusing tables. Tables are for data, not
positioning of page elements.
>The data fed in the table is
via dynamic HTML, so the amount in the middle cell may vary. When the
data in the middle table cell is little and that cell's height is
small, an unwanted gap appears in the first table cell. I would
prefer to have all additional blank space at the bottom of the table
(last row) and not have any in the top row.

I don't know how to get rid of the unwanted padding in the first row,
and have it all appear in the last row.
A bit of CSS will go a long way, and IMHO, is a heck of a lot easier to
deal with.
>
Here is the HTML, Tom
No DocType?
<http://www.w3.org/TR/html401/struct/...nt_type_declar
ation-3>
><html>
<head>
<title>Test</title>
</head>
<body>
<p>Trying to solve problem when too little messages in Message
Console row (loaded by
JavaScript) causes a gap to appear in the botttom of the 24 Hour
section (before the
Left Hotspot and Message Console row).</p>

<table border="1px" width="100%" >
<tr>
<td valign="top" colspan="2" width="780" style="vertical-align:
top; padding-bottom: 0px;" >
<p style="background-color: cyan; padding-bottom: 0px; "24 Hour
Section - Do not want
any padding/white area between here and console.
</p>
</td>
<td valign="top" rowspan="2" width="220px" ><p
style="background-color: cyan;">Right Hotspot</p>
Is this some sort of heading? Then it should have heading markup.
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
These are ALL level 1 headings? My general rule of thumb is one H1 per
page, with subheadings as needed.
<p>Any padding after here is okay</p>
</td>
</tr>
<tr valign="top">
<td valign="top" width="220px"><p style="background-color:
cyan;">Left Hotspot</p>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<p>Any empty padding after here is okay</p>
</td>
<td valign="top" width="804" >
<table width="100%">
Egads! Nested tables! Run....
<tr><td><p style="background-color: cyan;">Message
Console</p></td></tr>
<tr><td style="background-color: #8888ff;">Message # 4</td></tr>
<tr><td style="background-color: #ffbb88;">Message # 3</td></tr>
<tr><td style="background-color: #8888ff;">Message # 2</td></tr>
<tr><td style="background-color: #ff8888;">Message # 1. Any
padding
after here is okay.</td></tr>
This looks like a list. Use list markup.
</table>
</td>
</tr>
</table>
</body>
</html>

You will do a lot better if you rethink this without presentational
markup. You might want to look up three column CSS, there are plenty of
examples out there.

Still not convinced? Especially with dynamic content, separating
content and presentation is a lot easier, a) to write because the server
only has to put of plain html with no presenation, b) finding errors is
a lot easier, c) making changes site wide is very easy.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Sep 3 '06 #3

P: n/a
"Chris F.A. Johnson" <cf********@gmail.comwrote:
You would be better off using CSS for the layout instead of tables.

However, try this:

<td valign="top" colspan="2" style="vertical-align: top;
padding-bottom: 0px; height: 1em;" >
There a reason to use both valign="top" and style="vertical-align:top;"?

I avoid the use of the HTML attribute, "valign", myself.

--
Jim Carlock
Post replies to the group.
Sep 3 '06 #4

P: n/a
Tom
This is a reply to the 3 responses I received. The solution received
from Chris works in Firefox but does not help in IE 6.

Chris F.A. Johnson wrote:
You would be better off using CSS for the layout instead of tables.

However, try this:

<td valign="top" colspan="2" style="vertical-align: top;
padding-bottom: 0px; height: 1em;" >
I have been able to ignore CSS .. up until now. I will definitely look
into doing much more with CSS.

The additional heigth attribute fixed it in Firefox, but did not do
anything in IE 6 (unfortunately 99% of the users access my site with
IE).

Adrienne Boswell wrote:
These are ALL level 1 headings? My general rule of thumb is one H1 per
page, with subheadings as needed.

You will do a lot better if you rethink this without presentational
markup. You might want to look up three column CSS, there are plenty of
examples out there.
The h1 headings were used in the example only to fill up the space.
Again, I will do my CSS homework.

Jim Carlock wrote:
[Is] there a reason to use both valign="top" and style="vertical-align:top;"?
I avoid the use of the HTML attribute, "valign", myself.
I don't know why, and I tend to agree with you.

Sep 3 '06 #5

P: n/a
On 2006-09-03, Jim Carlock wrote:
"Chris F.A. Johnson" <cf********@gmail.comwrote:
>You would be better off using CSS for the layout instead of tables.

However, try this:

<td valign="top" colspan="2" style="vertical-align: top;
padding-bottom: 0px; height: 1em;" >

There a reason to use both valign="top" and style="vertical-align:top;"?
No. It was in the OP and I didn't remove it.
I avoid the use of the HTML attribute, "valign", myself.
Ditto.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Sep 4 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.