Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

html tables-pedigree

Status
Not open for further replies.
nivini

nivini

Programmer
Mar 24, 2004
64
hello all
I'm trying to create a table for a pedigree
i have this code. it looks only nice, i want it to look very acurate, the individual in the fourth table shoulb be exactly in the same line as the | mark in the fifth table,
can anyone find what makes it "move" down a beat , each loop?
help would be most appriciate

<table border=0 style=" HEIGHT:799px" bgcolor="00FF00" width="750px" align="center">

<tr valign="top">

<td >
<table border=0 style="WIDTH:150px; HEIGHT: 799px"><% 'table 1%>
<%for x=1 to 3%>
<tr><td bgcolor="00FF00" width="150px" height="17"></td></tr>
<%next%>
<tr>
<td bgcolor="silver" width=150px" align="left" height="17"><%Response.Write (Request.Form ("name"))%> </td>
</tr>
<%for x=1 to 3%>
<tr><td bgcolor="00FF00" width="150px" height="17"></td></tr>
<%next%>
</table>
</td>


<td>
<table border=0 style="WIDTH: 150px; HEIGHT:799px"><% 'table 2%>

<% for x=1 to 11%>
<tr><td bgcolor="00FF00" width="150px" align="left" nowrap height="17"></td></tr>
<%next%>
<%i=1%>

<tr><td align="left" nowrap height="17" width="150px"><font color="blue" size="4" ><%Response.Write arr(i,4)%></font><br>
<font color="black" size="2">
<%Response.Write arr(i,3)%><br>
<%Response.Write arr(i,2)%><br>
</font>
</td>
</tr>
<% for x=1 to 23%>
<tr><td bgcolor="00FF00" width="150px" align="left" height="17">|</td></tr>
<% next%>

<tr><%i=i+1%>

<td align="left" width="150px" height="17"><font color="red" size="4" height="17"><% Response.Write arr(i,4)%></font><br>
<font color="black" size="2">
<%Response.Write arr(i,3)%><br>
<%Response.Write arr(i,2)%><br>
</font>
</td>

</tr>
<% for x=1 to 11%>
<tr><td bgcolor="00FF00" width="150px" align="left" nowrap height="17px"></td></tr>
<%next%>

</table>
</td>


<td>
<table border=0 style="WIDTH: 150px; HEIGHT: 799px"> <%' table 3%>

<%for x=1 to 5%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px"></td></tr>
<%next%>


<tr><%i=i+1%>
<td align="left" width="150px" nowrap height="17"><font size="3" color="blue"><%Response.Write arr(i,4)%><br></font> </td>
</tr>
<%for x=1 to 11%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px">|</td></tr>
<%next%>

<tr><%i=i+1%>
<td align="left" width="150px" nowrap height="17"><font size="3" color="red"><%Response.Write arr(i,4)%><br></font> </td>
</tr>
<%for x=1 to 11%>
<tr><td bgcolor="00FF00" width="150px" nowrap height="17"></td></tr>
<%next%>
<tr><%i=i+1%>
<td align="left" width="150px" nowrap height="17"><font size="3" color="blue"><%Response.Write arr(i,4)%><br></font> </td>
</tr>
<%for x=1 to 11%>
<tr><td bgcolor="00FF00" width="150px" height="17">|</td></tr>
<%next%>
<tr><%i=i+1%>
<td align="left" width="150px" nowrap height="17"><font size="3" color="red"><%Response.Write arr(i,4)%><br></font> </td>
</tr>
<%for x=1 to 5%>
<tr><td bgcolor="00FF00" width="150px" height="17"></td></tr>
<%next%>

</table>

</td>
<td align="justify">

<table border=0 style="WIDTH:150px; HEIGHT: 799px"> <% 'table 4 %>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px"></td></tr>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px"></td></tr>

<%for parent=1 to 4%>
<tr><%i=i+1%>
<td align="left" style="WIDTH:150px; HEIGHT: 17px" bgcolor="yellow" nowrap><font size="2" color="blue"><%Response.Write arr(i,4)%></font> </td>
</tr>
<%
for x=1 to 5%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px" align="left" >|</td></tr>
<%next%>
<tr><%i=i+1%>
<td align="left" style="WIDTH:150px; HEIGHT: 17px" bgcolor="yellow" nowrap><font size="2" color="red"><%Response.Write arr(i,4)%></font> </td>
</tr>
<%
if parent=4 then
exit for
else
for x=1 to 5%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px" ></td></tr>
<%next%>
<%end if%>
<%next%>


<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px" nowrap></td></tr>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px" nowrap></td></tr>
</table>
</td>
<td align="justify">
<table border=0 style="WIDTH:150px; HEIGHT: 799px">

<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>

