SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table HTML Behavior. Rowspan data affects other content

    I consider myself damn good at HTML and CSS, but for some reason I just don't understand this particular HTML Table cell behavior.

    So I have the following Code

    Code:
    <table border="1" >
      <tr>
    	<td>Logo</td>
    	<td>Search</td>
    	<td rowspan="2" valign="top">Ads</td>
      </tr>
      <tr>
    	<td colspan="2">
    	  <table border="1">
    		<tr>
    		  <td rowspan="2">Nav</td>
    		  <td>Content</td>
    		</tr>
    		<tr>
    		  <td>Footer</td>
    		</tr>
    	  </table>
    	</td>
      </tr>
    </table>
    So, basically what I have been experiencing is that if any content is placed in the TD labeled ADS, it essentially pushes down the content where CONTENT is located.

    It actually stretches down the LOGO and SEARCH td cells based on the height of the element in the ADS td.

    Why is this? Even with vertical-align set to top, it still does this.

    Thanks,
    Bryan

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try setting a fixed height to the first <tr>...

  3. #3
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jag5311
    I consider myself damn good at HTML and CSS, but for some reason...
    Code:
    <table border="1" >
      <tr>
    	<td>Logo</td>
    	<td>Search</td>
    	<td rowspan="2" valign="top">Ads</td>
      </tr>
      <tr>
    	<td colspan="2">
    	  <table border="1">
    		<tr>
    		  <td rowspan="2">Nav</td>
    		  <td>Content</td>
    		</tr>
    		<tr>
    		  <td>Footer</td>
    		</tr>
    	  </table>
    	</td>
      </tr>
    </table>
    Well, if you are still using table for layouts many will conclude that your opinion of your html/css skills is badly out of date.
    Ed Seedhouse

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse
    Well, if you are still using table for layouts many will conclude that your opinion of your html/css skills is badly out of date.
    Unless of course your DIV's are ignoring their content, you need to center a variable amount of text VERTICALLY, or just plain require PREDICTABLE behavior cross browser... in which case floats/CSS/DIV for layout suck donkey balls - and I personally am getting a little SICK of the anti-table mafia badmouthing anyone who still uses tables when it's the only tool that does the job in a good number of circumstances - ESPECIALLY when just three to four years ago badmouthing tables for layout would have gotten you laughed out of a forum like this.

    It could also be he's just learning HTML4 and hasn't tackled XHTML yet - so comments like that are HARDLY helpful.

    Sorry, Pet Peeve.

    *** ON TOPIC ***
    Tables can be a little bit quirky on the height of elements with spans - which is why a safer move is to just change your nesting order.

    Code:
    <table border="1">
      <tr>
        <td valign="top">
          <table border="1">
            <tr>
              <td>Logo</td>
              <td>Search</td>
            </tr>
          </table>
          <table border="1">
            <tr>
              <td rowspan="2" valign="top">Nav</td>
              <td>Content</td>
            </tr>
            <tr>
               <td>Footer</td>
            </tr>
          </table>
        </td>
        <td rowspan="2" valign="top">
          Ads<br />
          Ads<br />
          Ads<br />
          Ads<br />
          Ads<br />
        </td>
      </tr>
    </table>
    Should do what you are thinking... (note, I added a few extra lines to ads for testing). I kept the logo/search and nav/content pairings in separate tables because I'm assuming those content areas are going to be separate sizes, ja?
    Last edited by deathshadow; Aug 29, 2006 at 23:06. Reason: three four?

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    --- Well, if you are still using table for layouts many will conclude that your opinion of your html/css skills is badly out of date. ---


    Ok, I will act like I didn't hear that.

    First off, just because I come into a forum and ask a question about tables or a table based layout, that doesn't mean I am ignorant to Web Standards, XHTML, or CSS.

    ALL my websites are done tableless except for the few exceptions where the layout calls for a particular feature or tweak that is just too damn hard to do in css.

    In case, I am working for a search engine that happens to have some features for its search page that would be too time consuming and problematic if I did it soley in CSS.

    So, I turned to a simple table for the structure, whereas divs and structural markup will make up the rest.

    Thanks for the code Deathshadow

  6. #6
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse
    Well, if you are still using table for layouts many will conclude that your opinion of your html/css skills is badly out of date.
    and this comment was useful how???

    To the OP - I'd try and get away from using colspans - instead maybe insert a nested table. Also consider using css to add the border to the table.

    A couple things: consider zeroing out the padding and the margins on the cells, unless specifying by css.

    Probably irrelevant, but - Is Ad the word you are going to use - be aware that often times AV popup blockers can block the word, a folder, a file name with that contains that word.... useless information I know - sorry

    Also, are you using a full doctype? Are you seeing this in IE or FFox.. (I haven't tested your code, hence the questions

    Nadia

    nadia

  7. #7
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, I found a solution. It uses 3 nested tables (ugh), but I am going to keep it clean as possible.

    Just an FYI, the application this is for would be useless for someone turning stylesheets off, etc..., so even giong with Web Standards wouldn't really help anyone, but I still try to adhere to them as tightly as possible.

    I have to set this thing into Quirks mode as well (sigh!).

  8. #8
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jag5311
    Yea, I found a solution. It uses 3 nested tables (ugh), but I am going to keep it clean as possible.
    Hey, sometimes you gotta do what you gotta do..... nested is better than spans I think.... nothing wrong with that - keeping it as simple and clean as possible certainly helps................

    I have to set this thing into Quirks mode as well (sigh!).
    OMG - how could you - just as bad as using a table layout



    Nadia


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •