TD tags are wider than necessary

Nathan Sokalski · Apr 23, 2007

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.

Nathan Sokalski · Apr 24, 2007

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.

Damien · Apr 24, 2007

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've got the following to work:

<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="100%"> </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

Kevin Spencer · Apr 24, 2007

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"> </td>
</tr>
<tr>
<td rowspan="2" style="width: 300px">THIS IS WHERE MY USERCONTROL
IS</td>
<td style="text-align:center;"> </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"> </td>
</tr>
<tr>
<td rowspan="2" class="leftPanel">THIS IS WHERE MY USERCONTROL IS</td>
<td class="content"> </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

Nathan Sokalski · Apr 25, 2007

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.

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Having trouble centering contents of td ?	3	May 2, 2023
Nested Loop Insert Page Break	1	Nov 5, 2021
Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
Image shifts to the right when export the page to pdf	4	May 5, 2023
How to have two html audio players on one page?	0	May 3, 2022
Registration form	13	May 19, 2021
SendGrid email issue in responsive Gmail	1	Nov 4, 2021

TD tags are wider than necessary

Nathan Sokalski

Nathan Sokalski

Damien

Kevin Spencer

Nathan Sokalski

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads