TD tags are wider than necessary

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

Nathan Sokalski

I have made a UserControl that contains the navigation for my site. However,
the table cell that I am putting it in is taking up more width than
necessary, therefore leaving extra whitespace on my pages. I have tried
everything I can think of to get rid of this problem, but it still remains.
Any ideas? My basic table layout is as follows:

<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"></td>
</tr>
<tr valign="top">
<td rowspan="2">THIS IS WHERE MY USERCONTROL IS</td>
<td align="center" width="*"></td>
</tr>
<tr>
<td align="center" valign="top">
THIS IS MY CONTENT AREA
</td>
</tr>
</table>

Thanks.
 
I have read that the column widths for a table are determined by the values
specified in the first row. Is this true? If it is, I have the following
problem. In my table layout (which you can see in my original posting) the
first row is multi-column, which obviously prevents me from specifying the
column widths. If what I read is the reason for my problem, how can I fix
it? Thanks.
 
I have read that the column widths for a table are determined by the values
specified in the first row. Is this true? If it is, I have the following
problem. In my table layout (which you can see in my original posting) the
first row is multi-column, which obviously prevents me from specifying the
column widths. If what I read is the reason for my problem, how can I fix
it? Thanks.
--
Click to expand...

I've got the following to work:

<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr valign="top">
<td rowspan="2">THIS IS WHERE MY USERCONTROL IS</td>
<td align="center" width="100%">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top">
THIS IS MY CONTENT AREA
</td>
</tr>
</table>

But it depends on what markup your usercontrol actually creates.

Damien
 
Hi Damien,

Basically, the browser interprets the HTML procedurally. So, if your table
is set to 100% width, and the top row has a colspan of the entire table (2
in this case), the first column in a row that doesn't span the entire table
will be used, or the second row in this case. Take a look at the following:

<table style="width:100%; border-collapse: collapse;">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td rowspan="2" style="width: 300px">THIS IS WHERE MY USERCONTROL
IS</td>
<td style="text-align:center;">&nbsp;</td>
</tr>
<tr>
<td style="text-align:center; vertical-align:top">
THIS IS MY CONTENT AREA
</td>
</tr>
</table>

A couple of notes: Since the width of the table is defined, and the width of
the first column is defined, the width of the second column does not need to
be defined, as it will fill out the remaining part of the table. Also, note
that I have substituted the use of CSS styles for those attributes that they
replace. This is conformant with XHTML, and will work better in browsers
overall. In addition, CSS can be defined outside the table, making the
(X)HTML code for the table much more readable, and easier to tweak, as the
style can be defined by itself, as in the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
table
{
width: 100%;
border-collapse: collapse;
}
table td{
vertical-align:top;
}
table td.leftPanel
{
width: 3000px;
}
table td.content
{
text-align: center;
}
</style>
</head>

<body>
<table>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td rowspan="2" class="leftPanel">THIS IS WHERE MY USERCONTROL IS</td>
<td class="content">&nbsp;</td>
</tr>
<tr>
<td class="content">
THIS IS MY CONTENT AREA
</td>
</tr>
</table>
</body>

</html>

--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
 
That worked great! However, I am now having a similar problem with the
heights of the second column. I want the height of the second cell in the
second row to be the minimum possible, but I am having trouble doing this. I
tried something similar to what you did for the width situation, but I think
this is different because it is height. Any ideas? Thanks.
 
Back
Top