<%for parent=1 to 8%>
<tr><%i=i+1%>
<td align="left" bgcolor="yellow" style="WIDTH:150px; HEIGHT: 17px" nowrap><font size="2" color="blue"><%Response.Write arr(i,4)%> </font> </td>
</tr>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px" align="left" >|</td></tr>
<tr><%i=i+1%>
<td align="left" bgcolor="yellow" align="left" style="WIDTH:150px; HEIGHT:17px" nowrap><font size="2" color="red"><%Response.Write arr(i,4)%></font> </td>
</tr>
<%if parent=8 then
exit for
else%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>
<tr><td bgcolor="00FF00"style="WIDTH:150px; HEIGHT:17px"></td></tr>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>
<%end if
next%>

<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>

</table>

</td>
</tr>
</table>

<td align="left" height="17"><font size="1" color="blue"><%Response.Write arr(i,4)%></font> </td>
</tr>
<tr><td bgcolor="00FF00" width="20%" height="17" align="left">|</td></tr>
<tr><%i=i+1%>
<td align="left" height="17"><font size="1" color="red"><%Response.Write arr(i,4)%></font> </td>
</tr>
<tr><td bgcolor="00FF00" width="20%" height="17"></td></tr>
<tr><td bgcolor="00FF00" width="20%" height="17"></td></tr>
<tr><td bgcolor="00FF00" width="20%" height="17"></td></tr>
<tr><%i=i+1%>
<td align="left" height="17"><font size="1" color="blue"><%Response.Write arr(i,4)%></font> </td>
</tr>
<tr><td bgcolor="00FF00" width="20%" height="17" align="left">|</td></tr>
<tr><%i=i+1%>
<td align="left" height="17"><font size="1" color="red"><%Response.Write arr(i,4)%></font> </td>
</tr>
<tr><td bgcolor="00FF00" width="20%"></td></tr>
<tr><td bgcolor="00FF00" width="20%"></td></tr>
<tr><td bgcolor="00FF00" width="20%"></td></tr>

the code creates 1 table that contains 5 tables
pls your help, desperate
nivini
 
Sort by date Sort by votes
thank you dan for answering. i placed titled instead of the ASP variables,
the broblem is with the justifying, heuths width or what else
so here it is again without the unneccecry things.
TIA a lot
nivini

<table border=0 style=" HEIGHT:799px" bgcolor="00FF00" width="750px" align="center">

<tr valign="top">

<td >
<table border=0 style="WIDTH:150px; HEIGHT: 799px"><% 'table 1%>
<%for x=1 to 3%>
<tr><td bgcolor="00FF00" width="150px" height="17"></td></tr>
<%next%>
<tr>
<td bgcolor="silver" width=150px" align="left" height="17">baby </td>
</tr>
<%for x=1 to 3%>
<tr><td bgcolor="00FF00" width="150px" height="17"></td></tr>
<%next%>
</table>
</td>


<td>
<table border=0 style="WIDTH: 150px; HEIGHT:799px">

<% for x=1 to 11%>
<tr><td bgcolor="00FF00" width="150px" align="left" nowrap height="17"></td></tr>
<%next%>

<tr><td align="left" nowrap height="17" width="150px"><font color="blue" size="4" >father</font><br>
<font color="black" size="2">
<%Response.Write i%><br>
<%Response.Write i)%><br>
</font>
</td>
</tr>
<% for x=1 to 23%>
<tr><td bgcolor="00FF00" width="150px" align="left" height="17">|</td></tr>
<% next%>

<td align="left" width="150px" height="17"><font color="red" size="4" height="17">mother</font><br>
<font color="black" size="2">
<%Response.Write i%><br>
<%Response.Write i%><br>
</font>
</td>

</tr>
<% for x=1 to 11%>
<tr><td bgcolor="00FF00" width="150px" align="left" nowrap height="17px"></td></tr>
<%next%>

</table>
</td>


<td>
<table border=0 style="WIDTH: 150px; HEIGHT: 799px">

<%for x=1 to 5%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px"></td></tr>
<%next%>


<tr>
<td align="left" width="150px" nowrap height="17"><font size="3" color="blue">grandfather<br></font> </td>
</tr>
<%for x=1 to 11%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px">|</td></tr>
<%next%>

<tr>
<td align="left" width="150px" nowrap height="17"><font size="3" color="red">grandmother<br></font> </td>
</tr>
<%for x=1 to 11%>
<tr><td bgcolor="00FF00" width="150px" nowrap height="17"></td></tr>
<%next%>
<tr>
<td align="left" width="150px" nowrap height="17"><font size="3" color="blue">grandfather<br></font> </td>
</tr>
<%for x=1 to 11%>
<tr><td bgcolor="00FF00" width="150px" height="17">|</td></tr>
<%next%>
<tr>
<td align="left" width="150px" nowrap height="17"><font size="3" color="red">grandmother<br></font> </td>
</tr>
<%for x=1 to 5%>
<tr><td bgcolor="00FF00" width="150px" height="17"></td></tr>
<%next%>

</table>

</td>
<td align="justify">

<table border=0 style="WIDTH:150px; HEIGHT: 799px">
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px"></td></tr>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px"></td></tr>

