TD tags are wider than necessary

Discussion in 'ASP .Net' started by Nathan Sokalski, Apr 23, 2007.

  1. 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

    http://www.nathansokalski.com/
     
    Nathan Sokalski, Apr 23, 2007
    #1
    1. Advertising

  2. 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.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "Nathan Sokalski" <> wrote in message
    news:...
    >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
    >
    > http://www.nathansokalski.com/
    >
     
    Nathan Sokalski, Apr 24, 2007
    #2
    1. Advertising

  3. Nathan Sokalski

    Damien Guest

    On Apr 24, 1:12 am, "Nathan Sokalski" <> wrote:
    > 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">&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
     
    Damien, Apr 24, 2007
    #3
  4. 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


    "Damien" <> wrote in message
    news:...
    > On Apr 24, 1:12 am, "Nathan Sokalski" <> wrote:
    >> 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">&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
    >
     
    Kevin Spencer, Apr 24, 2007
    #4
  5. 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.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "Damien" <> wrote in message
    news:...
    > On Apr 24, 1:12 am, "Nathan Sokalski" <> wrote:
    >> 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">&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
    >
     
    Nathan Sokalski, Apr 25, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. TS
    Replies:
    2
    Views:
    6,973
  2. gorbus

    DIV wider than TD (cell)

    gorbus, Jul 29, 2005, in forum: HTML
    Replies:
    8
    Views:
    4,054
    Noodles Jefferson
    Jul 30, 2005
  3. Replies:
    3
    Views:
    472
    Alan Silver
    Jun 27, 2006
  4. =?Utf-8?B?QW5kcmV3IEhheWVz?=

    TextBox Within Table Wider Than Cell

    =?Utf-8?B?QW5kcmV3IEhheWVz?=, Sep 27, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    511
    Just Me
    Sep 28, 2007
  5. OccasionalFlyer
    Replies:
    1
    Views:
    665
    Jukka K. Korpela
    Oct 20, 2011
Loading...

Share This Page