Table Sizing Problem

**homeric** · 04-07-2007, 03:20 PM

Hi
I've created a table whith 7 rows & 2 columns - Row1 spans both columns
Row2 spans 6 rows & contains a graphic
Rows 3,4,5,6,7 have text in Col2 only
The whole table is too tall - the entries in Col2 have too much space in them, but no attempts to introduce height stipulations make any difference - Has anyone any ideas please?

**vinyl-junkie** · 04-08-2007, 02:03 AM

Post your code. Also, what browser are you using; e.g., IE6, IE7, Firefox?

**homeric** · 04-08-2007, 03:48 AM

Vinyl-junkie here's the code:-

Code:

<Table border=3 width="100%" height="10%" cellspacing="0" cellpadding="0" valign="bottom">
<TR><TD width="30%" colspan="2" nowrap><H1>This is Angus's Photo Book</H1></TD></TR>
<TR>
<TD height="15%" rowspan="7" width=70% nowrap><a onMouseOver="changer('img3',4)" onMouseOut="changer('img3',3)" 
href="javascript:void"><img name="img3" border="0" vspace="0" hspace="0" src="Project01A2.jpg" alt="Grenada Scenes" 
width=750 height=135></a></TR>
<TR><TD nowrap><H3><p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'blue'" onClick="parent.location='Book.htm'" /p>Book</H3></TD></TR>
<TR><TD nowrap><H3><p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'blue'" onClick="parent.location='PhotoGalleries.htm'" /p>Photo Galleries</H3></TD></TR>
<TR><TD nowrap><H3><p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'blue'" onClick="parent.location='contact.htm'" /p>Contact</H3></TD></TR>
<TR><TD nowrap><H3><p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'blue'" onClick="parent.location='OrderingPage.htm'"/p>How To Order</H3></TD></TR>
<TR><TD nowrap><H3><p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'blue'" onClick="parent.location='PaymentPage.htm'"/p>How To Pay</H3></TD></TR>
</Table>

Here's the shape of what the finished product should be (note deep cells in column 2 - this is the problem - it's forcing the finished screen to require scrolling):-
http://www.petesweb.org.uk/tableview.htm

**homeric** · 04-08-2007, 04:18 AM

Hi Vinyl-junkie forgot to answer about browser - I'm using IE7
Thanks Homeric

**vinyl-junkie** · 04-08-2007, 01:46 PM

Here are some thoughts about how to fix this. The first thing you should always do is make sure you have a doctype at the top of every web page. Secondly, you need to make sure your web page passes W3C validation. After that, fix your display problems.

I use a web page editor called 1stPage2000, which also has a feature called HTML Tidy, which cleans up the code as much as it can. Here's what I came up with after doing that (and manually indenting nested elements. Note: There are still a handful of validation errors with this code.):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="CuteHTML">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080">
<!--Don't forget to add your FREE HitBOX statistics to your web page. To
do so, click on Online Services\HitBox Statistics...-->
<table border="3" width="100%" height="10%" cellspacing="0" cellpadding="0" valign="bottom">
<tr>
	<td width="30%" colspan="2" nowrap>
	<h1>This is Angus's Photo Book</h1>
	</td>
</tr>

<tr>
	<td height="15%" rowspan="7" width="70%" nowrap>
	<a onmouseover="changer(img3,4)" onmouseout="changer(img3,3)" href="javascript:void">
	<img name="img3" border="0" vspace="0" hspace="0" src="Project01A2.jpg" alt="Grenada Scenes" width="750" height="135"></a>
	</td>
</tr>

<tr>
	<td nowrap>
	<p onmouseout="this.style.color = black;" onmouseover="this.style.color = blue" onclick="parent.location=Book.htm">Book</p>
	</td>
</tr>

<tr>
	<td nowrap>
	<p onmouseout="this.style.color = black;" onmouseover="this.style.color = blue" 
	onclick="parent.location=PhotoGalleries.htm">Photo Galleries</p>
	</td>
</tr>

<tr>
	<td nowrap>
	<p onmouseout="this.style.color = black;" onmouseover="this.style.color = blue" 
	onclick="parent.location=contact.htm">Contact</p>
</td>
</tr>

<tr>
	<td nowrap>
	<p onmouseout="this.style.color = black;" onmouseover="this.style.color = blue" 
	onclick="parent.location=OrderingPage.htm">How To Order</p>
	</td>
</tr>

<tr>
	<td nowrap>
	<p onmouseout="this.style.color = black;" onmouseover="this.style.color = blue" 
	onclick="parent.location=PaymentPage.htm">How To Pay</p>
	</td>
</tr>
</table>
</body>
</html>

I didn't compare everything here to your original code, but I caught one glaring mistake that you seem to repeat consistently throughout your code. In your original code, for example, you have:

Code:

<TR><TD nowrap><H3><p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'blue'" onClick="parent.location='Book.htm'" /p>Book</H3></TD></TR>

But you didn't close your paragraph tag. This code should look like this:

Code:

<tr>
<td nowrap>
<p onmouseout="this.style.color = black;" onmouseover="this.style.color = blue" onclick="parent.location=Book.htm">Book</p>
</td>
</tr>

I'm sure that isn't the only thing wrong with the HTML, but you can compare your version to mine to see all the differences.

BTW, you have some javascript errors. Don't know what's up with that, but looks like you still have a bit to fix with this.

**homeric** · 04-09-2007, 03:16 AM

Thanks Vinyl-junkie for your prompt response - I'll look into what you had to say - Homeric

**jesse1** · 05-09-2007, 11:23 AM

I find the best way to set table sizes is with CSS tags. works great and you can also set border colors, cell spacing etc...

Thread: Table Sizing Problem

Thread Tools

Related

(iframe in table)problem Forum: HTML Forum

table css problem (ex. inclued) Forum: CSS Forum

Stylesheet/table problem Forum: CSS Forum

Table Problem Forum: HTML Forum

Table Sizing Problem

Re: Table Sizing Problem

Re: Table Sizing Problem

Re: Table Sizing Problem

Re: Table Sizing Problem

Re: Table Sizing Problem

Re: Table Sizing Problem

Tags for this Thread