<%for parent=1 to 4%>
<tr>
<td align="left" style="WIDTH:150px; HEIGHT: 17px" bgcolor="yellow" nowrap><font size="2" color="blue">GRADgrandfather</font> </td>
</tr>
<%
for x=1 to 5%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px" align="left" >|</td></tr>
<%next%>
<tr>
<td align="left" style="WIDTH:150px; HEIGHT: 17px" bgcolor="yellow" nowrap><font size="2" color="red">GRANDgrandmother</font> </td>
</tr>
<%
if parent=4 then
exit for
else
for x=1 to 5%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px" ></td></tr>
<%next%>
<%end if%>
<%next%>


<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px" nowrap></td></tr>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px" nowrap></td></tr>
</table>
</td>
<td align="justify">
<table border=0 style="WIDTH:150px; HEIGHT: 799px">

<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>

<%for parent=1 to 8%>
<tr>
<td align="left" bgcolor="yellow" style="WIDTH:150px; HEIGHT: 17px" nowrap><font size="2" color="blue">GGRANDgrandfather </font> </td>
</tr>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT: 17px" align="left" >|</td></tr>
<tr>
<td align="left" bgcolor="yellow" align="left" style="WIDTH:150px; HEIGHT:17px" nowrap><font size="2" color="red">GGRANDgrandmother</font> </td>
</tr>
<%if parent=8 then
exit for
else%>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>
<tr><td bgcolor="00FF00"style="WIDTH:150px; HEIGHT:17px"></td></tr>
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>
<%end if
next%>

<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>

</table>

</td>
</tr>
</table>

variables parent and x are only counters to save the repeater lines
<tr><td bgcolor="00FF00" style="WIDTH:150px; HEIGHT:17px"></td></tr>
i hope that helps
thanks again nivini
 
Upvote 0 Downvote

>> so here it is again without the unneccecry things.

Or rather, here it is again without the necessary things.

Do you really expect us to unravel all for "for" loops you have used to create cells? Or to install ASP to get your pages up and running, just to debug them for you?

Do us a favour - help us to help you. Post the resulting page that the browser sees, not the server-side page.

Dan
 
Upvote 0 Downvote
This layout is IMO interesting but HTML output is very large. Wanna purified version?
 
Upvote 0 Downvote
Awright... here it goes (few ASP lines included):
Code: 
<link rel="stylesheet" type="text/css" href="blah.css">

<div align="center">
<table class="tree">
<tr valign="top">
	<td>
		<table>
			<tr><td class="child">baby</td></tr>
		</table>
	</td>
	<td>
		<table>
			<tr><td class="male">father<br>blah<br>blah</td></tr>
			<tr><td class="link" style="height: 391px;">&nbsp;</td></tr>
			<tr><td class="female">mother<br>Blah<br>blah</td></tr>
		</table>
	</td>
	<td>
		<table> 
	<%	For parent = 1 To 2 %>		
		<tr><td class="male">grandfather</td></tr>
		<tr><td class="link" style="height: 187px;">&nbsp;</td></tr>
		<tr><td class="female">grandmother</td></tr>
		<%	If Parent = 2 Then Exit For %>
		<tr><td class="link" style="height: 187px;">&nbsp;</td></tr>
	<%	Next %>
		</table>
	</td>
	<td>
		<table> 
	<%	For parent = 1 To 4 %>		
		<tr><td class="male">GRANDgrandfather</td></tr>
		<tr><td class="link" style="height: 85px;">&nbsp;</td></tr>
		<tr><td class="female">GRANDgrandmother</td></tr>
		<%	If Parent = 4 Then Exit For %>
		<tr><td class="link" style="height: 85px;">&nbsp;</td></tr>
	<%	Next %>
		</table>
    </td>
    <td>
		<table>
	<%	For parent = 1 To 8 %>		
		<tr><td class="male">GGRANDgrandfather</td></tr>
		<tr><td class="link">&nbsp;</td></tr>
		<tr><td class="female">GGRANDgrandmother</td></tr>
		<%	If Parent = 8 Then Exit For %>
		<tr><td style="height:51px;">&nbsp;</td></tr>
	<%	Next %>
		</table>
	</td>
</tr>
</table>
</div>
... and file blah.css
Code: 
.tree	{	background-color: whateveryouwant; }
.tree tr	{	vertical-align: middle;	}

.tree table
{	width: 150px;
	font-family: Verdana;
	font-size: 8pt;
	border: 0px;
	border-collapse: collapse;
}

.link
{	border-left: solid black 1px;
	height: 17px;
}

.male, .female, .child
{	height: 17px;
	border: solid black 1px;
	color: black;
	font-size: 8pt;
}

.male		{	background-color: #aaaaff; }
.female	{	background-color: #ffaaaa; }
.child	{	background-color: #a0a0a0; height: 50px;}
 
Upvote 0 Downvote
thank you so much Vongrunt
it works and looks wonderful, it is my first use css file
actualy i use asp(vbscript) and a very little html, so it was a great lesson.
thank you again
nivini
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
232
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
SitesMasstec
  • Locked
  • Question
How to have an HTML opened automatically in an e-mail
Replies
3
Views
253
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
214
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top