...

View Full Version : TD rowspan problem



Kakao
05-12-2007, 01:12 PM
When I span a table row to 3 rows it works as expected:


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


<!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>

Arbitrator
05-12-2007, 02:35 PM
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.

Kakao
05-12-2007, 04:28 PM
My intent is not to double the height of the cells but your post made it clear. Thanks.

cluelessguy
06-13-2007, 02:49 AM
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...

Arbitrator
06-13-2007, 03:12 AM
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.


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

cluelessguy
06-13-2007, 04:03 AM
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>

Arbitrator
06-13-2007, 05:03 AM
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 (http://www.validome.org/) or that of the W3C (http://validator.w3.org/).

cluelessguy
06-13-2007, 04:48 PM
thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum