Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Location
    Brasília, Brazil
    Posts
    153
    Thanks
    0
    Thanked 0 Times in 0 Posts

    TD rowspan problem

    When I span a table row to 3 rows it works as expected:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    <style type="text/css">
    td {border:1px solid red}
    </style>
    </head>
    
    <body>
    <table>
    
    <tr>
    <td rowspan="1">r1c1</td>
    <td rowspan="3">r1c2</td>
    </tr>
    
    <tr>
    <td rowspan="1">r2c1</td>
    </tr>
    
    <tr>
    <td rowspan="1">r3c1</td>
    </tr>
    
    </table>
    </body>
    </html>
    But when I double all the row span values it gets messed. Why? Look at the attached images.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    <style type="text/css">
    td {border:1px solid red}
    </style>
    </head>
    
    <body>
    <table>
    
    <tr>
    <td rowspan="2">r1c1</td>
    <td rowspan="6">r1c2</td>
    </tr>
    
    <tr>
    <td rowspan="2">r2c1</td>
    </tr>
    
    <tr>
    <td rowspan="2">r3c1</td>
    </tr>
    
    </table>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails TD rowspan problem-rowspan2.png  
    Attached Images Attached Images  

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Your second example doesn’t make sense. You want to span six rows when the table only has three rows and four cells. If the intent is to double the height of each cell, you would use CSS for that.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Location
    Brasília, Brazil
    Posts
    153
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My intent is not to double the height of the cells but your post made it clear. Thanks.

  • #4
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    newbie!!

    hi there

    this is my first post...and I can't figure out how to initiate my own. Instead i seem to be piggy-backing on this other guy's post.

    anyway...

    I have just designed a table. But the top row only stretches halfway across the page. Can you please tell me what i'm doing wrong?


    table buttons
    the page looks like this...image links

    i want the table buttons to stretch over to where the links are...but it doesnt ever get past the 50% point..



    <table width="100%"border="2" cellpadding="2" cellspacing="5">
    <caption><B><i>Wedding Dreams Can Come True!</i></B></caption>

    <tr rowspan="80" width="100%">


    <th class="highlight" align="center"Id="choice1"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=link is here

    <th class="highlight" align="center"Id="choice2"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=....

    <th class="highlight" align="center"Id="choice3"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=.....

    <th class="highlight" align="center" Id="choice4"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">

    <a href="<A HREF=....

    <th class="highlight" align="center" Id="Choice5"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=.....

    <th class="highlight" align="center" Id="choice6"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=....

    </tr>




    <td colspan="90%" >
    <img src="weddingimagecar.jpg" width="100%" height="100%"
    ALT="Wedding car" border="0" />



    <td align="left" valign="center">

    <a href='http...

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by cluelessguy View Post
    this is my first post...and I can't figure out how to initiate my own. Instead i seem to be piggy-backing on this other guy's post.
    Next time, create a new thread. The “New Thread” button is in can be found in the upper‐left of a forum page.

    Quote Originally Posted by cluelessguy View Post
    <table width="100%"border="2" cellpadding="2" cellspacing="5">
    <caption><B><i>Wedding Dreams Can Come True!</i></B></caption>

    <tr rowspan="80" width="100%">


    <th class="highlight" align="center"Id="choice1"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=link is here

    <th class="highlight" align="center"Id="choice2"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=....

    <th class="highlight" align="center"Id="choice3"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=.....

    <th class="highlight" align="center" Id="choice4"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">

    <a href="<A HREF=....

    <th class="highlight" align="center" Id="Choice5"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=.....

    <th class="highlight" align="center" Id="choice6"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href=....

    </tr>




    <td colspan="90%" >
    <img src="weddingimagecar.jpg" width="100%" height="100%"
    ALT="Wedding car" border="0" />



    <td align="left" valign="center">

    <a href='http...
    Please use [code] tags next time.

    You need to provide the code for the entire table and, preferably, the entire document. Your CSS style sheet, if any, should also be shown.

    I can already see some errors:

    • The colspan attribute does not accept percentage values.
    • center is not a valid value for the valign attribute.
    • The code contains unclosed elements (missing end tags).
    • There should be whitespace between attributes.
    • Your code seems to imply that you’re nesting anchor elements.
    • I’m going to assume that XHTML is what you’re using (or attempting to use) since you’ve used self‐closing syntax for an img element.
      • All element names must be lowercase in XHTML. B and A are not XHTML elements.
      • All attribute names must be in lowercase in XHTML. ALT, HREF, and Id are not XHTML attributes.

    I’m going to refrain from mentioning your poor‐practice uses of presentational elements and attributes for now.

    I would fix all of the mentioned errors and then post the remainder of your code, assuming that you’re still having the issue.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here is the new version..

    I would love to stretch the button links over the entire row but can't do it.

    thanks

    <!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <B><title></title></B>
    <meta name="kwrd" content="wedding dresses, wedding gowns, wedding planning, wedding flowers" />
    <meta name="desc" content="weddings, wedding, wedding planning, wedding dresses, wedding flowers" />

    <style type="text/css">

    body {color:white;background-color: blue;}
    caption {background-color: #999; border: 1px solid black;}
    table {background-color: #ccc; border: "2" cellspacing="2"
    solid black; padding: 5px; width: 90%;}
    th {background-color: #CC66CC; }
    tr {background-color: #99FFCC;}
    td {background-color: #CC9999; border: 1px solid black;}
    .highlight {background: #33ffff; color: blue}

    </style>


    <script language="javascript" type ="text/javascript">
    <!--
    function selectlink(sellink, linkdesc){
    sellink.style.background='yellow';
    if (document.getElementById)
    document.getElementById("selectdesc").innerHTML=linkdesc;
    else
    selectdesc.innerHTML=html;
    }
    function leavelink(sellink){
    sellink.style.background='#33ffff';
    if (document.getElementById)
    document.getElementById("selectdesc").innerHTML='&nbsp;';
    else
    selectdesc.innerHTML='&nbsp;';
    }
    //-->
    </script>
    </head>

    <body>

    <FONT FACE="ARIAL" SIZE="+1" COLOR="#FF0000"><MARQUEE bgcolor
    ="#FFCCCC" loop="-1" scrollamount="2" width="100%">Join us in
    making your wedding better than you imagined possible...
    </font></MARQUEE>

    <table width="100%" border="2" cellpadding="2" cellspacing="5" cellpadding="5">
    <caption><B><i>Wedding Dreams Can Come True!</i></B></caption>

    <tr rowspan="150" width="100%">


    <th class="highlight" align="center"Id="choice1"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href='http://scripts.affiliatefuture.com/AFClick.asp?affiliateID
    =94190&merchantID=101&programmeID=279&mediaID=0&
    tracking=&url='>Designer Clothes</a></th>

    <th class="highlight" align="center"Id="choice2"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href='http://scripts.affiliatefuture.com/AFClick.asp?affiliateID
    =94190&merchantID=1867&programmeID=5165&mediaID=
    0&tracking=&url='>Shoes!!!!</a></th>

    <th class="highlight" align="center"Id="choice3"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href='http://scripts.affiliatefuture.com/AFClick.asp?affiliateID
    =94190&merchantID=933&programmeID=2934&mediaID=0&
    tracking=&url='>Wedding Gifts</a></th>

    <th class="highlight" align="center" Id="choice4"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">

    <a href="<A HREF="http://www.myreferer.com/mydb/?M=
    flowers24hoursuk&ID=sebelliot&L=11" TARGET="_BLANK">
    Send Fresh Flowers across London and the UK</A></th>

    <th class="highlight" align="center" Id="Choice5"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href='http://scripts.affiliatefuture.com/AFClick.asp?
    affiliateID=94190&merchantID=282&programmeID=1122&
    mediaID=0&tracking=&url='>Holidays</a></th>

    <th class="highlight" align="center" Id="choice6"
    onmouseover="selectlink(this)" onmouseout="leavelink(this)">
    <a href='http://scripts.affiliatefuture.com/AFClick.asp?affiliateID
    =94190&merchantID=2112&programmeID=5622&mediaID=0&
    tracking=&url='>Hotels</a></td>

    </tr>




    <td colspan="20" >
    <img src="weddingimagecar.jpg" width="100%" height="100%"
    ALT="Wedding car" border="0" />



    <td align="left" valign="top">

    <a href='http://scripts.affiliatefuture.com/AFClick.asp?
    affiliateID=94190&merchantID=1141&programmeID=3499&mediaID
    =18625&tracking=&url='><img border=0 src=
    'http://banners.affiliatefuture.com/1141/18625.gif'></a>

    <A HREF="http://www.splut.com/link/4292">
    <IMG SRC = "http://www.splut.com/images/splutbut3.gif" </A>

    <A href="http://www.leisuredirection.co.uk?kbid=2941&img=LDL_234x60-disney.gif">
    <img src="http://www.leisuredirection.co.uk/media/LDL_234x60-disney.gif" border=0></a>
    <img src="http://www.myaffiliateprogram.com/u/leisure/showban.asp?id=
    2941&img=LDL_234x60-disney.gif" border=0>

    <a href='http://scripts.affiliatefuture.com/AFClick.asp?
    affiliateID=94190&merchantID=1303&programmeID=3694&
    mediaID=20734&tracking=&url='><img border=0
    src='http://banners.affiliatefuture.com/1303/20734.jpg'></a>

    <a href='http://scripts.affiliatefuture.com/AFClick.asp?affiliateID=94190&merchantID=
    640&programmeID=2111&mediaID=33238&tracking=&url='><img border=0 src
    ='http://banners.affiliatefuture.com/640/33238.gif'></a>

    </td>

    </tr>



    </table>


    <p align="center"> </p>

    <p align="center"> </p>

    <p align="center"> </p>
    <p align="center"> . </p>
    <p align="center"> </p>

    <br><br><br><br><br>



    <p align="center"><EM></EM> </p>
    <p align="center"><EM> </EM> </p>

    <HR WIDTH="75%" COLOR="#FF0000" SIZE="4">

    </body>
    </html>

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Well, the problem seems obvious now.

    Tables are meant to be laid out in a grid fashion; they are not meant to be used for layout, as you are currently trying to do, and cannot be used achieve the non‐grid layout that you seem to desire without further abusing them and nesting a table within a table.

    Particular to your issue, it seems that I overlooked an error. You cannot assign the rowspan attribute to a table row element; it needs to be assigned to a table cell element. Additionally, you’ve specified values that are too large; your table neither contains 150 rows nor 20 columns. If you’re trying to make the spans dynamic, then you would use the value 0; unfortunately, while Firefox supports that, it’s supported by neither Internet Explorer nor Opera so you will, in effect, have to specify the exact number of rows or columns to span. Of course, I’m explaining how to properly mark up tables in the future; this advice overlooks the fact that the current table is being misused.

    You have numerous additional errors as well; run your code through a validator such as Validome or that of the W3C.
    Last edited by Arbitrator; 06-13-2007 at 05:08 AM. Reason: I corrected a grammatical error.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you.


  •  

    Posting Permissions

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